Core Web Vitals
Core Web Vitals are a set of specific metrics that Google considers important for user experience. They are part of Google's page experience signals used for ranking.
LCP - Largest Contentful Paint
Measures loading performance - how long until the largest content element is visible.
<2.5s
Good
2.5-4s
Needs Improvement
>4s
Poor
// Improve LCP
// 1. Optimize images
import Image from 'next/image';
<Image
src="/hero.jpg"
priority // Preload above-fold images
sizes="100vw"
/>
// 2. Preload critical resources
<link rel="preload" href="/fonts/main.woff2" as="font" />
// 3. Use CDN for static assets
// 4. Minimize render-blocking resources
// 5. Server-side render critical contentINP - Interaction to Next Paint
Measures responsiveness - how quickly the page responds to user interactions (replaced FID in 2024).
<200ms
Good
200-500ms
Needs Improvement
>500ms
Poor
// Improve INP
// 1. Break up long tasks
// Bad - blocks main thread
function processData(items) {
items.forEach(item => heavyComputation(item));
}
// Good - yield to main thread
async function processData(items) {
for (const item of items) {
heavyComputation(item);
await scheduler.yield(); // Let browser handle events
}
}
// 2. Use web workers for heavy computation
const worker = new Worker('worker.js');
worker.postMessage(data);
// 3. Debounce/throttle event handlers
// 4. Use CSS for animations instead of JS
// 5. Minimize JavaScript execution timeCLS - Cumulative Layout Shift
Measures visual stability - how much the page content shifts during loading.
<0.1
Good
0.1-0.25
Needs Improvement
>0.25
Poor
// Prevent CLS
// 1. Always set dimensions on images/videos
<Image
src="/photo.jpg"
width={800}
height={600}
alt="Description"
/>
// 2. Reserve space for dynamic content
.ad-container {
min-height: 250px; /* Reserve space for ad */
}
// 3. Use CSS aspect-ratio
.video-container {
aspect-ratio: 16 / 9;
}
// 4. Avoid inserting content above existing content
// 5. Use transform for animations instead of layout properties
// 6. Preload fonts to avoid FOUT/FOITMeasuring Core Web Vitals
- PageSpeed Insights: Lab and field data
- Chrome DevTools: Performance panel
- Search Console: Core Web Vitals report
- web-vitals library: Measure in JavaScript
- Lighthouse: Automated audits
// Measure with web-vitals library
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
// Send to analytics
function sendToAnalytics(metric) {
gtag('event', metric.name, {
value: Math.round(metric.value),
metric_id: metric.id,
});
}