Cwv lcp

Moderate effort

Found on 60% of audited stores.

Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving the hero image in a next-gen format (WebP/AVIF), 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 banner — to fully appear in a visitor's browser. Google considers a "good" LCP anything under 2.5 seconds. An LCP of 9+ seconds means shoppers are staring at a blank or partially loaded page for nearly ten seconds before they see your main content. LCP is one of Google's three Core Web Vitals, which are direct ranking signals used in Google Search.

Why it matters

A slow LCP directly hurts your Google rankings because Core Web Vitals are an official page-experience ranking factor — pages with poor LCP can lose positions to faster competitors even with identical content. More critically, research consistently shows that every additional second of load time reduces conversion rates by 2–7%; an LCP of 9 seconds can cost you the majority of mobile visitors who leave before the page even finishes loading. Mobile shoppers are disproportionately affected because mobile connections are slower, and Google indexes the mobile version of your site first. Fixing LCP is one of the highest-ROI technical improvements an ecommerce store can make: faster pages rank higher, bounce less, and convert better.

How to fix it

  1. Identify the LCP element: Use Google PageSpeed Insights (pagespeed.web.dev) on your homepage and top landing pages — the 'LCP' section names the exact element (usually a hero/banner image or a large text block). Screenshot it for reference.
  2. Convert the LCP image to WebP or AVIF: These modern formats are 25–50% smaller than JPEG/PNG at the same visual quality. Re-export your hero image in WebP (broad browser support) and optionally AVIF (even smaller, but check browser compatibility). Upload the new file to your store.
  3. Preload the LCP image: Add a <link rel='preload'> tag in the <head> of your page pointing to the hero image so the browser fetches it before it parses the rest of the page. This alone can cut LCP by 1–3 seconds.
  4. Remove or defer render-blocking CSS and JavaScript: Any <script> or <link rel='stylesheet'> in your <head> that loads before the LCP image delays paint. Add 'defer' or 'async' to non-critical scripts, move analytics/chat widgets to load after the page, and inline only the critical CSS needed for above-the-fold content.
  5. Do not lazy-load the LCP image: Ensure your hero image does NOT have loading='lazy' — lazy loading deliberately delays images, which is the opposite of what you want for LCP.
  6. Verify the fix: Re-run PageSpeed Insights or use Chrome DevTools > Performance tab to confirm LCP drops below 2.5 s on mobile. Check the Core Web Vitals report in Google Search Console to track field data improving over 28 days.

Fix it on your platform

Pick your platform for the exact steps.

