Skip to main content

Web Vitals

What are Web Vitals ?​

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

-- web.dev

tip

Performance was measured with a RAIL model before Web Vitals is introduces. Currently recommended approach for defining performance goals is Web Vitals.

What are Core Web Vitals ?​

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

-- web.dev

An important thing to know is that the metrics that make up Core Web Vitals will evolve over time. As of the time when taking this note (June, 2024), three aspects of the user experience—loading, interactivity, and visual stability— are focused and three core web vitals are defined for respectively.

Core Web Vitals​

Largest Contentful Paint (LCP)​

LCP measures the performance of loading by reporting the render time of the largest image or text block visible in the viewport, relative to when the user first navigated to the page.

LCP thresholds (Source: link)

Evaluated DOM elements​

  • <img> elements (the first frame presentation time is used for animated content such as GIFs or animated PNGs)
  • <image> elements inside an <svg> element
  • <video> elements (the poster image load time or first frame presentation time for videos is used—whichever is earlier)
  • An element with a background image loaded using the url() function, (as opposed to a CSS gradient)
  • Block-level elements containing text nodes or other inline-level text element children.

Optimizing LCP​

A full guide here describes how to optimize the LCP indicator.

Interaction to Next Paint (INP)​

INP measures the interactivity.

INP thresholds (Source: link)

Cumulative Layout Shift (CLS)​

CLS measures the visual stability.

CLS thresholds (Source: link)

Ways to measure ore Web Vitals​

References​

Resources​