Core Web Vitals for Shopify: A Practical Optimization Checklist

Most Shopify stores lose conversions not because of bad design, but because of slow templates. Here's the checklist I run on every store before calling a project "launch ready."

1. Audit before you touch anything

Run Lighthouse and PageSpeed Insights on the homepage, a collection page, and a product page — not just the homepage. Collection and product pages usually carry the most third-party script weight.

2. Kill render-blocking apps

Most page-speed regressions on Shopify come from apps injecting synchronous scripts into theme.liquid. Move everything non-critical to defer or load it after DOMContentLoaded.

3. Serve responsive images, always

Use Liquid's image_url filter with explicit width parameters and srcset, and set loading="lazy" on every image below the fold. Never ship a 4000px source image for a 400px card.

4. Preload the largest contentful paint element

If your hero banner is the LCP element, <link rel="preload"> it and make sure it isn't wrapped in a lazy-loading library.

5. Minimize Liquid render complexity

Avoid deeply nested {% for %} loops over large collections directly in templates. Paginate, and cache expensive computed values in metafields where possible.

Results I typically see

Applying just these five steps on an OS 2.0 theme typically moves a store from the 60s into the 90+ range on mobile Lighthouse scores — a meaningful jump for both SEO ranking and conversion rate.