Core Web Vitals Optimization on Adobe Commerce Checklist

Core Web Vitals determine whether your Adobe Commerce or Magento store shows up on page one in Google or gets buried. This checklist guides you through diagnosing and optimizing the three metrics that Google uses to rank commerce sites: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

The Core Web Vitals Imperative for Commerce

Google has made it clear: Core Web Vitals are ranking signals. Stores that score poorly on LCP, INP, and CLS see lower search visibility, higher cart abandonment, and lower conversion rates. The average eCommerce store loses 2-5% of revenue for every 1 second increase in page load time. We've worked with dozens of Adobe Commerce merchants, and the ones that systematized Core Web Vitals optimization consistently outperform competitors in both search rankings and conversion metrics.

The challenge is that Adobe Commerce and Magento, by default, don't score well on Core Web Vitals. The platform ships with a rich admin experience, but that richness often comes at the cost of frontend performance. Images aren't optimized, JavaScript bundles are fat, third-party scripts load before critical content, and layout shifts are common.

The good news: Core Web Vitals are entirely fixable if you have a systematic approach. This checklist breaks down the work across the three metrics so your team can prioritize and execute methodically.

LCP (Largest Contentful Paint) Optimization Checklist

LCP measures the time from when the page starts loading to when the largest visible element finishes rendering. For most commerce sites, this is a hero image or product image. The Google threshold is 2.5 seconds for "good" performance.

Image Optimization & Delivery

• Hero and product images converted to WebP format with JPEG fallbacks
• All images served from a CDN (Cloudflare, Akamai, CloudFront) with regional edge caching
• Image dimensions set in HTML to prevent layout shifts during load
• Lazy loading applied to below-fold images (intersection observer or native lazy loading)
• Responsive images implemented with srcset for mobile, tablet, desktop
• Image file sizes reduced (typically 50-70% compression without quality loss)
• Critical images preloaded with link rel="preload" in head
• Video backgrounds replaced with static images or replaced with image backgrounds
• ImageOptim or similar tool run on all product images in feed
• CDN cache headers configured for 30+ day TTLs for product images

Critical CSS & Resources

