SEOLZ

Cwv lcp

Moderate effort

Found on 33% of audited stores.

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.

What it is

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.

Why it matters

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.

How to fix it

  1. Identify the exact LCP element: Open your page in Chrome DevTools → Performance tab → run a mobile-throttled recording, or use PageSpeed Insights (pagespeed.web.dev) to confirm which element (usually the hero/banner image) is the LCP candidate.
  2. Convert the LCP image to WebP or AVIF format, which are 25–50% smaller than JPEG/PNG at equivalent visual quality. Export from your image editor or use a batch conversion tool, then upload the new file to your store.
  3. Add a <link rel='preload'> tag in the <head> of your page specifically for the LCP image, so the browser fetches it at the highest priority before parsing the rest of the page. For responsive images, also add 'imagesrcset' and 'imagesizes' attributes.
  4. Remove or defer render-blocking CSS and JavaScript: move non-critical JS to load with 'defer' or 'async' attributes; inline only critical above-the-fold CSS and load the rest asynchronously. This unblocks the browser so it can paint the LCP element sooner.
  5. Ensure the LCP image is NOT lazy-loaded. Remove loading='lazy' from the hero/banner <img> tag — lazy loading delays the LCP element and is the single most common self-inflicted cause of poor LCP scores.
  6. Set explicit width and height attributes on the LCP image element to prevent layout shifts, enable efficient caching with a long Cache-Control max-age, and serve images from a CDN if possible to reduce network latency.
<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">

Fix it on your platform

Pick your platform for the exact steps.

How to fix cwv lcp on Shopify
  1. 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.
  2. 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' }}.
  3. 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.
  4. 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).
  5. 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.
  6. Verify the fix: re-run PageSpeed Insights on your homepage and confirm LCP drops below 2.5s on mobile.
