Skip to main content

Core Web Vitals

Interactive Guide to Google's Performance Metrics

Core Web Vitals Overview

Core Web Vitals are a set of specific factors that Google considers important in a webpage's overall user experience. They are made up of three specific page speed and user interaction measurements: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

Loading Performance

Largest Contentful Paint (LCP) measures loading performance. Good LCP scores occur within 2.5 seconds of when the page first starts loading.

Interactivity

Interaction to Next Paint (INP) measures interactivity. Pages should have an INP of 200 milliseconds or less for good user experience.

Visual Stability

Cumulative Layout Shift (CLS) measures visual stability. Pages should maintain a CLS of 0.1 or less to avoid unexpected layout shifts.

These metrics focus on three core aspects of user experience and provide actionable guidance on optimizing for better performance. To ensure you're hitting the recommended targets, measure at the 75th percentile of page loads across mobile and desktop devices.

First Contentful Paint (FCP)

First Contentful Paint (FCP) measures the time from when the user first navigated to the page to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images), SVG elements, or non-white canvas elements.
≤ 1.8s
Good
1.8s - 3.0s
Needs Improvement
> 3.0s
Poor
https://example-website.com
FCP Achieved!
Welcome to Our Website
Image
Navigation Start
DNS Lookup
Server Response
Parse HTML
FCP - First Content
Time: 0.0s

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures the time from when the user first navigated to the page to when the largest content element in the viewport is rendered. This could be a large text block, video, or hero image.
≤ 2.5s
Good
2.5s - 4.0s
Needs Improvement
> 4.0s
Poor
https://example-website.com
LCP Achieved!
News Website
Hero Image (Largest Element)
Small Image
Navigation Start
FCP - Small Content
Loading Hero Image
LCP - Hero Rendered
Additional Content
Time: 0.0s

Optimize Hero Images

Use modern image formats (WebP, AVIF), implement lazy loading for below-the-fold content, and preload critical images.

Reduce Resource Load Times

Minimize server response times, eliminate render-blocking resources, and use a CDN for faster asset delivery.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) measures the longest duration between a user's interaction with the page and the next paint. It assesses the overall responsiveness of a page to user interactions throughout the page lifecycle.
≤ 200ms
Good
200ms - 500ms
Needs Improvement
> 500ms
Poor

Interactive Responsiveness Demo

Click the buttons below to test different response times:

Click a button above to test interaction responsiveness...
INP Measurement: No interactions yet

Optimize JavaScript

Break up long tasks, use web workers for heavy computations, and minimize main thread blocking.

Prioritize Critical Interactions

Ensure key user interactions (buttons, forms, navigation) respond quickly. Defer non-critical processing.

Optimize for Mobile

Mobile devices have less processing power. Test and optimize specifically for mobile performance.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
≤ 0.1
Good
0.1 - 0.25
Needs Improvement
> 0.25
Poor

Layout Shift Demonstration

Advertisement Loading...
CLS Score: 0.0

Reserve Space for Dynamic Content

Always include size attributes on images and videos, and reserve space for ads, embeds, and dynamic content.

Avoid Inserting Content Above Existing Content

Unless it's in response to user interaction, avoid adding content above existing content that pushes it down.

Use CSS Transform

Prefer transform animations to animations that trigger layout changes. Use transform and opacity for smooth animations.

Measuring Core Web Vitals

// Using Web Vitals library (recommended) import {onCLS, onINP, onLCP, onFCP} from 'web-vitals'; function sendToAnalytics(metric) { const body = JSON.stringify(metric); // Use navigator.sendBeacon() if available (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', {body, method: 'POST', keepalive: true}); } // Measure all Core Web Vitals onFCP(sendToAnalytics); onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics);

Get comprehensive Core Web Vitals monitoring out of the box with Datadog RUM. Track FCP, LCP, INP, CLS, and more with real user data from your production applications.

📊 Automatic Collection

Datadog RUM automatically collects all Core Web Vitals metrics without additional configuration.

🎯 Element Identification

Identifies which specific elements triggered high LCP, INP, or CLS scores for faster debugging.

📈 Performance Dashboards

Out-of-the-box dashboards show Core Web Vitals trends, 75th percentile scores, and performance insights.

🔍 Deep Analysis

Correlate Core Web Vitals with user sessions, errors, and business metrics for complete visibility.

Start Free Trial View Documentation

Manual Implementation

If you prefer to implement Core Web Vitals measurement manually, here are the key APIs:

// Largest Contentful Paint new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP:', entry.startTime, 'ms'); // entry.element gives you the LCP element } }).observe({type: 'largest-contentful-paint', buffered: true}); // Interaction to Next Paint new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('INP:', entry.duration, 'ms'); } }).observe({type: 'interaction', buffered: true}); // Cumulative Layout Shift let clsValue = 0; new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { if (!entry.hadRecentInput) { clsValue += entry.value; console.log('CLS:', clsValue); } } }).observe({type: 'layout-shift', buffered: true});

Field vs Lab Data

Use field data (real users) for business decisions and lab data (controlled testing) for development and debugging.

75th Percentile

Google recommends measuring at the 75th percentile to ensure good experience for most users, not just averages.

Segment by Device

Measure and optimize separately for mobile and desktop, as performance characteristics can vary significantly.

Continuous Monitoring

Set up alerts and continuous monitoring to catch performance regressions before they impact users.