Core Web Vitals are Google’s user experience metrics, and they matter twice for Magento stores: once as a ranking signal, and again because the same metrics correlate strongly with conversion. Magento’s default frontend is notoriously heavy, so there is usually plenty of low-hanging fruit. Here is the programme we run on client stores, ordered by impact.
LCP: Largest Contentful Paint
On most Magento stores the LCP element is the hero image or the first product image. Fixes, in order:
- Preload the LCP image with
<link rel="preload" as="image">so the browser fetches it before render-blocking resources finish - Serve WebP or AVIF with proper
srcsetsizing - a 200KB hero instead of a 1.5MB JPEG - Get the server out of the way: full page cache hit ratio above 95 percent, Redis for cache and sessions, PHP OPcache enabled and measured
- Remove render-blocking third-party scripts from above the fold
INP: Interaction to Next Paint
INP replaced FID and measures how quickly the page responds when a customer taps, clicks or types. Magento’s legacy JavaScript stack is the main enemy:
- KnockoutJS and jQuery UI widgets run expensive main-thread work on interaction. Audit which widgets actually load on key templates; most stores load dozens they never use.
- Break up long tasks: bundle JavaScript by route so product pages do not parse checkout code.
- Defer everything non-critical. If a tag manager injects fifteen marketing pixels, move them behind consent and lazy-loading.
<script src="/static/frontend/.../requirejs-config.js" defer></script>
If INP remains stubbornly poor, this is the strongest argument for a Hyva theme migration - Alpine.js simply does less work per interaction than the Luma stack.
CLS: Cumulative Layout Shift
Layout shifts on Magento stores come from predictable sources: images without dimensions, late-loading fonts, and banners injected by JavaScript. The fixes are mechanical:
- Always set
widthandheight(oraspect-ratio) on images - Reserve space for dynamic content such as cookie bars and promo banners
- Use
font-display: swapwith size-adjusted fallback fonts so text does not jump when webfonts arrive
Measure on Real Devices
Lab scores in Lighthouse are a starting point, not the goal. Watch the field data in Search Console’s Core Web Vitals report and segment by page type: category, product, cart and checkout behave very differently. Set a performance budget - we like LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1 on 75th percentile mobile - and treat regressions as release blockers.
Magento will never be a lightweight platform, but a store that passes Core Web Vitals is entirely achievable with a disciplined cache layer, a modern frontend and ruthless third-party script hygiene. The stores that win are the ones that keep measuring after the initial fix.