Core Web Vitals (CWV) are the set of user-centric performance metrics that Google uses to measure real-world experience on the web. In March 2024, Google replaced First Input Delay (FID) with Interaction to Next Paint (INP), making it critical to understand all three metrics: Largest Contentful Paint (LCP), INP, and Cumulative Layout Shift (CLS). This guide covers every aspect of optimizing your site for good CWV scores.
Understanding Core Web Vitals in 2024
The three CWV metrics measure distinct aspects of user experience. LCP tracks loading performance — how quickly the main content appears. INP measures interactivity — how responsive the page feels when users click, tap, or type. CLS quantifies visual stability — how much the layout shifts unexpectedly during load.
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |
| INP | ≤ 200ms | 200ms – 500ms | > 500ms |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
LCP Optimization
LCP is typically triggered by a hero image, large heading, or video poster. The fastest path to a good LCP involves three strategies: optimize the resource, prioritize its loading, and reduce server response time.
<img src="hero.webp" alt="Hero" width="1200" height="600"
fetchpriority="high" />
Use next-gen formats like AVIF and WebP, serve responsive images with srcset and sizes, and avoid lazy-loading the LCP element. Preload critical resources using <link rel="preload"> and inline above-the-fold CSS to eliminate render-blocking requests. Reduce TTFB by using a CDN and enabling Early Hints (HTTP 103).
INP: The New Metric
INP replaces FID because it measures all interactions, not just the first one. A page with a fast first click but sluggish subsequent taps will score poorly. The main culprit is long tasks on the main thread that block the event loop.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.duration > 50) {
console.warn(`Long task: ${entry.duration}ms`);
}
}
});
observer.observe({ type: "longtask", buffered: true });
Break up long tasks using scheduler.yield() when available, or fall back to setTimeout(). Code-split JavaScript bundles, lazy-load non-critical scripts, and leverage framework features like React’s useTransition and Vue’s Suspense to keep the main thread responsive.
CLS Fixes
Layout shifts occur when elements move after the user has already started interacting. The most common causes are images without dimensions, dynamically injected ads, and web fonts.
img, video {
width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height);
}
Always set width and height attributes on images. Reserve space for ads and embeds with explicit container dimensions. Use font-display: optional to eliminate FOIT, and apply size-adjust on fallback fonts to match the metrics of the primary font.
Real User Monitoring
Lab data from Lighthouse is useful, but real user data tells the truth. The web-vitals library makes it easy to capture CWV metrics from actual visitors.
import { onLCP, onINP, onCLS } from "web-vitals";
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
Send these metrics to Google Analytics 4, a custom analytics endpoint, or a dedicated RUM provider. Use attribution mode to identify which specific element causes each issue. Sample at 1-5% of traffic on high-volume sites to keep costs reasonable while maintaining statistical significance.
CrUX Data Analysis
The Chrome User Experience Report provides field data aggregated from millions of Chrome users. Use the CrUX API to programmatically query your origin’s performance.
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=API_KEY" \
-H "Content-Type: application/json" \
-d '{"origin": "https://example.com"}'
Build a CrUX dashboard in Looker Studio to track trends over time. Monitor both origin-level and URL-level data to catch regressions early. Compare your scores against competitors to set realistic performance budgets.
Lighthouse Scoring
Lighthouse 11+ uses a simulation-based approach that models how the page loads on a mid-range mobile device. While Lighthouse is a valuable diagnostic tool, never optimize for Lighthouse alone — always validate against real user data.
| Audit | Common Failure | Fix |
|---|---|---|
| LCP | Render-blocking resources | Defer non-critical CSS/JS |
| TBT (Total Blocking Time) | Long JavaScript tasks | Code splitting, lazy loading |
| CLS | Missing image dimensions | Add width/height to all images |
Set up Lighthouse CI in your GitHub Actions workflow to enforce performance budgets on every pull request. Use the LHCI dashboard to visualize performance trends over time.
Practical 2024 Workflow
An effective optimization workflow is cyclical: measure with CrUX, diagnose with Lighthouse, fix with targeted techniques, verify with RUM, and monitor with automated alerts. Start with the metric that has the worst CrUX score, fix it using the techniques above, then verify the fix improved real-user measurements before moving to the next metric. Real-world case studies show that a disciplined approach can move a site from red to green across all three metrics within 4-8 weeks.