Core Web Vitals for Adobe Commerce: What Actually Moves the Needle
After auditing dozens of Adobe Commerce stores, these are the specific changes that consistently improve LCP, CLS, and INP — not the generic advice you've already read.
Praveen Chelumalla
Adobe Commerce & AI Consultant
Google's Core Web Vitals have become a real ranking factor, and Adobe Commerce stores — by their nature — struggle with all three metrics. After running Lighthouse audits and CrUX analyses on dozens of stores, I've found that the same handful of issues appear again and again. Here's what actually fixes them.
LCP: Largest Contentful Paint
The LCP element on most Adobe Commerce stores is the hero banner image. The fix is almost always the same: add fetchpriority='high' and loading='eager' to the hero image, serve it in WebP format, and preload it in the page head. This alone moves LCP from 4–6s to under 2.5s on the majority of stores I've worked on.
CLS: Cumulative Layout Shift
The biggest CLS culprits in Adobe Commerce are images without explicit width/height attributes, and the minicart/header that repaints after JavaScript loads. Fix images by always setting dimensions. Fix the header by reserving space for dynamic elements (cart count, customer name) with CSS min-height rather than letting them push content down when they load.
INP: Interaction to Next Paint
INP replaced FID in 2024 and measures responsiveness to all interactions, not just the first. Adobe Commerce's add-to-cart flow is the main offender — it triggers multiple JS observers and often blocks the main thread for 300–600ms. The fix is to audit your RequireJS dependency tree, defer non-critical scripts, and ensure your add-to-cart handler doesn't make synchronous XHR calls.