Adobe Commerce development
Storefront design
Performance & SEO
AI & agentic commerce
Release tracker
To improve Core Web Vitals on a Magento store, fix them one metric and one page template at a time. On Magento, a poor Largest Contentful Paint (LCP) usually traces back to cache misses, render-blocking CSS or a JavaScript-built image gallery or slider; a poor Interaction to Next Paint (INP) to heavy Luma JavaScript and third-party tags; and a poor Cumulative Layout Shift (CLS) to images without dimensions and content injected after load. The symptom-to-cause table below maps each problem to where to look.
The targets
Google's Core Web Vitals are measured on real visits and assessed at the 75th percentile, separately for mobile and desktop. According to web.dev, a page is "good" when:
- LCP is 2.5 seconds or less (loading)
- INP is 200 milliseconds or less (responsiveness; INP replaced First Input Delay in March 2024)
- CLS is 0.1 or less (visual stability)
Work from field data: the Core Web Vitals report in Search Console groups URLs by similar issues, and the Chrome UX Report or your own real-user monitoring show the trend. Use Lighthouse and Chrome DevTools to reproduce and debug, but judge success by field data, which updates over a rolling 28-day window.
Find the failing template first
Magento pages fall into a few templates: home, category (product listing), product, CMS, cart and checkout. A problem on the product template affects thousands of URLs at once. Search Console's grouping usually makes the culprit obvious. Fix the template, not individual URLs.
Symptom-to-cause table for Magento
| Metric | Symptom | Likely Magento cause | Where to look and fix |
|---|---|---|---|
| LCP | Slow on all templates, long server response time | Full page cache misses or no Varnish/Fastly | Check cache hit headers; remove uncacheable blocks; warm cache after deploys |
| LCP | Product page LCP late even with fast server | Luma's JavaScript gallery builds the main image after scripts load | Render the first image in HTML; preload it; or use a lighter gallery |
| LCP | Home page LCP late | Page Builder slider or banner using a CSS background or lazy-loaded image | Use an img element for the first slide, no lazy loading, fetchpriority="high" |
| LCP | Text-heavy pages slow to paint | Render-blocking theme CSS and web fonts | Critical CSS, preload key fonts, font-display: swap |
| LCP | Category LCP slow | Oversized product images, no CDN or modern format | Serve resized images in WebP or AVIF via CDN; set sizes |
| INP | Slow response to first taps after load | Many RequireJS and Knockout modules initializing on the main thread | Remove unused modules, defer non-critical widgets, consider Hyvä or Breeze |
| INP | Filters in layered navigation feel stuck | Full page reload or heavy AJAX filter extension | Profile the interaction; show immediate visual feedback; trim handlers |
| INP | Slow swatch or option selection | Configurable product with many options recalculating price and images | Profile the swatch renderer; reduce work per click; lazy-load option images |
| INP | Add to cart feels slow | Mini cart and customer data sections reloading synchronously | Limit sections invalidated on add to cart; show feedback before the request returns |
| INP | Poor across all pages | Third-party scripts: tag manager tags, chat, reviews, A/B testing | Audit tags; delay non-essential ones until after interaction or idle |
| CLS | Product page shifts as gallery loads | Gallery placeholder size differs from final gallery | Reserve the final aspect ratio with CSS |
| CLS | Header jumps after load | Private content (welcome message, mini cart count) rendered after the cached page loads | Reserve space for those elements so filled content does not resize the header |
| CLS | Content pushed down on home page | Promo bars, cookie banners or sliders inserted after load | Reserve space or overlay them instead of pushing content |
| CLS | Category grid shifts | Product images without width and height, swatches loading late | Set image dimensions; reserve space for swatches and labels |
| CLS | Text reflows when fonts arrive | Web fonts with different metrics from fallback fonts | Preload fonts; match fallback font metrics |
Fixing LCP on Magento
web.dev breaks LCP into four parts: time to first byte, resource load delay, resource load duration and element render delay. On Magento, the first part is usually about caching. A category page served from Varnish or Fastly starts fast; one generated by PHP on every request rarely meets 2.5 seconds on mobile. Read how Magento's cache layers work if hit rates are low.
The other parts are about the image itself. Make sure the browser can discover the LCP image in the initial HTML, not after JavaScript runs, and that it is not lazy-loaded. Size it for the viewport and serve a modern format through a CDN.
Fixing INP on Magento
INP measures the delay from a user's tap, click or key press to the next frame painted. It is poor when the main thread is busy. On Luma, the main thread is shared by RequireJS module loading, Knockout bindings, jQuery widgets and every third-party tag.
- Record the slow interaction in Chrome DevTools' Performance panel and look for long tasks.
- Break up long work, and give immediate visual feedback (a pressed state or spinner) before doing heavy work.
- Remove or delay scripts that do not need to run before the first interaction.
- Follow Adobe's advice not to enable "Merge JavaScript Files", and not to merge or bundle files when the site uses HTTP/2.
When the theme's JavaScript is the main cost, replacing the frontend is the structural fix. See Hyvä vs Breeze vs Luma for the options.
Fixing CLS on Magento
Most CLS on Magento comes from things that appear late: images without dimensions, sliders that initialize, banners and private content loaded into a cached page. The fix is the same each time: reserve the space in CSS before the content arrives, or overlay content instead of inserting it into the flow.
A four-week working plan
- Week 1: Pull field data by template; pick the worst metric on the highest-traffic template.
- Week 2: Reproduce in the lab, apply fixes from the table, deploy to staging and compare Lighthouse traces.
- Week 3: Release to production; start "Validate fix" in Search Console for the affected group.
- Week 4 onward: Watch field data over the 28-day window before moving to the next metric.
Many fixes here overlap with general performance work; our list of 25 Magento speed fixes ranked by impact covers the server side in more depth.
Frequently asked questions
Why does PageSpeed Insights show good lab scores but failing field data?
Lab tests use one simulated device on one load. Field data reflects real phones, networks, cache misses and interactions, and INP can only really be measured in the field.
Do Core Web Vitals affect rankings?
Google uses them as part of its page experience signals, but relevance still dominates. Treat good scores as a user-experience and conversion goal first.
How long until Search Console shows improvement?
Field data covers a rolling 28-day period, so expect a few weeks before changes show fully.
Need help with a stubborn metric?
Mistri's Magento performance optimization service starts with field data by template and works through the causes above until the numbers move.
Sources
Web Vitals (web.dev); Optimize Largest Contentful Paint (web.dev); Optimize Interaction to Next Paint (web.dev); Optimize Cumulative Layout Shift (web.dev); Optimize resource files (Adobe Experience League).