Full Shopify guide →Official Shopify docs ↗
How to fix cwv lcp on WooCommerce
  1. Install the 'Perfmatters' or 'WP Rocket' plugin (Plugins → Add New) to handle render-blocking JS/CSS deferral and preloading in one interface.
  2. Convert your hero image to WebP: install the 'Imagify' or 'ShortPixel' plugin, which auto-converts uploaded images to WebP and serves them via <picture> elements with a JPEG/PNG fallback.
  3. In your active theme's header.php (Appearance → Theme File Editor → header.php), add a preload link tag for the hero image URL: <link rel='preload' as='image' href='YOUR-HERO-IMAGE-URL.webp' fetchpriority='high'>. If using a page builder (Elementor/Divi), use the theme's Custom Code / Head section instead.
  4. In WP Rocket (Settings → WP Rocket → Media tab), enable 'Disable LazyLoad for LCP image' and paste the CSS selector of your hero image so it loads eagerly.
  5. Under WP Rocket → File Optimization, enable 'Minify CSS', 'Load CSS asynchronously', 'Defer JavaScript', and 'Delay JavaScript execution' to remove render-blocking resources.
  6. Verify: use PageSpeed Insights or the WP Rocket built-in 'Sitechecker' to confirm LCP is under 2.5s on mobile.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix cwv lcp on BigCommerce
  1. Convert your hero/carousel images to WebP externally, then upload them via Storefront → Image Manager or directly through the Banner/Carousel editor (Marketing → Banners or Storefront → Home Page Carousel).
  2. In your Stencil theme files (Storefront → My Themes → Advanced → Download), open templates/components/carousel.html (or your hero partial). Change the <img> src to the WebP version and add fetchpriority='high' loading='eager' attributes.
  3. Add a preload hint: in templates/layout/base.html inside <head>, add <link rel='preload' as='image' href='{{cdn 'img/hero.webp'}}' fetchpriority='high'>.
  4. Remove lazy loading from the LCP image: ensure the hero <img> does NOT have loading='lazy'. BigCommerce's default Cornerstone theme lazy-loads below-fold images — confirm the hero is excluded.
  5. Defer render-blocking scripts: in base.html move third-party <script> tags to the bottom of <body> and add 'defer'. Use the BigCommerce Script Manager (Storefront → Script Manager) to set placement to 'Footer' and load strategy to 'Defer' for any injected scripts.
  6. Re-upload the modified theme and publish it; verify with PageSpeed Insights.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix cwv lcp on Wix
  1. In the Wix Editor, click your hero/banner image → Change Image → upload a WebP version of the file (Wix's media manager stores it and its CDN serves it). Wix also auto-generates WebP on its CDN for most uploaded images.
  2. Ensure the hero strip/image is set to 'No lazy loading': click the hero element → Settings (gear icon) → under 'Layout' or 'Design', confirm 'Lazy load' is NOT enabled for above-the-fold images. Wix automatically treats the first visible image as LCP-priority in modern sites.
  3. Minimize installed Wix Apps and third-party widgets: each one adds JS. Go to Settings → Manage Apps and remove any apps not actively driving revenue.
  4. Use Wix's built-in 'Site Speed Dashboard' (available in Business/eCommerce plans under Analytics & Reports → Site Speed) to identify additional render-blocking resources specific to your site.
  5. For Wix Studio users: in the Pages & Layout panel, ensure the hero image block does not have an animation or 'reveal on scroll' effect applied, as these add JS overhead and can delay LCP paint.
  6. Re-test with PageSpeed Insights after changes; Wix's infrastructure handles most CDN and format optimization automatically, so the biggest wins come from reducing apps and avoiding lazy-load on the hero.
Full Wix guide →Official Wix docs ↗
How to fix cwv lcp on Squarespace
  1. Replace your hero/banner image with a WebP version: Pages → click your homepage → click the banner/header block → Edit → swap the image for a WebP file. Squarespace's CDN (powered by Fastly) serves images efficiently but uses the format you upload.
  2. Keep the hero image file size under 500 KB before uploading: Squarespace does not allow direct control over preload tags without Custom Code injection.
  3. Inject a preload hint: go to Settings → Advanced → Code Injection → paste into the Header field: <link rel='preload' as='image' href='YOUR-WEBP-IMAGE-URL' fetchpriority='high'>. Find the exact CDN URL by right-clicking the image on your live page → Copy Image Address.
  4. Reduce render-blocking third-party scripts: Settings → Advanced → Code Injection → review any scripts in Header/Footer and move non-critical ones to the Footer field. Add 'defer' attribute to any script tags you control.
  5. Disable unnecessary Squarespace extensions/plugins (Extensions → your installed extensions) that inject JS on every page load.
  6. Verify with PageSpeed Insights. Note: Squarespace limits low-level performance tuning; if LCP remains above 2.5s after these steps, consider whether a platform with more control is appropriate for your business.
Full Squarespace guide →Official Squarespace docs ↗
How to fix cwv lcp on Webflow
  1. In the Webflow Designer, select your hero image element → in the Settings panel (right sidebar, gear icon) → upload a WebP version of the image, or use the Asset Manager (left panel → Assets) to replace the existing image with a WebP file.
  2. Set 'Loading' to 'Eager' (not Lazy) for the hero image: in the Image Settings panel → Loading dropdown → select 'Eager'. Also set 'Preload' to 'High Priority' if available in your Webflow plan.
  3. Add a preload link via Project Settings → Custom Code → Head Code: <link rel='preload' as='image' href='YOUR-WEBP-CDN-URL' fetchpriority='high'>. Get the CDN URL from the published page's source or the Assets panel.
  4. Defer non-critical JS: in Project Settings → Custom Code, ensure third-party <script> tags in the Head have 'defer' added. Move non-critical scripts to the Footer Code field instead.
  5. Review and remove unused Webflow interactions/animations on the hero section — heavy GSAP or Lottie animations above the fold significantly delay LCP. Delete or move them below the fold.
  6. Publish and verify with PageSpeed Insights (mobile). Webflow's CDN (via Fastly) handles global delivery; the main wins are format, preload, and removing blocking resources.
Full Webflow guide →Official Webflow docs ↗
How to fix cwv lcp on Adobe Commerce (Magento)
  1. Convert hero/banner images to WebP: in Admin → Content → Blocks or Content → Pages (for CMS banners), replace image src paths with WebP versions. Store your WebP files in pub/media/ alongside originals.
  2. Edit your theme's default_head_blocks.xml or the relevant CMS page XML layout file (app/design/frontend/Vendor/theme/Magento_Theme/layout/) to inject a preload link: <link rel='preload' src='{{media url='wysiwyg/hero.webp'}}' as='image' fetchpriority='high'/>.
  3. Enable Magento's built-in JS bundling and minification: Admin → Stores → Configuration → Advanced → Developer → JavaScript Settings → set 'Merge JS Files' and 'Minify JavaScript Files' to Yes. Enable CSS minification similarly under CSS Settings.
  4. Use a performance extension such as 'Hyvä Theme' or install 'MagePrince Lazy Load' configured to exclude the LCP/hero image from lazy loading.
  5. Enable full-page cache (Admin → System → Cache Management → Full Page Cache → Varnish or built-in) and configure a CDN via Admin → Stores → Configuration → General → Web → Base URLs to serve static assets from a CDN.
  6. Deploy static content (bin/magento setup:static-content:deploy) after theme file changes, then flush cache (bin/magento cache:flush) and verify LCP with PageSpeed Insights.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix cwv lcp on WordPress.org
  1. Install WP Rocket or Perfmatters (Plugins → Add New → search) for an all-in-one performance plugin that handles preloading, CSS/JS deferral, and lazy-load exclusions.
  2. Install Imagify or ShortPixel to auto-convert existing and newly uploaded images to WebP with automatic <picture> tag fallback — no manual image re-export needed.
  3. In WP Rocket → Media: find 'Exclude from LazyLoad' and add the CSS selector or filename of your hero image (e.g., .hero-image, hero-banner.jpg) so it loads eagerly.
  4. In WP Rocket → Preload: enable 'Preload Links' and use the 'Prefetch DNS Requests' field to add your CDN domain.
  5. Manually add a preload tag for maximum control: Appearance → Theme File Editor → header.php → inside <head> add: <link rel='preload' as='image' href='/wp-content/uploads/hero.webp' fetchpriority='high'>.
  6. Verify with PageSpeed Insights mobile score and WP Rocket's Cache Lifespan settings to ensure the optimized page is served from cache to all visitors.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix cwv lcp on Shopify Plus
  1. Follow all standard Shopify steps above — Shopify Plus uses the same Liquid/theme architecture.
  2. Additionally, use Shopify Plus's Script Editor (or Shopify Functions) to review checkout scripts — remove or defer any non-critical checkout JS that may be loaded site-wide via theme.liquid.
  3. Use the Shopify Plus Organization Admin to push the optimized theme across multiple stores simultaneously if the same hero template is used across storefronts.
  4. Engage Shopify Plus's Launch Engineer or a Shopify Expert for server-side rendering (Hydrogen/Oxygen) migration if LCP cannot be brought under 2.5s through theme-level changes alone.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix cwv lcp on PrestaShop
  1. Convert your hero/slider images to WebP and upload them via Back Office → Design → Image Slider (or your installed slider module, e.g., ps_imageslider).
  2. Install the 'psgdpr' or a dedicated performance module like 'PrestaSEO Speed' or 'Krona SEO & Speed' from the PrestaShop Addons marketplace to handle JS/CSS minification and deferral.
  3. Edit your theme's header.tpl (themes/YourTheme/templates/_partials/head.tpl) to add: <link rel='preload' as='image' href='{$hero_image_url}' fetchpriority='high'>.
  4. In the slider module settings, ensure the first slide image does NOT have lazy loading enabled.
  5. Enable PrestaShop's built-in CCC (Combine, Compress, Cache) settings: Back Office → Shop Parameters → General → CCC → enable for CSS and JS.
  6. Clear the cache (Advanced Parameters → Performance → Clear cache) and verify with PageSpeed Insights.
Full PrestaShop guide →Official PrestaShop docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find cwv lcp — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

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.

Why does cwv lcp matter?

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.

How do I fix cwv lcp?

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.

Authoritative references

Related SEO issues