Core Web Vitals

Overview

Core Web Vitals are a set of standardized metrics established by Google to evaluate the perceived user experience of a web page. Introduced in 2020, these metrics focus on three key areas: loading performance, interactivity, and visual stability (web.dev). The three primary metrics are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

LCP measures the time it takes for the largest content element on the page to become visible, indicating how quickly the main content loads. A good LCP score is generally considered to be 2.5 seconds or less for the majority of users (web.dev). FID quantifies the delay from when a user first interacts with a page (e.g., clicking a button or link) to when the browser is actually able to begin processing that interaction. A good FID score is typically 100 milliseconds or less. As of March 2024, FID is being replaced by Interaction to Next Paint (INP) as a Core Web Vital, which provides a more comprehensive measure of responsiveness by observing the latency of all user interactions on a page (web.dev). CLS measures the sum total of all unexpected layout shifts that occur during the entire lifespan of a page. A good CLS score is 0.1 or less, indicating minimal visual instability (web.dev).

Core Web Vitals are relevant for web developers, site owners, and digital marketers alike. For developers, they provide actionable data to identify and optimize performance bottlenecks, leading to more responsive and visually stable user interfaces. Site owners benefit by achieving better search engine visibility, as Core Web Vitals are a factor in Google's ranking algorithms (developers.google.com). Sites that provide a superior user experience, as measured by these vitals, are more likely to rank higher in search results, potentially increasing organic traffic. Furthermore, monitoring these metrics helps track website health over time, ensuring a consistent and positive experience for visitors.

The system shines when used as a diagnostic framework for continuous improvement. By integrating Core Web Vitals reporting into development workflows, teams can proactively address performance regressions and validate the impact of optimizations. For example, a developer might use Lighthouse to audit a page, identify a high LCP score, and then employ techniques like image optimization or server-side rendering to improve loading times. Similarly, addressing high CLS scores often involves specifying image and video dimensions or preloading custom fonts to prevent unexpected content shifts (web.dev). These metrics provide a common language and objective benchmarks for discussing and improving web performance across diverse teams.

Key features

• Largest Contentful Paint (LCP) measurement: Tracks the rendering time of the largest content element visible within the viewport, providing insight into perceived page load speed.
• Interaction to Next Paint (INP) measurement: Evaluates the responsiveness of a page to user input by observing the latency of all interactions, replacing First Input Delay (FID) as of March 2024.
• Cumulative Layout Shift (CLS) measurement: Quantifies the visual stability of a page by summing unexpected layout shifts, helping identify janky user experiences.
• Integration with Google Search Console: Provides field data on Core Web Vitals for indexed pages, highlighting specific URLs that require attention.
• Integration with PageSpeed Insights: Offers both field data (CrUX data) and lab data (Lighthouse) for specific URLs, along with actionable optimization recommendations.
• Integration with Lighthouse: An open-source, automated tool for improving the quality of web pages, which includes audits for Core Web Vitals in a lab environment (developer.chrome.com).
• Origin Summary Reports: Aggregated Core Web Vitals data available in tools like PageSpeed Insights, providing a holistic view of a website's performance across its entire origin.

Pricing

Core Web Vitals are a set of metrics integrated into Google's developer tools and search ranking algorithms rather than a standalone product with a direct pricing model. Access to these metrics and the tools that report on them is free.

Common integrations

• Google Search Console: Automatically reports Core Web Vitals data for all pages indexed by Google Search. Users can monitor performance trends and identify pages needing improvement (developers.google.com).
• Google PageSpeed Insights: Analyze specific URLs to get detailed Core Web Vitals scores, both from real-user data (field data) and simulated lab environments, along with optimization suggestions (web.dev).
• Lighthouse (Chrome DevTools): Developers can run on-demand audits from within their browser to assess Core Web Vitals in a controlled lab environment during development (developer.chrome.com).
• web-vitals JavaScript library: A small library for measuring Core Web Vitals in real user monitoring (RUM) setups, allowing developers to collect these metrics directly from their users' browsers (github.com/GoogleChrome/web-vitals).
• Google Analytics: Custom events can be configured to send Core Web Vitals data collected via the web-vitals library to Google Analytics for monitoring and analysis alongside other user behavior data (web.dev).

Alternatives

• GTmetrix: A web performance analysis tool that provides detailed reports on page speed and optimization, including metrics beyond Core Web Vitals.
• Pingdom Tools: Offers website speed testing and monitoring, helping identify performance bottlenecks and track uptime.
• WebPageTest: An open-source tool for running detailed performance tests from multiple locations and browsers, providing waterfall charts and video capture.
• New Relic Browser: A real user monitoring (RUM) solution that collects performance data directly from end-users, offering insights into front-end performance.
• Datadog Real User Monitoring (RUM): Provides end-to-end visibility into user experience, including page load times, errors, and resource loading.

Getting started

While Core Web Vitals are not a product to be directly integrated via an SDK, you can start measuring them in your applications using the official web-vitals JavaScript library. This library helps you gather real-user data (field data) for LCP, INP (or FID), and CLS, which can then be sent to an analytics service for monitoring. This example demonstrates how to integrate the web-vitals library into a web page and log the results to the console.

import { getLCP, getFID, getCLS, getINP } from 'web-vitals';

function logWebVitals() {
  // Log LCP
  getLCP(metric => {
    console.log('LCP:', metric.name, metric.value, 'ms');
  });

  // Log FID (will be replaced by INP soon)
  getFID(metric => {
    console.log('FID:', metric.name, metric.value, 'ms');
  });

  // Log CLS
  getCLS(metric => {
    console.log('CLS:', metric.name, metric.value);
  });

  // Log INP (the new responsiveness metric)
  getINP(metric => {
    console.log('INP:', metric.name, metric.value, 'ms');
  });
}

// Call the function when the document is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', logWebVitals);
} else {
  logWebVitals();
}

// To install the library:
// npm install web-vitals
// or
// yarn add web-vitals

After installing the web-vitals library, import the specific functions for each metric you wish to track. The functions (getLCP, getFID, getCLS, getINP) each take a callback function that receives a metric object. This object contains details about the metric, including its name and value. In a production environment, you would typically send this metric object to an analytics service like Google Analytics or a custom backend for long-term storage and analysis, rather than just logging it to the console (web.dev). This allows for real-user monitoring, providing insights into how actual users experience your site's performance under various conditions.