• Critical CSS (above-fold styling) inlined in head, deferred CSS loaded asynchronously
• CSS files minified and combined to reduce HTTP requests
• Unused CSS removed (especially Magento's bootstrap and utility classes)
• Media queries used to load mobile CSS only on mobile devices
• Fonts subset to include only required characters (Latin, Latin Extended, etc.)
• Font-display: swap used to prevent layout shift during font load
• Third-party stylesheets (Google Fonts, icon libraries) moved to preconnect or self-hosted
• CSS critical path analyzed with tools like CriticalCSS or Penthouse

Server Response Time

• Full Page Cache (FPC) enabled in Magento with appropriate cache rules
• Cache key strategy reviewed (reduce cardinality to maximize hit rates)
• Database queries optimized, N+1 queries eliminated
• Slow queries identified and indexed appropriately
• Layout XML reviewed to eliminate unnecessary blocks above the fold
• GraphQL endpoints created for product data (reduces REST payload)
• PHP opcache enabled and configured with sufficient memory
• Caching headers configured (Cache-Control: public, max-age) for static assets
• CDN origin shield configured to reduce origin load
• Server response time target: <600ms for origin, <200ms for CDN edge

JavaScript & Third-Party Impact on LCP

• Third-party scripts (ads, analytics, chat) loaded asynchronously or deferred
• Google Analytics and Hotjar moved to async loading
• Pixel tracking scripts deferred until after LCP
• Font loading optimization to prevent FOIT (Flash of Invisible Text)
• Preload critical JavaScript bundles only
• Webpack or similar bundler configured to code-split non-critical chunks

FID/INP (Interaction to Next Paint) Optimization Checklist

FID (Field Interaction Delay) measures the delay before the browser processes user input. INP (Interaction to Next Paint) is the newer metric that measures the entire time from input to visual feedback. The threshold is 200ms for good performance. Long JavaScript execution or main thread blocking causes poor FID/INP.

JavaScript Bundle Optimization

• Total JavaScript bundle size measured (aim for <100KB after gzip for initial page)
• Unnecessary libraries removed (jQuery plugins, outdated polyfills, debug code)
• Polyfills and transpilation target set to modern browsers (avoid IE 11 unless required)
• Webpack or Rollup configured with code splitting for route-based chunks
• Dynamic imports used for non-critical features (product filters, modals, carousels)
• Tree-shaking enabled to remove dead code
• Minification and gzip compression verified in production builds
• Source maps excluded from production to reduce payload

Third-Party Script Management

• All third-party scripts inventoried (ads, analytics, chat, reviews, personalization)
• Scripts with largest impact on main thread identified using Web Vitals Chrome extension
• Ads moved to web worker or iframe sandbox where possible
• Analytics moved to async loading with event batching
• Chat and personalization scripts loaded only after user interaction
• Beacon API used for analytics instead of synchronous requests
• Service Worker implemented to cache critical scripts
• Third-party script budget enforced (max 2-3 critical scripts)

React / Vue Component Performance (If Applicable)

• React components profiled with DevTools to identify slow renders
• Unnecessary re-renders eliminated with useMemo and useCallback
• Large lists virtualized (react-window or similar)
• Event handlers debounced or throttled (especially scroll, resize, input)
• Form inputs validated with debouncing to prevent excessive re-renders
• Modal and overlay rendering delayed until after initial page load
• PWA service worker configured to precache critical components

Main Thread Work Distribution

• Long-running tasks broken into smaller chunks (requestIdleCallback, setTimeout)
• Web Workers used for CPU-intensive tasks (image processing, data transforms)
• Heavy computations moved off the main thread
• Layout thrashing avoided (don't read then write to DOM in a loop)
• Event listener cleanup verified (no memory leaks from old event listeners)
• Animations optimized to use CSS transforms instead of JavaScript
• Debouncing applied to high-frequency events (scroll, mousemove, input)

CLS (Cumulative Layout Shift) Optimization Checklist

CLS measures unexpected layout shifts during page load and interaction. A CLS below 0.1 is considered good. Layout shifts frustrate users and hurt conversions (users click the wrong product, add wrong items to cart).

Image & Media Dimension Declaration

• All images include width and height attributes in HTML
• Aspect ratio CSS applied (aspect-ratio property or padding-bottom trick)
• Video embeds (YouTube, Vimeo) wrapped in containers with set aspect ratio
• Product carousels maintain consistent card heights
• Product grids sized to prevent reflow when images load
• Ad containers set with fixed height to prevent expansion
• Icon sizing consistent across the site (no 16px vs 24px variance)

Font Loading Strategy

• Font-display: swap used (shows fallback font immediately)
• Custom fonts preloaded in head with link rel="preload"
• Font loading events monitored to prevent layout shift on font change
• Fallback font metrics adjusted to match custom font (font-size-adjust CSS property)
• Google Fonts subset and self-hosted to avoid external dependency
• Font weight and style variants preloaded only if used above fold
• @font-face block loaded before page renders to prevent FOUT

Dynamic Content & Form Elements

• Modals and popovers don't shift body layout (use position: fixed or inert)
• Toast notifications positioned fixed to viewport, not document flow
• Sticky headers have fixed height to prevent content shift
• Toolbars (wishlist, currency switcher) have consistent height
• Form validation messages reserved space to prevent shift
• Success/error messages use fixed space, not dynamic height
• Star ratings and reviews reserved space before load
• Product variant selectors (size, color) don't cause layout shift

Rendering & Serialization

• Skeleton screens or placeholders shown while content loads
• Critical above-fold content rendered server-side or with SSR
• Deferred rendering prevented for above-fold elements
• CSS containment applied to independent sections (product cards, sidebar)
• Flexbox and grid layouts tested on various screen sizes to prevent shift
• Margin collapsing behavior accounted for
• CSS reset consistent to prevent browser default variance

Core Web Vitals Diagnostic Scoring Table

Use this table to score your site's readiness across LCP, INP, and CLS. A total score of 20+ indicates strong Core Web Vitals performance.

Tools to Diagnose and Monitor Core Web Vitals

You need visibility into your actual performance. Synthetic testing (like PageSpeed Insights) gives you a snapshot. Real User Monitoring (RUM) gives you the actual experience on your store.

Google PageSpeed Insights is the starting point. It gives you LCP, INP, and CLS scores along with specific recommendations. It's free and integrates with Google Search Console so you can track performance over time.

Chrome User Experience Report (via Search Console) shows you how real users experience your site broken down by device type. If your mobile Core Web Vitals are poor but desktop is good, that points to JavaScript or image optimization issues on mobile.

Web Vitals Chrome Extension shows you live Core Web Vitals metrics as you browse your own site. It's invaluable for spotting layout shifts, long input delays, and slow paints.

Datadog or New Relic for RUM gives you aggregate Core Web Vitals across your entire audience, segmented by device, browser, region, and user flow. This is where you find performance regressions and identify your worst-performing pages.

Lighthouse CI integrated into your deployment pipeline (GitHub Actions, Jenkins) ensures that performance regressions are caught before they reach production. You set performance budgets (max JavaScript bundle size, max LCP, etc.) and fail the build if budgets are exceeded.

We typically set performance budgets like: LCP <2.0s, INP <150ms, CLS <0.05, JavaScript bundle <80KB gzip, total page size <500KB. Agencies like Bemeir that specialize in commerce development build these checks into every deploy—performance is never left to chance.

Common Core Web Vitals Killers on Adobe Commerce

Unoptimized product images. Magento stores often have high-resolution images (3000×3000) served full-size to browsers. Product images should be optimized for mobile (typically <500KB) and desktop (typically <800KB), served in WebP format. We see 2-3 second improvements in LCP just from image optimization.

Synchronous third-party scripts. Google Ads, Facebook Pixel, Hotjar, and Yext all default to synchronous loading. They block page rendering. Move them to async or defer loading until after the page is interactive. We typically see 800ms improvements in FID/INP.

Over-customization with inline JavaScript. Magento themes often include inline scripts for mobile menu, product sliders, variant handling, and mini-cart interactions. These should be deferred until after LCP. Every inline script you can move to async or defer improves Core Web Vitals.

Excessive layout blocks and widgets. The more blocks you enable above the fold, the more work the browser has to do to calculate layout. Audit your homepage and product pages for unnecessary blocks (recommendations, related products, ads) that could be moved below the fold.

Missing image dimensions. Images without explicit dimensions force the browser to calculate space as they load, causing layout shifts. Make sure every image, including icons and avatars, has width and height attributes.