Web metrics are a set of metrics defined by Google that measure rendering time, response time, and layout offset. Each data point provides insight into the overall performance of the application.

The Sentry SDK collects Web metrics information (if supported by the browser) and adds this information to the front-end transaction. This important information is then summarized in a few charts to quickly understand how each front-end transaction is performing for the user.

Core Web Metrics

These Web metrics are considered by Google to be the most important direct measures of user experience. Google reports that as of May 2021, these metrics also affect the search rankings of websites.

Maximum Content drawing (LCP)

Maximum Content Rendering (LCP) measures the rendering time for maximum content to appear in the viewport. This can be anything from the Document Object Model (DOM), such as images, SVG, or text blocks. The largest pixel area in the viewport and therefore most intuitive. LCP helps developers understand how long it takes a user to see the main content on a page.

First input delay (FID)

First input delay (FID) measures the response time when a user tries to interact with the viewport. Actions may include clicking a button, link, or other custom Javascript controller. FID provides critical data about successful or unsuccessful interactions on application pages.

Cumulative Layout Offset (CLS)

The cumulative layout offset (CLS) is the sum of the individual layout offset scores for each unexpected element offset during rendering. Imagine navigating to an article and trying to click the link before the page has finished loading. Before your cursor gets there, the link may move down due to image rendering. CLS scores represent the extent of disruptive and visually unstable transitions, rather than the duration of this Web metric.

Calculate each layout offset score using the influence and distance score. The influence score is the total visible area of the influence of an element between two render frames. The distance fraction measures how far it moves relative to the viewport.

# Layout Shift Score = Impact Fraction * Distance FractionLayout offset score = Impact score * Distance scoreCopy the code

Let’s take a look at the example above, which has one volatile element — body content. The impact score is approximately 50% of the page and moves the body text down 20%. The layout shift score is 0.5 * 0.2 = 0.1. Therefore, CLS is 0.1.

Other Web Metrics

These Web metrics are often not easily visible to users, but are useful for troubleshooting core Web metrics.

First Render (FP)

First Rendering (FP) measures the time it takes for the first pixel to appear in the viewport, rendering any visual changes compared to what was previously displayed. This can be any form from the document Object Model (DOM), such as background-color, canvas, or image. FP helps developers know if anything has happened to the rendered page.

First Content Rendering (FCP)

First Content rendering (FCP) measures how long it takes for the first content to appear in the viewport. This can be anything from the document Object Model (DOM), such as an image, SVG, or a text block. FCP often overlaps with first render (FP). FCP helps developers understand how long it takes for users to see content updated on the page.

First byte time (TTFB)

First byte Time (TTFB) measures how long it takes a user’s browser to receive the first byte of page content. TTFB helps developers understand whether their slowness is caused by the initial response or by rendering blocked content.

The threshold value

The three thresholds defined by Google — “GOOD,” “NEEDS IMPROVEMENT,” and “POOR” — are used to classify data points into green, yellow, and red for the corresponding Web metrics. “NEEDS IMPROVEMENT” is called “Meh” in Sentry.

Web metrics good Need to improve poor
Maximum content drawing(LCP) < = 2.5 s <= 4s > 4s
First input delay(FID) <= 100ms <= 300ms > 300ms
Cumulative layout migration(CLS) < = 0.1 < = 0.25 > 0.25
For the first time to render(FP) <= 1s <= 3s > 3s
First content drawing(FCP) <= 1s <= 3s > 3s
First byte time(TTFB) <= 100ms <= 200ms > 600ms

Some Web metrics, such as FP, FCP, LCP, and TTFB, are measured relative to the start of a transaction. The values may differ from those generated using another tool, such as Lighthouse.

Distribution histogram

The Web metrics histogram shows the distribution of data and can help you identify and diagnose front-end performance problems by revealing exceptions.

By default, outliers are excluded from the histogram to provide a more informative view of these vital signs. Outliers are determined using the Upper outer fence as the upper limit, and any data point above the upper limit is considered an outlier.

The vertical marker for each Web metric is the 75th percentile of the observed data point. In other words, 25% of recorded values exceed that amount.

If you notice an area of interest on any histogram, click and drag to enlarge the area for a more detailed view. You may also want to see more information about transactions in the histogram. Click Open in Discover under the selected Web metric to build a custom query for further investigation. See the complete documentation for Discover Query Builder for more details.

If you want to see All available data, open the drop-down menu and click View All. When you click View All, you may see extreme outliers. You can click and drag to enlarge an area for a more detailed view.

Browser support

Web metrics Chrome Edge Opera Firefox Safari IE
Maximum content drawing(LCP) ✓ ✓ ✓
First input delay(FID) ✓ ✓ ✓ ✓ ✓ ✓
Cumulative layout migration(CLS) ✓ ✓ ✓
For the first time to render(FP) ✓ ✓ ✓
First content drawing(FCP) ✓ ✓ ✓ ✓ ✓
First byte time(TTFB) ✓ ✓ ✓ ✓ ✓ ✓

Text: Web Vitals