How to fix cwv lcp on Adobe Commerce (Magento)

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.

Steps for 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.
Official Adobe Commerce (Magento) documentation ↗

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.

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.

See the complete Cwv lcp guide for every platform and the full background.

Not sure if your Adobe Commerce (Magento) store has this?

Run a free SEOLZ scan — we’ll find cwv lcp and every other issue across your whole site.

Scan my site free

Fix cwv lcp on another platform