Shopify site speed: fixing Core Web Vitals on a heavy theme, step by step.

Cumulative Layout Shift on Shopify is most commonly caused by images missing width and height attributes. Without them, the browser allocates zero space for the image while it loads, then shifts everything down when it arrives — which is exactly what Google measures as CLS. Shopify’s image_tag Liquid filter outputs width and height automatically; the problem is that many heavy themes use raw <img> tags in older section files.

Search your theme for <img tags without explicit dimensions or an aspect-ratio CSS rule, and migrate them to image_tag. Do not forget logo images, collection banners, and blog post thumbnails — all common CLS offenders. In our tests, fixing dimensions across all section files reduced CLS from 0.19 to 0.06 on a Turbo theme store, moving it from failing to well within Google’s 0.1 threshold in under an hour of work.

Custom fonts are a common source of both CLS and slow LCP on heavy themes. By default, the browser may wait for the font to load before rendering text (“flash of invisible text”) or swap abruptly in a way that shifts content (“flash of unstyled text”). Adding font-display: swap to your @font-face declarations tells the browser to render text immediately with a fallback, then swap to your custom font when it arrives — visible text counts toward LCP, so this directly helps the metric.

Pair font-display: swap with a preload hint in your theme.liquid head for the one or two fonts that appear above the fold. Use rel="preload" and as="font" with the correct WOFF2 URL. If you can use a system font stack for body text and reserve your brand font only for headings, you eliminate the largest font-load delay entirely. This fix alone reduced CLS from 0.09 to 0.05 in our tests on a beauty store using two custom serif fonts.

Render-blocking scripts are the main cause of poor INP (Interaction to Next Paint) on Shopify stores running heavy themes. Every <script> tag without defer or async blocks HTML parsing, delaying the point at which the browser can respond to user interactions. defer preserves execution order and is the right choice for most scripts; async is better for independent analytics pixels that do not depend on DOM state.

For chat widgets, review carousels, and email pop-ups, go one step further: load them only after the user’s first interaction (a scroll event or pointer move) rather than at page load at all. This keeps the main thread free during the critical first 500 ms when Google measures INP. In our tests, deferring four non-essential scripts on an Impulse theme store reduced INP from 290 ms to 168 ms with zero visible change to the user experience. Combine this with the app audit above for the biggest interactivity improvement. For a deeper look at how speed ties into rankings, see our complete Shopify SEO guide.

Shopify automatically converts images to WebP and AVIF when the visitor’s browser supports them — but only when you use the platform’s image_tag Liquid filter or the img_url filter to generate srcset attributes. Images delivered via CSS background-image, hardcoded in theme settings, or uploaded as static files in the assets folder skip this process entirely and are served as the original JPEG or PNG.

The fix is straightforward: use image_tag with a widths parameter to generate multiple srcset sizes, add loading: 'lazy' for below-fold images, and let Shopify’s CDN handle format selection. Also add explicit width and height attributes on every call (which ties back to fix #6 for CLS). In our tests, migrating a Kalles store’s product images from manually compressed JPEGs to Shopify CDN-served WebP with proper srcset reduced LCP on the product detail page from 3.8 s to 3.3 s — a 0.5-second improvement with two hours of Liquid changes.

If your store is running a premium theme from 2019–2022 that shipped with jQuery, a monolithic CSS file over 300 KB, and JavaScript bundles that predate ES modules, the optimisation ceiling is low. You can defer scripts and add image dimensions and still be fighting physics — the architecture itself is the constraint. Shopify’s Online Store 2.0 themes, led by Dawn, were built from scratch for performance: section-level CSS loading, deferred JavaScript modules, no jQuery, and a default PageSpeed score in the high 80s before you touch anything.

Migration is a real project — plan four to eight weeks to rebuild your design, migrate metafields and content, test every app integration, and QA across devices. But for stores where the current theme scores below 40 on mobile PageSpeed and the fixes above have been applied without reaching 60, migration is the right call. Many brands use the migration as an opportunity to simplify: fewer sections, fewer apps, fewer custom scripts. Conversion rate gains from a cleaner theme often equal or exceed the speed gains alone, making the project economics straightforward.