Core Web Vitals: A Developer's Guide to LCP, CLS, and INP

Core Web Vitals are Google's user-centric performance metrics that directly impact search rankings. Since 2021, they've been a confirmed ranking signal — and with the 2024 switch from FID to INP, the bar for interactivity has gotten higher. Here's what developers need to know.

LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element (usually a hero image or heading) to render. Target: under 2.5 seconds. The most common causes of poor LCP are unoptimized images, render-blocking JavaScript, and slow server response times.

Optimizing LCP

• Use next-gen image formats (WebP, AVIF) with proper sizing
• Preload the LCP element with <link rel="preload">
• Minimize render-blocking CSS and defer non-critical JS
• Use a CDN and optimize server response times (TTFB < 800ms)
• Set explicit width/height on images to prevent layout shifts

CLS — Cumulative Layout Shift

CLS measures visual stability — how much the page layout shifts unexpectedly during loading. Target: under 0.1. Layout shifts frustrate users and can cause accidental clicks.

Preventing CLS

• Always set explicit dimensions on images and videos
• Reserve space for ads, embeds, and dynamic content
• Avoid inserting content above existing content after load
• Use CSS contain-intrinsic-size for lazy-loaded elements
• Prefer CSS transforms over layout-triggering properties for animations

INP — Interaction to Next Paint

INP replaced FID in March 2024. It measures the latency of all user interactions throughout the page lifecycle, not just the first one. Target: under 200ms. This is the hardest metric to optimize because it reflects the total responsiveness of your page.

Improving INP

• Break long tasks (>50ms) into smaller chunks using yield() or scheduler.yield()
• Debounce expensive event handlers (scroll, resize, input)
• Move heavy computation to Web Workers
• Minimize DOM size — large DOMs slow down every interaction
• Use content-visibility: auto to skip rendering offscreen content

Tracking Core Web Vitals over time

Webtinel integrates both Google PageSpeed Insights and Lighthouse to measure all Core Web Vitals for every page in your site. Run performance scans on mobile and desktop, compare results across snapshots, and track trends over time — all from a single dashboard.