Core Web Vitals: Measure and Improve for Better Web Performance

You've built a fast website, but users still complain about slowness. Or maybe your SEO rankings dropped after a Google update. The culprit might be Core Web Vitals—a set of metrics that Google uses to measure real-world user experience. Ignoring them can hurt both user satisfaction and search visibility.

In this guide, you'll learn what Core Web Vitals are, how to measure them accurately, and practical steps to improve each metric. We'll focus on the three current metrics: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

What Are Core Web Vitals?

Core Web Vitals are a subset of Web Vitals that Google considers essential for delivering a great user experience. They quantify how quickly content loads, how responsive the page is to interactions, and how visually stable it is.

Google uses these metrics as a ranking signal, but more importantly, they reflect real user pain points. A slow LCP frustrates users waiting for content; a high INP makes the page feel laggy; a high CLS causes misclicks and annoyance.

The Three Core Web Vitals

• Largest Contentful Paint (LCP): Measures loading performance. It marks the time when the largest content element (image, video, or text block) becomes visible. Good LCP is 2.5 seconds or less.
• Interaction to Next Paint (INP): Measures responsiveness. It records the latency of all interactions (clicks, taps, key presses) and reports a single value. Good INP is 200 milliseconds or less.
• Cumulative Layout Shift (CLS): Measures visual stability. It quantifies unexpected layout shifts during loading. Good CLS is 0.1 or less.

These thresholds are based on field data from real users, not lab tests. Google evaluates them at the 75th percentile of page loads, meaning 75% of user experiences should meet the "good" threshold.

How to Measure Core Web Vitals

You need both lab and field data. Lab tools simulate a single page load under controlled conditions, while field data (Real User Monitoring, RUM) captures actual user experiences across devices and networks.

Lab Tools

• Lighthouse: Built into Chrome DevTools, it audits performance and provides scores for LCP, CLS, and total blocking time (TBT), which correlates with INP. Run it in incognito mode to avoid extensions skewing results.
• PageSpeed Insights: Combines lab (Lighthouse) and field (CrUX) data. Use it to see both your lab scores and real-user metrics.
• WebPageTest: Offers advanced testing from multiple locations and devices. It provides filmstrips and waterfall charts to diagnose loading issues.

Field Tools

• Chrome User Experience Report (CrUX): A public dataset of real-user metrics from Chrome. Available via PageSpeed Insights, CrUX Dashboard, or BigQuery.
• Google Search Console: Shows Core Web Vitals status for your site based on CrUX data. It groups URLs by performance.
• web-vitals JavaScript library: A small library to measure metrics in your own RUM. You can send data to your analytics platform.

Here's how to use the web-vitals library to log metrics to the console:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use navigator.sendBeacon() or fetch() to send data
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

For a quick check without coding, you can use online tools that parse performance data. For example, if you have server logs, the Nginx Log Analyzer can help you identify slow responses that might affect LCP.

Improving Largest Contentful Paint (LCP)

LCP is often the most impactful metric to optimize. It's affected by server response time, resource load time, and client-side rendering.

Optimize Server Response

• Use a CDN to serve content from locations closer to users.
• Enable caching (browser and server-side) for static assets.
• Optimize database queries and server-side code to reduce TTFB (Time to First Byte).
• Upgrade to HTTP/2 or HTTP/3 for multiplexing and faster connections.

Optimize Resources

• Preload critical resources: Use <link rel="preload"> for the LCP image or font.
• Compress and properly size images: Use modern formats like WebP or AVIF, and serve responsive images with srcset.
• Minify CSS and JavaScript: Remove unnecessary characters and comments.
• Defer non-critical JavaScript: Use async or defer attributes.
• Inline critical CSS: Put above-the-fold styles directly in the HTML to avoid render-blocking requests.

Eliminate Render-Blocking Resources

CSS and JavaScript in the <head> block rendering. Inline critical CSS and load the rest asynchronously. For JavaScript, use defer or async.

Improving Interaction to Next Paint (INP)

INP measures the time from a user interaction to the next paint. It's influenced by JavaScript execution, event handling, and rendering work.

Reduce JavaScript Execution Time

• Break up long tasks (over 50ms) using setTimeout or requestIdleCallback.
• Use web workers for heavy computations.
• Debounce or throttle event handlers for scroll, resize, and input events.
• Avoid large synchronous scripts; code-split and lazy-load modules.

Optimize Event Handling

• Use passive event listeners for touch and wheel events to improve scrolling performance.
• Minimize DOM manipulation; batch updates and use requestAnimationFrame.
• Reduce the scope of style recalculations by avoiding complex selectors.

Improve Rendering Performance

• Use CSS will-change or transform for animations to trigger GPU acceleration.
• Avoid layout thrashing by reading and writing styles in separate phases.

Improving Cumulative Layout Shift (CLS)

CLS measures unexpected layout shifts. It's caused by elements changing position during loading, often due to images without dimensions, ads, or dynamically injected content.

Always Include Size Attributes

For images and videos, set width and height attributes or use CSS aspect-ratio. This reserves space and prevents shifts.

<img src="#" width="800" height="600" alt="Hero">

Reserve Space for Dynamic Content

• Use CSS min-height for containers that load content asynchronously (e.g., ads, embeds).
• Avoid inserting content above existing content unless triggered by user interaction.

Use Font-Display Swap

Custom fonts can cause invisible text (FOIT) or layout shifts when they load. Use font-display: swap to show fallback text immediately, and preload fonts to reduce swap time.

Putting It All Together: A Practical Workflow

1. Measure: Start with PageSpeed Insights to get both lab and field data. Identify which metric needs improvement.
2. Diagnose: Use Lighthouse and Chrome DevTools Performance panel to find bottlenecks. Look at the waterfall, main thread activity, and layout shifts.
3. Optimize: Apply the techniques above, prioritizing changes that affect the worst metric.
4. Test: Re-run lab tests to confirm improvements. Deploy to a staging environment and use RUM to monitor field data.
5. Monitor: Set up ongoing RUM with the web-vitals library and alert on regressions. Use Search Console to track Core Web Vitals status.

Remember that optimizations can have trade-offs. For example, lazy-loading images can improve initial load but may hurt LCP if the LCP image is lazy-loaded. Always test with real users.

FAQ

What are the current thresholds for Core Web Vitals?

For LCP, good is ≤2.5s, needs improvement is ≤4.0s, and poor is >4.0s. For INP, good is ≤200ms, needs improvement is ≤500ms, and poor is >500ms. For CLS, good is ≤0.1, needs improvement is ≤0.25, and poor is >0.25. These thresholds are evaluated at the 75th percentile of page loads.

How often should I check Core Web Vitals?

Monitor field data continuously with RUM. Check Search Console monthly for overall trends. Run lab tests after major code changes or deployments. Core Web Vitals can change with updates to your site or third-party scripts.

Can I improve Core Web Vitals without a developer?

Some improvements are possible via plugins or settings (e.g., enabling caching, optimizing images). However, significant gains often require code changes like inlining critical CSS, deferring JavaScript, or restructuring how resources load. A developer's help is usually needed for INP and advanced LCP optimizations.

Ready to analyze your server performance? Try our Nginx Log Analyzer to identify slow requests that could be impacting your Core Web Vitals.