How to Optimize Core Web Vitals (2026 Guide)
Improve LCP, INP, and CLS scores for better Google rankings. Practical fixes for the three metrics that matter most for page experience.
- Improve LCP, INP, and CLS scores for better Google rankings.
- What Are Core Web Vitals.
- Fixing Largest Contentful Paint (LCP).
- Fixing Interaction to Next Paint (INP).
- Fixing Cumulative Layout Shift (CLS).
What Are Core Web Vitals
Core Web Vitals are three metrics Google uses to measure real-world user experience on your pages. Since 2021, they’ve been a direct ranking signal — pages with poor vitals may rank lower than faster competitors for the same query. The three metrics are Largest Contentful Paint (LCP), which measures loading performance; Interaction to Next Paint (INP), which replaced First Input Delay and measures responsiveness; and Cumulative Layout Shift (CLS), which measures visual stability. Good thresholds are LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1.
Fixing Largest Contentful Paint (LCP)
LCP measures how long it takes for the largest visible element — usually a hero image, video, or heading block — to render. The most impactful fixes are optimizing your LCP element directly: serve images in WebP or AVIF format, set explicit width and height attributes, use fetchpriority="high" on the hero image, and preload it with a link rel="preload" tag. Remove render-blocking CSS and JavaScript from the critical path. Use a CDN to reduce server response time (TTFB). If your LCP element is a web font, preload the font file and use font-display: swap to prevent invisible text during loading.
Fixing Interaction to Next Paint (INP)
INP measures the delay between a user interaction (click, tap, keypress) and the browser painting the next frame. Poor INP usually means JavaScript is blocking the main thread. The fix: break up long tasks (anything over 50ms) using requestAnimationFrame, setTimeout(0), or the scheduler.yield() API. Move heavy computation to Web Workers. Reduce the amount of JavaScript you ship — every kilobyte of JS must be parsed, compiled, and executed. Lazy-load third-party scripts like analytics, chat widgets, and social embeds. Audit event handlers for expensive operations like layout thrashing.
Fixing Cumulative Layout Shift (CLS)
CLS measures unexpected layout shifts — when elements move around after the page has started rendering. The biggest causes are images without dimensions (the browser reserves zero space until the image loads), dynamically injected content (ads, banners, cookie notices), and web fonts that swap and change text size. Fix CLS by always specifying width and height on images and videos, reserving space for ad slots with CSS min-height, using font-display: optional instead of swap if font metrics differ significantly, and avoiding inserting content above existing content after page load.