How to fix cwv lcp on Shopify
  1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your storefront URL. Note the filename of the LCP image (usually the first banner/hero in your theme's index section).
  2. CONVERT TO WEBP: Shopify automatically serves WebP when you upload a standard JPEG/PNG — verify by right-clicking your live hero image and checking the URL ends in .webp or contains 'format=webp'. If not, ensure you are using a modern theme (Dawn or equivalent).
  3. PRELOAD: Go to Online Store › Themes › your active theme › Edit code. Open 'layout/theme.liquid'. Inside the <head> tag, add: <link rel='preload' as='image' href='{{ section.settings.image | image_url: width: 1500 }}' fetchpriority='high'>. For a hardcoded URL use your CDN path directly.
  4. NO LAZY-LOAD: In your hero section's Liquid file (e.g., sections/image-banner.liquid), find the <img> tag for the hero and remove loading='lazy' or change it to loading='eager'. Also add fetchpriority='high'.
  5. DEFER JS: In theme.liquid, add 'defer' to non-critical <script src='...'> tags that appear in <head>.
  6. APPS: Install a performance app such as 'Crush.pics' or 'TinyIMG' for bulk WebP conversion, or 'Booster: Page Speed Optimizer' for automatic render-blocking JS deferral.
  7. VERIFY: Re-run PageSpeed Insights and check Google Search Console › Experience › Core Web Vitals.
Full Shopify guide →Official Shopify docs ↗
How to fix cwv lcp on WooCommerce
  1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your homepage and key product/category pages. The LCP element is usually the hero image set in your theme's Customizer or a page-builder block.
  2. CONVERT TO WEBP: Install the free plugin 'WebP Express' or 'Imagify' (freemium). Activate and run a bulk conversion. Imagify: Plugins › Add New › search 'Imagify' › Install & Activate › Settings › choose WebP format › Bulk Optimize.
  3. PRELOAD: Install 'WP Rocket' (paid) or 'LiteSpeed Cache' (free). In WP Rocket: Settings › WP Rocket › Media tab › enable 'Preload LCP Image'. In LiteSpeed Cache: Settings › LiteSpeed Cache › Page Optimization › enable 'Preload Hero Image'.
  4. DEFER JS & REMOVE RENDER-BLOCKING: In WP Rocket: Settings › WP Rocket › File Optimization › enable 'Defer JavaScript Execution' and 'Delay JavaScript Execution'. In LiteSpeed Cache: Page Optimization › JS Deferred/Delayed.
  5. NO LAZY-LOAD ON HERO: In your theme's Customizer or code, ensure the hero/banner img tag has loading='eager' and fetchpriority='high'. Most caching plugins have an option to exclude the LCP image from lazy-loading — use it.
  6. VERIFY: Re-run PageSpeed Insights; check Google Search Console › Core Web Vitals report.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix cwv lcp on BigCommerce
  1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your storefront. The LCP is usually the hero carousel image configured under Storefront › Home Page Carousel or a theme banner.
  2. CONVERT TO WEBP: BigCommerce's Akamai Image Manager automatically serves WebP/AVIF to supported browsers when you upload standard images — no action needed if you are on a current plan. Confirm by inspecting the hero image URL for a format parameter.
  3. UPLOAD OPTIMISED SOURCE: Even with auto-conversion, upload the highest-quality but appropriately-sized source JPEG/PNG (max 1920px wide) via Storefront › Image Manager so the CDN has a good original to compress.
  4. PRELOAD: Go to Storefront › My Themes › Edit Theme Files (or use Stencil CLI). Open templates/layout/base.html. In <head>, add: <link rel='preload' as='image' href='{hero image CDN URL}' fetchpriority='high'>. For dynamic images use the Handlebars variable that outputs your carousel image.
  5. DEFER JS: In base.html, add 'defer' to non-essential third-party <script> tags. Move analytics and chat widgets to the bottom of <body> or wrap in a setTimeout.
  6. NO LAZY-LOAD: Find the carousel/hero img tag in templates/components/ and ensure it has loading='eager' fetchpriority='high'.
  7. VERIFY: Re-run PageSpeed Insights; monitor Core Web Vitals in Google Search Console.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix cwv lcp on Wix
  1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your Wix site URL. The LCP is usually the large image/strip at the top of your homepage.
  2. WEBP: Wix automatically serves images in WebP to supporting browsers — no conversion needed. Ensure your source image is high quality JPEG/PNG uploaded through the Wix Media Manager.
  3. OPTIMISE IMAGE SIZE: In the Wix Editor, click the hero image/strip › Settings › change the image to the smallest dimensions that still look sharp (e.g., 1500px wide for a full-width banner). Oversized source images slow delivery even after auto-conversion.
  4. PRELOAD (LIMITED): Wix does not allow direct <head> tag editing on standard plans. Upgrade to Wix Studio or use Wix's Velo (Dev Mode) to inject a preload link via the wix-seo API: import wixSeo from 'wix-seo'; wixSeo.setLinks([{rel: 'preload', href: 'YOUR_IMAGE_URL', as: 'image'}]);
  5. DEFER JS: Wix controls most JS loading internally. Minimise third-party apps (Wix App Market) that inject scripts — every unused app adds render-blocking weight. Remove apps you do not actively use.
  6. LAZY-LOAD: Wix applies lazy-loading automatically; for the hero image, position it as a 'strip background' or 'above-the-fold' element so Wix's engine prioritises it. Wix Studio users can set fetchpriority via custom properties.
  7. VERIFY: Re-run PageSpeed Insights after publishing changes.
Full Wix guide →Official Wix docs ↗
How to fix cwv lcp on Squarespace
  1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your Squarespace URL. LCP is almost always the banner/header image on your homepage.
  2. WEBP: Squarespace automatically serves WebP to supporting browsers via its Imgix CDN — no manual conversion needed.
  3. OPTIMISE SOURCE: Upload hero images at 2500px wide maximum and use JPEG at 85% quality before uploading. Squarespace resizes and converts automatically, but a smaller source = faster processing and delivery.
  4. REDUCE BANNER SIZE: In Pages › your page › Banner › Edit, use a focal-point crop to reduce unnecessary image area. Shorter banners render faster.
  5. INJECT PRELOAD (7.1 + Code Injection): Go to Settings › Advanced › Code Injection › Header. Paste: <link rel='preload' as='image' href='YOUR_HERO_IMAGE_URL' fetchpriority='high'>. Find your hero image URL by right-clicking the live image and copying the src.
  6. DEFER JS: In Code Injection › Footer, move non-critical third-party scripts here. Add 'defer' attribute to any custom <script> tags you have injected.
  7. REMOVE UNUSED PLUGINS/BLOCKS: Delete any Squarespace blocks or extensions you are not using — each can add render-blocking weight.
  8. VERIFY: Re-run PageSpeed Insights after saving.
Full Squarespace guide →Official Squarespace docs ↗
How to fix cwv lcp on Webflow
  1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your published Webflow URL. The LCP element is usually a Hero Section background image or a large <img> element at the top of the page.
  2. CONVERT TO WEBP/AVIF: In the Webflow Designer, select your hero image element › Asset panel › upload a WebP version of your hero image. Webflow also auto-generates WebP for images uploaded as JPEG/PNG in newer projects.
  3. SET LOADING PRIORITY: Select the hero <img> in the Designer › Element Settings (D key) › set Loading to 'Eager' and in the Custom Attributes panel add: Name: fetchpriority, Value: high.
  4. PRELOAD: Go to Project Settings › Custom Code › Head Code. Add: <link rel='preload' as='image' href='YOUR_WEBFLOW_IMAGE_CDN_URL' fetchpriority='high'>. Find the URL from the published page's source.
  5. DEFER JS: In Project Settings › Custom Code, move non-critical third-party <script> tags to the Footer Code section and add 'defer'. Do not defer scripts that must run before first paint.
  6. REMOVE INTERACTIONS FROM HERO: Webflow Interactions that trigger on page load for above-the-fold elements add JS weight. Simplify or remove entrance animations on the hero section.
  7. VERIFY: Publish the site and re-run PageSpeed Insights. Check Webflow's SEO settings confirm no lazy-load is applied to the hero.
Full Webflow guide →Official Webflow docs ↗
How to fix cwv lcp on Adobe Commerce (Magento)
  1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your homepage and category pages. LCP is typically the hero banner image in the CMS page or a slider widget.
  2. CONVERT TO WEBP: Install the Magento 2 module 'magento/module-webp' (available in Magento 2.4.x) or a third-party module such as 'Yireo_Webp2'. Enable it: Stores › Configuration › Advanced › Developer › Image Processing Settings. Alternatively, use a CDN with on-the-fly conversion (Cloudflare, Fastly).
  3. PRELOAD: Edit your theme's default_head_blocks.xml (located in app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/). Add: <link rel='preload' as='image' href='{{media url="path/to/hero.webp"}}' fetchpriority='high'/>. Run bin/magento cache:clean after saving.
  4. NO LAZY-LOAD ON HERO: In your theme's hero banner template (.phtml file), ensure the hero <img> tag has loading='eager' fetchpriority='high' and does NOT have loading='lazy'.
  5. DEFER JS: In Magento Admin › Stores › Configuration › Advanced › Developer › JavaScript Settings: set 'Move JS code to the bottom of the page' to Yes. For more granular control use RequireJS bundles or a performance extension such as 'Hyvä' theme.
  6. FULL PAGE CACHE + CDN: Enable Magento Full Page Cache (Stores › Configuration › Advanced › System › Full Page Cache) and connect a CDN (Fastly for Magento Commerce, or Cloudflare). This dramatically reduces TTFB which directly reduces LCP.
  7. VERIFY: Run bin/magento cache:flush, then re-run PageSpeed Insights. Monitor Core Web Vitals in Google Search Console.
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 ↗
How to fix cwv lcp on Next.js (Headless)
  1. Replace any raw <img> tag used for the hero/banner with Next.js's built-in <Image> component (next/image). Set the `priority` prop so Next.js automatically emits a <link rel='preload'> for the image and skips lazy-loading — this is the single highest-impact LCP fix.
  2. Set the `sizes` prop to match the image's rendered CSS width at every breakpoint (e.g. `sizes='100vw'` for a full-width hero). This lets the browser download the smallest adequate srcset candidate instead of the full-resolution file.
  3. Enable modern format delivery: next/image serves WebP/AVIF automatically via its built-in Image Optimization API. Confirm `images.formats` in next.config.js includes `['image/avif', 'image/webp']` (this is the default but worth verifying). For remote CDN images also add the domain/remotePattern to `images.remotePatterns`.
  4. Eliminate render-blocking CSS/JS: audit `_app.tsx` / `app/layout.tsx` for synchronous third-party scripts and move them to next/script with `strategy='lazyOnload'` or `strategy='afterInteractive'`. Never use the default (blocking) strategy for non-critical scripts.
  5. Use `next/font` for any custom web font used in the LCP area instead of a <link> stylesheet. `next/font` inlines the @font-face and removes the render-blocking font request entirely.
  6. Run Lighthouse or `next build && next start` with `NEXT_TELEMETRY_DISABLED=1` to verify LCP drops below 2.5 s. Use the built-in `/_next/image` response headers (Cache-Control: public, max-age=31536000) to confirm the optimized image is being served.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix cwv lcp on Elementor
  1. Convert your hero image to WebP (or AVIF) before uploading: use Squoosh (squoosh.app) or ShortPixel to export the image as WebP at 80–85% quality, keeping the same dimensions as the original. Upload this WebP file to your WordPress Media Library.
  2. Set the hero image as the LCP element in Elementor: open the page in Elementor Editor, click the Section or Widget containing the hero image, go to Advanced → Motion Effects and ensure no lazy-load or entrance animation is applied to it (animations delay LCP paint). If it is an Image widget, confirm 'Loading' is set to 'Eager' under Content → Image → Advanced Attributes.
  3. Enable Elementor's built-in image optimization: in WordPress Admin go to Elementor → Settings → Performance, enable 'Optimize Images' and set the format to WebP. This makes Elementor serve WebP automatically to supporting browsers via its srcset generation.
  4. Add a preload hint for the hero image to eliminate discovery delay: go to Elementor → Custom Code (or use a plugin like 'Head, Footer and Post Injections'), add a <link rel='preload' as='image' href='/wp-content/uploads/YOUR-HERO.webp' fetchpriority='high'> tag in the <head> section so the browser fetches it before parsing render-blocking resources.
  5. Reduce render-blocking CSS/JS generated by Elementor: in Elementor → Settings → Performance, enable 'Improved Asset Loading' (loads only the CSS/JS needed per page), enable 'Inline CSS for Critical Elements', and turn on 'Remove Unused CSS'. Then enable 'Defer Non-Critical CSS' to prevent stylesheets from blocking the initial render.
  6. Test the result: clear all caches (Elementor → Tools → Regenerate CSS & Data, then your hosting/CDN cache), then run a PageSpeed Insights test on the page. Confirm LCP is under 2.5 s, the LCP element is the hero image, and the WebP format is confirmed in the 'Largest Contentful Paint element' diagnostic.
Full Elementor guide →Official Elementor docs ↗

Does your site have this issue?

Run a free SEOLZ scan 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 banner — to fully appear in a visitor's browser. Google considers a "good" LCP anything under 2.5 seconds. An LCP of 9+ seconds means shoppers are staring at a blank or partially loaded page for nearly ten seconds before they see your main content. LCP is one of Google's three Core Web Vitals, which are direct ranking signals used in Google Search.

Why does cwv lcp matter?

A slow LCP directly hurts your Google rankings because Core Web Vitals are an official page-experience ranking factor — pages with poor LCP can lose positions to faster competitors even with identical content. More critically, research consistently shows that every additional second of load time reduces conversion rates by 2–7%; an LCP of 9 seconds can cost you the majority of mobile visitors who leave before the page even finishes loading. Mobile shoppers are disproportionately affected because mobile connections are slower, and Google indexes the mobile version of your site first. Fixing LCP is one of the highest-ROI technical improvements an ecommerce store can make: faster pages rank higher, bounce less, and convert better.

How do I fix cwv lcp?

Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving the hero image in a next-gen format (WebP/AVIF), preloading it, and eliminating render-blocking resources.

Authoritative references

Related SEO issues