7 Shopify Theme Performance Tips That Actually Move Core Web Vitals

Every merchant has run a Lighthouse audit and been told to "eliminate render-blocking resources." Less common is knowing which fixes are worth the effort on a Shopify theme specifically — where you don't control the CDN, the server, or half the scripts on the page.

These are the seven changes we make most often on client themes, roughly in order of impact.

Start with the app audit, not the code

The biggest performance problem on most Shopify stores isn't the theme — it's the apps. Every installed app can inject scripts, and many keep injecting them after uninstall. Before touching Liquid, list every script in your theme and match it to an app you actually use. On a recent project, removing leftover scripts from six abandoned apps cut JavaScript weight nearly in half before we wrote a single line.

Fix the largest contentful paint image

On product and collection pages, LCP is almost always an image. Three changes cover most of it: serve responsive sizes with the image_url filter and srcset so mobiles don't download desktop images, add loading="eager" and fetchpriority="high" to the first hero or product image only, and lazy-load everything below the fold. Shopify's CDN does the format negotiation — your job is just to ask for sensible sizes.

Stop the layout shift

CLS on Shopify themes usually comes from three places: images without width and height attributes, web fonts swapping late, and app-injected banners pushing content down. Reserve space for all three. For fonts, preload the one or two files you actually use and set font-display to swap — then stop loading the other six weights the theme shipped with.

Cut the JavaScript diet

Themes built on heavy frameworks pay for it on every page view. Modern themes need surprisingly little JavaScript: a cart drawer, a variant picker, maybe a slider. We've replaced multi-hundred-kilobyte bundles with a few small vanilla or Alpine.js modules with no loss of function. If your theme loads jQuery in 2026, that's the first thing to go.

Paginate and defer collection content

Collection pages that render 48 products with quick-view modals for each are doing work no shopper asked for. Render 24, paginate or infinite-scroll the rest, and load quick-view content on interaction instead of upfront.

Measure like a merchant, not a developer

Lighthouse scores are a proxy. What matters is field data: Core Web Vitals from real sessions in Search Console, and conversion rate by landing page template in analytics. We benchmark both before and after every performance engagement — a theme that scores 95 but converts worse is a failed project.

Keep it fast

Performance decays one app install at a time. Put a performance budget in your team's definition of done: any new app or section gets checked against LCP and total script weight before it ships to the live theme.

If your store's vitals are stubbornly orange, we do performance-focused theme work with before/after numbers in the contract. Book a call and bring your Search Console data.