# Core Web Vitals

> What LCP, INP, CLS, FCP and TTFB measure, the good and poor thresholds, how the 75th percentile and the assessment work, and the diagnostics.

Real User Monitoring measures five metrics in your visitors' browsers with the browsers' standard performance APIs. **LCP**, **INP** and **CLS** are the Core Web Vitals that Google uses in search ranking; **FCP** and **TTFB** help explain them.

## Metrics and thresholds

| Metric | Measures | Good | Poor |
|---|---|---|---|
| **LCP** — Largest Contentful Paint | Loading: when the main content appears. | ≤ 2500 ms | > 4000 ms |
| **INP** — Interaction to Next Paint | Responsiveness: from a tap, click or key press to the next frame. | ≤ 200 ms | > 500 ms |
| **CLS** — Cumulative Layout Shift | Visual stability: how much the layout jumps. | ≤ 0.1 | > 0.25 |
| **FCP** — First Contentful Paint | When the first text or image is painted. | ≤ 1800 ms | > 3000 ms |
| **TTFB** — Time to First Byte | Server and network response time. | ≤ 800 ms | > 1800 ms |

Values between the two thresholds **need improvement**. A value exactly on the good threshold is good (a CLS of exactly `0.1` is good).

## Page views

- The unit is the **page view**: one load of a page in one browser tab. A page view without any interaction has no INP.
- LCP, FCP and TTFB come from the first report of the view; INP and CLS from the last one, because the browser keeps updating them while the page stays open.
- A view is attributed to its **landing page**. Client-side navigations in single-page apps (`history.pushState`) don't start a new view, so INP, the worst interaction of the whole view, is attributed to the page where the visit started. This matches how Chrome's field data (CrUX) and PageSpeed Insights measure.
- Lab and automation traffic isn't measured: headless browsers, Lighthouse and PageSpeed Insights, WebPageTest, GTmetrix, Pingdom, Puppeteer, Playwright, Selenium and Cypress.

## Percentiles and ratings

- The headline value of each metric is its **75th percentile (p75)** across the page views of the period: 75% of views were at least this fast. The report also has p50 and p90.
- Each metric shows how many views were good, needed improvement or were poor.
- **Visits** estimates the real page views from the measured ones: with a sample rate of `0.5`, each measured view counts as two.
- Each value is compared with the **previous period** of the same length.

## Core Web Vitals assessment

The assessment is **Passed** when the p75 of LCP, INP and CLS are all good, and **Failed** otherwise. Without INP data, LCP and CLS decide. Without LCP or CLS data there is no assessment.

## Diagnostics

### LCP breakdown

LCP is split into four phases that add up to about the LCP:

| Phase | What it is | What helps |
|---|---|---|
| Time to first byte | Waiting for the server. | Cache the HTML at the edge, speed up the origin. |
| Resource load delay | Time until the browser starts loading the LCP resource. | Make it discoverable in the HTML, preload it with `fetchpriority="high"`, don't lazy-load it, use [Early Hints](https://developers.openwaf.dev/cache/early-hints/). |
| Resource load duration | Downloading the resource. | Compress the image (AVIF, WebP), size it for the screen, cache it at the edge. |
| Element render delay | From loaded to painted. | Defer non-critical scripts, inline the critical CSS. |

The breakdown compares the **slow views** (LCP at or above the p75) with **all views**, so you see what makes slow pages slow.

### Worst elements

For each kind, the elements ranked by the poor views they caused, with their views, p75 and most frequent page:

| Kind | What |
|---|---|
| LCP elements | The element painted as the LCP (a CSS selector such as `main>section>img.hero`) and the LCP resource URL. |
| Interactions (INP) | The elements whose taps, clicks or key presses got the slowest responses. |
| Scripts (LoAF) | The scripts that ran in the long animation frames of slow interactions. |
| Layout shifts (CLS) | The elements that moved the most. |

### Breakdowns

Every metric can be split by page, country, device (`mobile`, `tablet`, `desktop`), connection type (`4g`, `3g`, `2g`, `slow-2g`, reported by Chromium browsers only), navigation type, host, viewport and the edge node that served the visit, and shown as p75 over time.