Passing Core Web Vitals is no longer optional. Google uses LCP, INP, and CLS as ranking signals, and users have been trained by fast experiences to abandon slow ones. Yet many teams struggle to move the needle on field data even after running Lighthouse audits and implementing the suggested fixes. The gap between lab diagnostics and real-user experience is where most optimisation efforts fail. This playbook provides a systematic approach to diagnosing, prioritising, and fixing Core Web Vitals issues, complete with the before-and-after patterns we see repeatedly across client projects.
Establishing Your Baseline with Field Data
Lab tools like Lighthouse test a single page load under controlled conditions. Field data from the Chrome User Experience Report (CrUX) reflects what your actual users experience across different devices, networks, and geographic locations. Start by pulling your CrUX data from PageSpeed Insights or the CrUX API for your highest-traffic page templates: homepage, product listing pages, product detail pages, and checkout. Identify which metric is failing on which page type — the fix for a poor LCP on a product page is entirely different from a poor INP on a checkout page. Segment by device: mobile users on 4G connections in emerging markets often have dramatically different Core Web Vitals than desktop users on fibre broadband, and optimisation priorities should reflect this.
Fixing Largest Contentful Paint
LCP measures when the largest visible element — usually a hero image, product image, or heading block — finishes rendering. The target is under 2.5 seconds. Here are the most impactful fixes we apply repeatedly.
- Before — render-blocking CSS bundle: A single 180KB CSS file blocks rendering until fully downloaded and parsed. After — extract critical CSS for the above-the-fold layout (typically 15-20KB), inline it in the head, and load the full stylesheet asynchronously with a preload link and onload handler. Typical improvement: 800ms-1.2s reduction in LCP.
- Before — late-discovered hero image: The hero image URL is referenced in CSS or loaded via JavaScript, so the browser cannot discover it until after the stylesheet or script is parsed. After — add a preload link tag in the head with the image URL, appropriate srcset, and fetchpriority="high". Typical improvement: 500ms-1s reduction in LCP.
- Before — oversized images: A 2400px-wide hero image served to all devices. After — responsive images using srcset and sizes attributes, serving 800px images on mobile and 1200px on desktop, in WebP or AVIF format. Typical improvement: 40-60% reduction in image payload, 300-700ms LCP improvement on mobile.
- Before — slow server response: TTFB exceeds 1.5 seconds due to uncached database queries or slow API calls. After — implement edge caching, database query optimisation, or static generation. No amount of frontend optimisation can fix a slow backend.
Fixing Interaction to Next Paint
INP replaced First Input Delay in March 2024 and measures the latency of all interactions throughout the page lifecycle, not just the first one. The target is under 200 milliseconds. INP is often the hardest Core Web Vital to fix because it requires understanding what happens on the main thread during every user interaction — clicks, taps, and keyboard input.
- Before — monolithic event handlers: A click handler performs DOM measurement, state calculation, DOM mutation, and analytics tracking in a single synchronous block, creating a 400ms long task. After — break the handler into phases: immediate visual feedback first (e.g., button state change), then defer analytics and non-critical updates using requestAnimationFrame and setTimeout. Typical improvement: 200-300ms reduction in interaction latency.
- Before — heavy hydration blocking interactions: A React application hydrates for 2 seconds after initial load, during which all interactions are queued and delayed. After — implement selective hydration using React.lazy and Suspense, or migrate non-interactive sections to server components. Use the scheduler.yield() API to break hydration into smaller chunks that yield to user input.
- Before — third-party scripts competing for main thread: Analytics, chat widgets, and A/B testing scripts execute long tasks that coincide with user interactions. After — defer all non-essential third-party scripts until after user interaction or load them in a web worker using Partytown. Typical improvement: 150-400ms reduction in worst-case INP.
Fixing Cumulative Layout Shift
CLS measures unexpected visual movement during the page lifecycle. The target is under 0.1. Layout shifts are frustrating for users and can cause misclicks on mobile.
- Reserve space for dynamic content: Use CSS aspect-ratio or explicit min-height on containers that load images, ads, or embeds. A product image grid should define its height before images load to prevent reflow.
- Handle web font loading: Font swaps cause text to reflow when the web font replaces the fallback. Use font-display: optional for body text or size-adjust and ascent-override CSS properties to match fallback font metrics to the web font, eliminating visible reflow.
- Avoid inserting content above the viewport: Cookie consent banners, notification bars, and app install prompts that push page content down are among the most common CLS culprits. Use fixed or sticky positioning for overlays, or reserve space at the top of the layout for banners.
Born Digital has helped dozens of eCommerce businesses pass Core Web Vitals across all page templates. Our performance audits combine field data analysis with targeted code-level fixes, delivering measurable improvements that translate into better rankings, lower bounce rates, and higher conversion.