Core Web Vitals are Google's core metrics for measuring user experience, directly impacting search rankings. The 2026 metric system has stabilized, with INP (Interaction to Next Paint) officially replacing FID as the primary interaction response metric.
2026 Core Metrics
| Metric | Abbreviation | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| Largest Contentful Paint | LCP | ≤2.5s | 2.5-4s | >4s |
| Interaction to Next Paint | INP | ≤200ms | 200-500ms | >500ms |
| Cumulative Layout Shift | CLS | ≤0.1 | 0.1-0.25 | >0.25 |
LCP Optimization
LCP measures main content loading time:
<!-- Before optimization -->
<img src="hero.jpg" />
<!-- After optimization -->
<img src="hero.jpg"
fetchpriority="high"
width="1200"
height="600"
alt="Hero image" />
LCP optimization strategies:
Strategy 1: Critical resource preloading
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preload" href="/hero.jpg" as="image" />
<link rel="preload" href="/font.woff2" as="font" crossorigin />
</head>
Strategy 2: Image optimization
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Hero" />
</picture>
INP Optimization
INP measures interaction response time, including three phases:
// 1. Input Delay
// Time from user input to event handler execution
button.addEventListener('click', () => {
// Slow execution here increases input delay
});
// 2. Processing Time
// Event handler execution time
function handleClick() {
const result = heavyComputation();
}
// 3. Presentation Delay
// Time from handler completion to next frame render
// Affected by layout, painting, compositing
INP optimization strategies:
Strategy 1: Reduce main thread blocking
// Bad practice: synchronous long task
function processLargeDataset(data) {
for (let i = 0; i < data.length; i++) {
heavyOperation(data[i]); // Blocks main thread
}
}
// Good practice: chunked processing
async function processLargeDataset(data) {
const chunkSize = 100;
for (let i = 0; i < data.length; i += chunkSize) {
const chunk = data.slice(i, i + chunkSize);
chunk.forEach(item => heavyOperation(item));
// Yield main thread
await new Promise(resolve => setTimeout(resolve, 0));
}
}
Strategy 2: Use Web Workers
// Main thread
const worker = new Worker('/worker.js');
worker.postMessage(largeDataset);
worker.onmessage = (e) => {
updateUI(e.data);
};
// Worker thread
self.onmessage = (e) => {
const result = processData(e.data);
self.postMessage(result);
};
CLS Optimization
CLS measures layout shift, goal is to maintain stability:
/* Reserve space for images and ads */
img, video {
max-width: 100%;
height: auto;
aspect-ratio: 16/9; /* Reserve space */
}
/* Font loading doesn't affect layout */
@font-face {
font-family: 'CustomFont';
src: url('/font.woff2') format('woff2');
font-display: swap; /* Use fallback font, replace after loading */
}
Measurement Tools
Chrome DevTools Performance Panel
- Open Performance panel
- Click Record
- Perform interactions
- Stop recording
- View Interactions section
Web Vitals Library
import { onLCP, onINP, onCLS } from 'web-vitals';
function sendToAnalytics({ name, delta, id }) {
console.log(`${name}: ${delta} (${id})`);
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
Summary
Core Web Vitals 2026's core is LCP, INP, and CLS. LCP optimizes critical resource loading, INP optimizes interaction response, CLS maintains layout stability. Optimization is not a one-time job—it requires continuous monitoring and improvement. Good performance is the foundation of user experience.