Core Web Vitals deep dive

Core Web Vitals are Google's user-experience metrics that became ranking signals in 2021. This is the deep dive: what each metric technically measures, what affects it, and exactly how to fix each one.

LCP. Largest Contentful Paint

What it measures

Time from navigation start until the largest visible element in the viewport finishes rendering. The "largest element" is typically a hero image, a large heading, or a video poster frame.

Thresholds

• Good: <2.5 seconds
• Needs improvement: 2.5-4s
• Poor: >4s

What affects LCP

• Server response time (TTFB)
• Render-blocking CSS/JS
• Hero image size + format + loading priority
• Web font blocking
• Client-side rendering delays

How to fix

• Reduce server response time, caching, CDN, faster backend
• <link rel="preload" as="image" href="hero.webp"> for the hero
• Hero image NOT lazy-loaded (counter-intuitively, lazy loading the LCP element hurts LCP)
• Inline critical CSS, defer the rest
• Use font-display: swap to avoid font-render blocking
• For dynamic sites: SSR/SSG instead of CSR

INP. Interaction to Next Paint

Replaced FID in March 2024. Measures responsiveness across all interactions a user has with a page.

What it measures

The 75th percentile (or worst) interaction delay, the time from user input (click, tap, keypress) until the browser paints a visual response.

Thresholds

• Good: <200ms
• Needs improvement: 200-500ms
• Poor: >500ms

What affects INP

• Heavy JavaScript execution on main thread
• Long tasks (any JS task >50ms)
• Third-party scripts
• Large DOM updates
• Unoptimized React/Vue renders

How to fix

• Break long JS tasks into chunks (use scheduler.yield() or setTimeout)
• Move heavy work to Web Workers
• Lazy-load non-critical JS
• Debounce/throttle expensive event handlers (scroll, resize, input)
• Audit third-party scripts; remove the worst offenders
• Use content-visibility: auto to skip off-screen rendering
• Profile with DevTools → Performance → Interactions

CLS. Cumulative Layout Shift

What it measures

The sum of all unexpected layout shifts during a page's lifetime. Penalizes pages where content jumps as it loads, causing misclicks and frustration.

Thresholds

• Good: <0.1
• Needs improvement: 0.1-0.25
• Poor: >0.25

What affects CLS

• Images without explicit dimensions
• Ads and embeds with no reserved space
• Web fonts causing FOIT/FOUT (flash of invisible/unstyled text)
• Content injected above existing content (late-loading banners)
• Dynamically resized elements

How to fix

• Set width and height on all images, videos, iframes
• Reserve space for ads with fixed-size containers
• Use font-display: optional or preload the font to avoid late-swap shifts
• Never inject content above the fold after initial render (push content down via planned skeleton)
• Use CSS aspect-ratio for responsive images that must scale
• Avoid transforms that change layout; prefer ones that use GPU (transform: translate)

Field vs lab data

• Field data, real-user metrics from Chrome users (CrUX). What Google ranks on.
• Lab data, synthetic tests (Lighthouse, WebPageTest). Useful for iteration, but doesn't always match field data.

Google uses field data for ranking. Optimize for what Chrome users actually experience, not what your local Lighthouse run reports.

Measurement tools

• PageSpeed Insights, field + lab
• Search Console → Core Web Vitals, field data on your site
• CrUX Dashboard, field data historical
• Web Vitals Chrome extension, real-time metrics while browsing
• RUM (Real User Monitoring) services. SpeedCurve, Datadog, etc. for detailed field data