Since Google made Core Web Vitals a ranking factor, improving LCP, FID/INP, and CLS has become an SEO priority, not just a UX nicety. For a fashion retailer client, we went from a 34 PageSpeed score to 94 in 6 weeks — and saw organic traffic grow 55% over the following quarter. Here's how.
Diagnosing the Baseline
Start with lab data (PageSpeed Insights, Lighthouse) and field data (CrUX dashboard, Google Search Console). Lab data is reproducible and actionable; field data reflects real user experience across device types and connection speeds. For our client, the biggest culprit was a 4.8s LCP caused by an unoptimized hero image loaded from a slow origin.
Fixing LCP: Largest Contentful Paint
- Preload the hero image: <link rel="preload" as="image" href="/hero.webp">
- Serve images from CDN with aggressive caching (Cache-Control: max-age=31536000)
- Convert all images to WebP — 40% smaller with equivalent quality
- Set explicit width and height on all images to eliminate layout shifts
- Use fetchpriority="high" on the above-the-fold hero image
Fixing INP: Interaction to Next Paint
INP measures responsiveness to user interactions. On Magento's Luma theme, the heavy JavaScript bundle causes long tasks that block the main thread. The fix: defer non-critical scripts, break up long tasks with scheduler.postTask(), and remove unused JavaScript. Switching to Hyvä theme eliminates most of this problem by design — Alpine.js loads 2KB vs. Luma's 250KB+ JS bundle.
Fixing CLS: Cumulative Layout Shift
CLS is caused by content jumping around as the page loads. Common Magento culprits: images without explicit dimensions, web fonts causing FOUT (Flash of Unstyled Text), and dynamically injected banners. Fix by adding width/height to all images, using font-display: swap with preloaded font files, and reserving space for dynamic content with min-height placeholders.
The single biggest CLS improvement is usually adding explicit width and height attributes to all img tags. Magento's default theme doesn't do this — a custom plugin or theme fix is required.
Measuring Progress
Run PageSpeed Insights weekly during optimization, but anchor to field data for final measurement — lab scores can be misleading. Track your Core Web Vitals in Google Search Console's 'Core Web Vitals' report. Changes typically take 28 days to show up in field data as Google collects enough CrUX data. Be patient and keep iterating.
