Skip to content

chore(web-vitals): organizing sections, updating thresholds and adding browser support #3814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 30, 2021
Merged

chore(web-vitals): organizing sections, updating thresholds and adding browser support #3814

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a243e89
moving sections
doralchan Jun 29, 2021
a35ef1d
updated references
doralchan Jun 29, 2021
55b36fb
replace xs with checkmarks
doralchan Jun 30, 2021
587975c
Update src/docs/product/performance/web-vitals.mdx
doralchan Jun 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 52 additions & 49 deletions src/docs/product/performance/web-vitals.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,87 +8,90 @@ description: "Learn more about Web Vitals in Sentry, and how they give you a bet

The in-browser Sentry SDKs collect Web Vitals information (where supported) and add that information to frontend transactions. These vitals are then summarized in several graphs for a quick overview of how each frontend transaction is performing for your users.

![Example of Web Vitals](./perf-web-vitals.png)

| Web Vital | Availability | Needs improvement/Meh | Bad/Fail |
| --------------------------------------------------------------- | ----------------------------- | ---------------------- | ----------------- |
| [Largest Contentful Paint](#largest-contentful-paint-lcp) (LCP) | Chromium | 2.5+ seconds | 4+ seconds |
| [First Input Delay](#first-input-delay-fid) (FID) | Chromium, Firefox, and Safari | 100+ milliseconds | 300+ milliseconds |
| [Cumulative Layout Shift](#cumulative-layout-shift-cls) (CLS) | Chromium | 0.1+ | 0.25+ |
| [First Paint](#first-paint-fp) (FP) | Chromium | 1+ second | 3+ seconds |
| [First Contentful Paint](#first-contentful-paint-fcp) (FCP) | Chromium | 1+ second | 3+ seconds |
| [Time To First Byte](#time-to-first-byte-ttfb) (TTFB) | Chromium, Firefox, and Safari | 200+ milliseconds | 600+ milliseconds |
![Visualization of Web Vitals](./diagram-transaction-vitals.png)

<Note>
## Core Web Vitals
These Web Vitals are considered the most important by Google and directly measure the user experience. [Google reports that as of May 2021, these metrics also impact your search ranking](https://developers.google.com/search/blog/2020/11/timing-for-page-experience).

Some Web Vitals such as FP, FCP, LCP, and TTFB are measured relative to the start of the transaction. Values may differ when compared to values generated with other tools such as [Lighthouse](https://github.com/GoogleChrome/lighthouse).
### Largest Contentful Paint (LCP)

</Note>

## Distribution Histogram
[Largest Contentful Paint (LCP)](https://web.dev/lcp/) measures the render time for the largest content to appear in the viewport. This may be in any form from the document object model (DOM), such as images, SVGs, or text blocks. It is the largest pixel area in the viewport, thus most visually defining. LCP helps developers understand how long it takes before the user sees the main content on the page.

A histogram visualization showing the data distribution can help you identify and diagnose frontend performance problems by revealing anomalies.
### First Input Delay (FID)

By default, outliers will be excluded from the histograms to provide a more informative view of these vitals. Outliers are determined using the [upper outer fence](https://en.wikipedia.org/wiki/Outlier#Tukey's_fences) as the upper bound, and any data points above the upper bound are deemed an outlier.
[First Input Delay (FID)](https://web.dev/fid/) measures the response time when the user tries to interact with the viewport. Actions may include clicking a button, link, or other custom Javascript controller. FID provides critical data on successful or unsuccessful interactions on an application page.

If you notice a region of interest on any of the histograms, click and drag over the area to zoom in for a more detailed view. You may also want to see more information related to the transactions in the histograms. Click "Open in Discover" beneath the Web Vital of choice to build a custom query for further investigation. For more details, see the full documentation for the Discover [Query Builder](/product/discover-queries/query-builder/).
### Cumulative Layout Shift (CLS)

If you wish to see all of the data available, open the dropdown and click "View All". You will likely see extreme outliers when you click "View All". You can click and drag over an area to zoom in for a more detailed view.
[Cumulative Layout Shift (CLS)](https://web.dev/cls/) is the sum of individual layout shift scores for every unexpected element shift during the rendering process. Imagine navigating to an article and trying to click a link before the page finishes loading. Before your cursor even gets there, the link may have shifted down due to an image rendering. Rather than using duration for this Web Vital, the CLS score represents the extent of the disruptive and visually unstable shifts.

## Thresholds
![Example of Cumulative Layout Shift](./diagram-transaction-cls.png)

Google's "Bad", "Needs improvement", and "Good" levels are used to classify data points into red, yellow, and green for the corresponding Web Vitals. "Needs improvement" is sometimes referred to as "Meh" in Sentry.
Each layout shift score is calculated using an impact and distance fraction. The impact fraction is the total visible area that the element affects between the two rendered frames. The distance fraction measures the distance it has moved relative to the viewport.

The vertical line for each Web Vital is the 75th percentile of the observed data points. In other words, 25% of the recorded values exceed that amount. If the value exceeds the Google Web Vitals "Bad" threshold, the Web Vital status is marked as "Fail".
```
Layout Shift Score = Impact Fraction * Distance Fraction
```

<Note>
Let’s take a look at the example above which has one unstable element - the body text. The impact fraction is roughly 50% of the page and moves the body text down by 20%. The layout shift score is 0.1, the product of 0.5*0.2. Thus, CLS is 0.1.

For [Performance Metrics](../metrics/), "75th percentile" and "failure threshold" normally apply to transaction duration. Here, they instead refer to the individual Web Vitals.
## Other Web Vitals

</Note>
These Web Vitals are generally less user-visible, but are useful for troubleshooting issues with the Core Web Vitals.

## Supported Web Vitals
### First Paint (FP)

![Visualization of Web Vitals](./diagram-transaction-vitals.png)
First Paint (FP) measures the amount of time the first pixel takes to appear in the viewport, rendering any visual change from what was previously displayed. This may be in any form from the document object model (DOM), such as background color, canvas, or image. FP helps developers understand if anything unexpected is happening to render the page.

### Core Web Vitals
### First Contentful Paint (FCP)

These Web Vitals are considered the most important by Google and directly measure the user experience. [Google reports that as of May 2021, these metrics also impact your search ranking](https://developers.google.com/search/blog/2020/11/timing-for-page-experience).
[First Contentful Paint (FCP)](https://web.dev/fcp/) measures the time for the first content to render in the viewport. This may be in any form from the document object model (DOM), such as images, SVGs, or text blocks. FCP frequently overlaps with First Paint (FP). FCP helps developers understand how long it takes before the user sees any content change on the page.

#### Largest Contentful Paint (LCP)
### Time To First Byte (TTFB)

[Largest Contentful Paint (LCP)](https://web.dev/lcp/) measures the render time for the largest content to appear in the viewport. This may be in any form from the document object model (DOM), such as images, SVGs, or text blocks. It is the largest pixel area in the viewport, thus most visually defining. LCP helps developers understand how long it takes before the user sees the main content on the page.
[Time To First Byte (TTFB)](https://web.dev/time-to-first-byte/) measures the time that it takes for 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 instead due to render-blocking content.

#### First Input Delay (FID)
## Thresholds

[First Input Delay (FID)](https://web.dev/fid/) measures the response time when the user tries to interact with the viewport. Actions may include clicking a button, link, or other custom Javascript controller. FID provides critical data on successful or unsuccessful interactions on an application page.
Google's "Good", "Needs Improvement", and "Poor" thresholds are used to classify data points into green, yellow, and red for the corresponding Web Vitals. "Needs improvement" is referred to as "Meh" in Sentry.

#### Cumulative Layout Shift (CLS)
| Web Vital | Good | Meh | Poor |
| --------------------------------------------------------------- | ------------ | ------------ | ------------ |
| [Largest Contentful Paint](#largest-contentful-paint-lcp) (LCP) | <= 2.5s | <= 4s | > 4s |
| [First Input Delay](#first-input-delay-fid) (FID) | <= 100ms | <= 300ms | > 300ms |
| [Cumulative Layout Shift](#cumulative-layout-shift-cls) (CLS) | <= 0.1 | <= 0.25 | > 0.25 |
| [First Paint](#first-paint-fp) (FP) | <= 1s | <= 3s | > 3s |
| [First Contentful Paint](#first-contentful-paint-fcp) (FCP) | <= 1s | <= 3s | > 3s |
| [Time To First Byte](#time-to-first-byte-ttfb) (TTFB) | <= 100ms | <= 200ms | > 600ms |

[Cumulative Layout Shift (CLS)](https://web.dev/cls/) is the sum of individual layout shift scores for every unexpected element shift during the rendering process. Imagine navigating to an article and trying to click a link before the page finishes loading. Before your cursor even gets there, the link may have shifted down due to an image rendering. Rather than using duration for this Web Vital, the CLS score represents the extent of the disruptive and visually unstable shifts.
<Note>

![Example of Cumulative Layout Shift](./diagram-transaction-cls.png)
Some Web Vitals such as FP, FCP, LCP, and TTFB are measured relative to the start of the transaction. Values may differ when compared to values generated with other tools such as [Lighthouse](https://github.com/GoogleChrome/lighthouse).

Each layout shift score is calculated using an impact and distance fraction. The impact fraction is the total visible area that the element affects between the two rendered frames. The distance fraction measures the distance it has moved relative to the viewport.
</Note>

```
Layout Shift Score = Impact Fraction * Distance Fraction
```
## Distribution Histogram

Let’s take a look at the example above which has one unstable element - the body text. The impact fraction is roughly 50% of the page and moves the body text down by 20%. The layout shift score is 0.1, the product of 0.5*0.2. Thus, CLS is 0.1.
![Example of Web Vitals](./perf-web-vitals.png)

### Other Web Vitals
The Web Vitals histogram displays data distribution, and it can help you identify and diagnose frontend performance problems by revealing anomalies.

These Web Vitals are generally less user-visible, but are useful for troubleshooting issues with the Core Web Vitals.
By default, outliers will be excluded from the histograms to provide a more informative view of these vitals. Outliers are determined using the [upper outer fence](https://en.wikipedia.org/wiki/Outlier#Tukey's_fences) as the upper bound, and any data points above the upper bound are deemed an outlier.

#### First Paint (FP)
The vertical marker for each Web Vital is the 75th percentile of the observed data points. In other words, 25% of the recorded values exceed that amount.

First Paint (FP) measures the amount of time the first pixel takes to appear in the viewport, rendering any visual change from what was previously displayed. This may be in any form from the document object model (DOM), such as background color, canvas, or image. FP helps developers understand if anything unexpected is happening to render the page.
If you notice a region of interest on any of the histograms, click and drag over the area to zoom in for a more detailed view. You may also want to see more information related to the transactions in the histograms. Click "Open in Discover" beneath the Web Vital of choice to build a custom query for further investigation. For more details, see the full documentation for the Discover [Query Builder](/product/discover-queries/query-builder/).

#### First Contentful Paint (FCP)
If you wish to see all of the data available, open the dropdown and click "View All". You will likely see extreme outliers when you click "View All". You can click and drag over an area to zoom in for a more detailed view.

[First Contentful Paint (FCP)](https://web.dev/fcp/) measures the time for the first content to render in the viewport. This may be in any form from the document object model (DOM), such as images, SVGs, or text blocks. FCP frequently overlaps with First Paint (FP). FCP helps developers understand how long it takes before the user sees any content change on the page.

#### Time To First Byte (TTFB)
## Browser Support

[Time To First Byte (TTFB)](https://web.dev/time-to-first-byte/) measures the time that it takes for 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 instead due to render-blocking content.
| Web Vital | Chrome | Edge | Opera | Firefox | Safari | IE |
| --------------------------------------------------------------- | ------- | ------- | ------- | ------- | ------- | ------- |
| [Largest Contentful Paint](#largest-contentful-paint-lcp) (LCP) | ✓ | ✓ | ✓ | | | |
| [First Input Delay](#first-input-delay-fid) (FID) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [Cumulative Layout Shift](#cumulative-layout-shift-cls) (CLS) | ✓ | ✓ | ✓ | | | |
| [First Paint](#first-paint-fp) (FP) | ✓ | ✓ | ✓ | | | |
| [First Contentful Paint](#first-contentful-paint-fcp) (FCP) | ✓ | ✓ | ✓ | ✓ | ✓ | |
| [Time To First Byte](#time-to-first-byte-ttfb) (TTFB) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |