Sentry Web Performance Monitoring – Web Vitals

A series of

• 1 minute Quick use of The latest version of Docker Sentry-CLI – create version
• Quick use of Docker start Sentry-CLI – 30 seconds start Source Maps
• Sentry For React
• Sentry For Vue
• Sentry-CLI usage details

directory

• The coreWeb Vitals
  • Maximum content rendering (LCP)
  • First input delay (FID)
  • Cumulative layout offset (CLS)
• otherWeb Vitals
  • First drawing (FP)
  • First content drawing (FCP)
  • First byte time (TTFB)
• The threshold value
• Distribution histogram
• Browser support

Web Vitals is a set of metrics defined by Google to measure render time, response time, and layout shift. Each data point provides insight into the overall performance of the application.

• web.dev/vitals/

The Sentry SDK in the browser collects Web Vitals information (if supported) and adds that information to a front-end transaction. You can then summarize this important information in a few charts to quickly understand how each front-end transaction is performing for your users.

Core Web Vitals

These Web Vitals are considered by Google to be the most important, directly measuring user experience. Google reports that as of May 2021, these metrics can also affect your search rankings.

• Google reports that as of May 2021, these metrics also impact your search ranking
• Developers.google.com/search/blog…

Maximum Content Rendering (LCP)

Largest Contentful Paint (LCP) measures the render time when the Largest content appears in the viewport. This can be any form from the document Object Model (DOM), such as image, SVG, or Text block. It is the largest pixel region in the viewport and therefore has the most intuitive definition. LCP helps developers understand how long it takes a user to see the main content on a page.

• web.dev/lcp/

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 buttons, links, or other custom Javascript controllers. FID provides critical data about successful or unsuccessful interactions on application pages.

• web.dev/fid/

Cumulative Layout Offset (CLS)

Cumulative Layout Shift (CLS) is the sum of the individual Layout offset scores for each accidental 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. Rather than representing this Web Vital in terms of duration, the CLS score represents the degree of disruptive and visually unstable transitions.

Each layout offset score is calculated using impact and distance scores. 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 Fraction Shift Score = Impact Fraction * Distance ScoreCopy the code

Let’s take a look at the example above, which has an unstable element — body text. The impact section is about 50% of the page and moves the body text down 20%. The layout offset score is 0.1, equal to the product of 0.5*0.2. Therefore, CLS is 0.1.

Other Web Vitals

These Web Vitals are usually not easy to see by users, but are useful for troubleshooting Core Web Vitals.

First drawing (FP)

First Paint (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 Contentful Paint (FCP) measures how long it takes the First content to render in the viewport. This can be any form from the document Object Model (DOM), such as image, SVG, or Text block. FCP is often overlapped with First Paint (FP). FCP helps developers understand how long it takes for users to see any content changes on the page.

First byte time (TTFB)

Time To First Byte (TTFB) Measures how long it takes the user’s browser To receive the First Byte of the page content. TTFB helps developers understand whether their slowness is due to initial response or render-blocking content.

The threshold value

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 called “Meh” in Sentry.

Some Web Vitals (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.

Lighthouse:Github.com/GoogleChrom…

Distribution histogram

Web Vitals histograms show data distribution, which 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 detailed view of this important information. Outliers are determined using the Upper outer fence A as the upper limit, and any data point above the upper limit is considered an Outlier.

• Upper outer fence:En.wikipedia.org/wiki/Outlie…

Each Web Vital vertical marker 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 the area to zoom in for a more detailed view. You may also want to see more information about the transaction in the histogram. Click “Open in Discover” under the Web Vital selection to build custom queries for further investigation. See the complete documentation for Discover Query Builder for more details.

• The Query Builder:Docs. Sentry. IO/product/dis…

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 an area to zoom in for a more detailed view.

Browser support