What Are Core Web Vitals and Why Do They Matter?
Core Web Vitals (CWV) are three metrics Google uses to evaluate the user experience of a website. Since the Page Experience Update in 2021, they directly influence Google rankings. Websites with poor CWV scores lose visibility – regardless of content quality.
| Metric | What It Measures | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Load time of the largest visible element | < 2.5s | 2.5s – 4s | > 4s |
| CLS (Cumulative Layout Shift) | Unexpected layout shifts | < 0.1 | 0.1 – 0.25 | > 0.25 |
| INP (Interaction to Next Paint) | Response time to user interactions | < 200ms | 200ms – 500ms | > 500ms |
INP replaced FID (First Input Delay) in March 2024. INP measures all interactions during a session, not just the first one – making it significantly stricter.
Improving LCP: The 4 Most Important Measures
1. Serve Hero Images as AVIF/WebP
The LCP element is usually the hero image or H1 heading. For images: convert PNG/JPG to AVIF (60–80% smaller) and WebP (30–50% smaller). Use `<picture>` elements for progressive delivery.
In Next.js: Use the `<Image>` component with `priority` for the LCP element. It automatically optimizes format, size, and lazy loading.
2. Preload Critical Resources
Add `<link rel="preload">` for the LCP image and critical fonts in the `<head>`. The browser loads these resources immediately without waiting for HTML parsing.
3. Reduce Server Response Time (TTFB)
A slow server delays everything. Target: TTFB below 800ms. Measures: use a CDN (Cloudflare, Vercel Edge), enable server caching, optimize database queries.
4. Eliminate Render-Blocking Resources
CSS and JavaScript in the `<head>` block rendering. Solution: inline critical CSS, load non-critical CSS with `media="print"`, execute JavaScript with `defer` or `async`.
Improving CLS: Stop Layout Shifts
- ▸Always specify width and height for images and videos – prevents placeholder jumps
- ▸Reserve space for ads and embeds with a fixed height (aspect-ratio CSS)
- ▸Stabilize web fonts with font-display: swap and preload
- ▸Place dynamically injected content (banners, cookie notices) at the bottom of the screen
- ▸Animate only with transform and opacity – never with top/left/width/height
Improving INP: Optimize Interactivity
INP measures how quickly the page responds to clicks, taps, and keyboard input. Common causes of poor INP scores:
- ▸Too much JavaScript on the main thread (Long Tasks > 50ms)
- ▸Heavy event handlers without debouncing
- ▸Third-party scripts (chat widgets, analytics) blocking the main thread
- ▸React/Next.js: unnecessary re-renders due to missing memoization
Use the Chrome DevTools Performance tab to identify Long Tasks. Anything over 50ms on the main thread is an INP risk.
Measuring Core Web Vitals: The Right Tools
| Tool | Type | Strength |
|---|---|---|
| PageSpeed Insights | Lab + Field Data | Quickest overview, Google data |
| Chrome DevTools (Lighthouse) | Lab Data | Detailed local diagnosis |
| Google Search Console | Field Data (real) | Real user data from Chrome |
| WebPageTest | Lab Data | Deepest analysis, waterfall diagram |
| Vercel Analytics | Field Data | Ideal for Next.js projects |
Lab Data (PageSpeed Insights, Lighthouse) and Field Data (Search Console) can differ significantly. Field Data reflects real user experiences – that is what Google uses for ranking.
Our Conclusion
Core Web Vitals are not a one-time project but require ongoing maintenance. The biggest levers: image optimization (AVIF/WebP), preloading critical resources, and reducing JavaScript. With Next.js and Vercel, most projects achieve green CWV scores with minimal effort – the platform handles much of the optimization automatically.