How to fix cwv lcp on Shopify
Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving your hero image in a modern format, preloading it, and eliminating render-blocking resources.
Steps for Shopify
- Convert your hero image to WebP before uploading: go to Online Store → Themes → Customize → the section containing your hero banner (e.g., 'Image banner' or 'Slideshow') → click the image picker and upload a WebP version of the image.
- Shopify's CDN automatically serves images via its Imgix-powered CDN, but you must request WebP explicitly in Liquid. In your theme code (Online Store → Themes → Edit code), find the hero section's Liquid file (e.g., sections/image-banner.liquid) and change the image_url filter to include format: 'webp' — e.g., {{ section.settings.image | image_url: width: 1500, format: 'webp' | image_tag: loading: 'eager', fetchpriority: 'high' }}.
- Add a preload link: in layout/theme.liquid, inside the <head> tag, add: <link rel='preload' as='image' href='{{ section.settings.image | image_url: width: 1500, format: 'webp' }}' fetchpriority='high'>. For Dawn and similar themes, look for an existing hero preload block and update it.
- Ensure the hero <img> tag does NOT have loading='lazy'. In the same section Liquid file, confirm the image_tag call uses loading: 'eager' (or omits loading entirely).
- Defer non-critical JS: in layout/theme.liquid, add 'defer' to any non-essential <script> tags. Remove any unused apps via Online Store → Apps to reduce JS payload.
- Verify the fix: re-run PageSpeed Insights on your homepage and confirm LCP drops below 2.5s on mobile.
<link rel="preload" as="image" href="/images/hero-banner.webp" fetchpriority="high" imagesrcset="/images/hero-banner-800.webp 800w, /images/hero-banner-1500.webp 1500w" imagesizes="100vw">
<!-- Hero img tag — NO lazy loading, explicit dimensions -->
<img src="/images/hero-banner.webp"
srcset="/images/hero-banner-800.webp 800w, /images/hero-banner-1500.webp 1500w"
sizes="100vw"
width="1500" height="600"
alt="Descriptive hero text"
fetchpriority="high"
loading="eager">What is cwv lcp?
Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on your page — almost always the hero image or headline banner — to fully appear on the screen after someone clicks your link. Google considers anything under 2.5 seconds "Good," 2.5–4 seconds "Needs Improvement," and over 4 seconds "Poor." An LCP of 7.5 seconds on mobile means shoppers are staring at a blank or half-loaded page for over seven seconds before they see your store's main content — a painfully long wait that drives them away before they ever see your products.
LCP is one of Google's Core Web Vitals, a confirmed ranking signal that directly affects where your store appears in search results. A poor LCP score suppresses organic traffic, meaning fewer potential buyers even find your store. On mobile — where most ecommerce browsing now happens — slow LCP dramatically increases bounce rates: studies consistently show conversions drop 4–8% for every additional second of load time. Improving LCP from 7.5s to under 2.5s can meaningfully lift both your search rankings and the percentage of visitors who stay long enough to make a purchase. Mobile-first indexing means Google judges your site primarily by its mobile experience, so a slow mobile LCP hurts your desktop rankings too.
See the complete Cwv lcp guide for every platform and the full background.
Not sure if your Shopify store has this?
Run a free SEOLZ audit — we’ll find cwv lcp and every other issue across your whole site.
Scan my site free