--- title: "Web Vitals" description: "Get a clear picture of your app's Performance Score and how each Web Vital shapes it. Then, learn how to drill in to explore opportunities to improve your app's overall performance." url: https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/ --- # Web Vitals Web vitals are a set of key metrics that measure how users actually experience your site; these include load speed, responsiveness and visual stability. [Learn more about these metrics in Web Vitals Concepts](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md). For your instrumented web apps, Sentry gathers Web Vitals from real user traffic across [supported browsers](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#browser-support). These metrics are used to calculate a [Performance Score](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#performance-score) for your web application. Using these metrics, we surface the pages that have the most [opportunity](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#opportunity) to improve your app's overall performance. ## [Web Vitals Dashboard](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#web-vitals-dashboard) The **Web Vitals** dashboard, found in [Dashboards](https://sentry.io/orgredirect/organizations/:orgslug/dashboards/), gives you an overview of your page load and interaction performance for the selected project(s). It's a starting point for investigating poor Web Vitals affecting your web app and drilling down to better understand which pages are affecting your web performance the most. The [Performance Score](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#performance-score) ring shows the overall performance rating of your application. Each component of the ring represents a single Web Vital and its relative weight and impact on the Performance Score. The area chart shows you a breakdown, by Web Vitals, of your Performance Score over time, making it easy to spot which metrics are improving or slipping. Below this, you can see your app's p75 (75th percentile) vital values and the individual scores for each Web Vital. These highlight which Web Vitals need the most attention. Clicking on any Web Vital opens a more detailed summary of that metric and reveals which pages have the most [opportunity](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#opportunity) for improvement. At the bottom of the page, a sortable table lists all of your app's pages, along with their associated p75 values for each Web Vital and their individual Performance Scores. The Opportunity column displays a page score's potential improvement to your application's overall Performance Score if maximized to 100. The search bar above this table allows you to filter for specific pages by route name. The **Web Vitals** page only displays data from your application's initial page load transactions and interactions. Navigations are **not** included. ## [Page Summary](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#page-summary) From the table in **Web Vitals** or a Web Vital Summary panel, click on a page to open its **Page Summary**. Here, you can see a summary of that single page's Web Vitals. In **Page Summary**, you can further drill down to a specific page load sample [Trace](https://docs.sentry.io/concepts/key-terms/tracing.md#whats-a-trace), [LCP Element](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#largest-contentful-paint-lcp), [Replay](https://docs.sentry.io/product/explore/session-replay.md), or [Profile](https://docs.sentry.io/product/explore/profiling.md). The page's Performance Score is represented in a circular graph broken down by metric, as well as a "Page Loads" chart. ### [Samples List](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#samples-list) The samples list only shows page loads with Web Vitals and Performance Score. If a page load is missing a required Web Vital, it will not be shown in the samples list. Find out which Web Vitals are required in the [Browser Support](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#browser-support) table. In the **Page Summary**, Web Vital p75 values and scores are displayed. Clicking a Web Vital score will open details containing a variety of **Page Load** samples with good to poor scores. Each sample contains a Trace ID that can be clicked to open the [Trace View](https://docs.sentry.io/concepts/key-terms/tracing/trace-view.md#product-walkthrough-trace-details-page) page for further investigation. If there is a [Replay](https://docs.sentry.io/product/session-replay.md) or [Profile](https://docs.sentry.io/product/profiling.md) associated with the sample page load, links to those will be included. ## [Performance Score](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#performance-score) **Performance Score** is a rating from 0 to 100 that summarizes the perceived performance of your web app, based on **Web Vitals**. Each **Web Vital** is given a rating from 0 to 100 through a [Log-Normal Distribution](https://www.desmos.com/calculator/o98tbeyt1t), which is then weighed and aggregated by page and overall for your entire web application. **Page Loads** can have up to 4 individual **Web Vital** components that can be found on each event, while interactions contribute to **INP** (Interaction to Next Paint). The default weight and score-rating thresholds for each **Web Vital** can be found in the tables below. **Desktop Browsers**: | Web Vital | Good (90+) | Meh (50+) | Weight | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------ | ------ | | [Largest Contentful Paint](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#largest-contentful-paint-lcp) (LCP) | [1200ms](https://www.desmos.com/calculator/ejhjazajbd) | [2400ms](https://www.desmos.com/calculator/ejhjazajbd) | 30% | | [Cumulative Layout Shift](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#cumulative-layout-shift-cls) (CLS) | [0.1](https://www.desmos.com/calculator/irdoqfftdf) | [0.25](https://www.desmos.com/calculator/irdoqfftdf) | 15% | | [First Contentful Paint](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#first-contentful-paint-fcp) (FCP) | [900ms](https://www.desmos.com/calculator/gcxbiypuuh) | [1600ms](https://www.desmos.com/calculator/gcxbiypuuh) | 15% | | [Time To First Byte](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#time-to-first-byte-ttfb) (TTFB) | [200ms](https://www.desmos.com/calculator/ykzahw9goi) | [400ms](https://www.desmos.com/calculator/ykzahw9goi) | 10% | | [Interaction to Next Paint](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#interaction-to-next-paint-inp) (INP) | [200ms](https://www.desmos.com/calculator/jaqxodpx8d) | [500ms](https://www.desmos.com/calculator/jaqxodpx8d) | 30% | **Mobile Browsers**: | Web Vital | Good (90+) | Meh (50+) | Weight | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------ | ------ | | [Largest Contentful Paint](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#largest-contentful-paint-lcp) (LCP) | [2500ms](https://www.desmos.com/calculator/tegmkln1hr) | [4000ms](https://www.desmos.com/calculator/tegmkln1hr) | 30% | | [Cumulative Layout Shift](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#cumulative-layout-shift-cls) (CLS) | [0.1](https://www.desmos.com/calculator/irdoqfftdf) | [0.25](https://www.desmos.com/calculator/irdoqfftdf) | 15% | | [First Contentful Paint](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#first-contentful-paint-fcp) (FCP) | [1800ms](https://www.desmos.com/calculator/ezkvtlqxkf) | [3000ms](https://www.desmos.com/calculator/ezkvtlqxkf) | 15% | | [Time To First Byte](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#time-to-first-byte-ttfb) (TTFB) | [800ms](https://www.desmos.com/calculator/xcpjhfvwfo) | [1800ms](https://www.desmos.com/calculator/xcpjhfvwfo) | 10% | | [Interaction to Next Paint](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#interaction-to-next-paint-inp) (INP) | [200ms](https://www.desmos.com/calculator/jaqxodpx8d) | [500ms](https://www.desmos.com/calculator/jaqxodpx8d) | 30% | These thresholds are meant to match Google Lighthouse as closely as possible, but there may be some differences because Sentry operates on real user data, whereas Google Lighthouse operates on lab data. Some browsers may not support all **Web Vitals** used in Sentry's **Performance Score** calculation. Look at the [Browser Support](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#browser-support) table to see which Web Vitals are supported by your browser. ## [Opportunity](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#opportunity) **Opportunity** scores are number values associated with each page and are meant to give you a sense of which pages are most valuable to improve. The Opportunity score is the maximum possible increase to your application's overall Performance Score if you were to raise a page's score to 100. If a page in your application already has a score of 100, the Opportunity score would be 0, since there's no way to further optimize this page. Opportunity score calculation is also weighted based on the traffic that a page sees. Pages with high traffic tend to have higher Opportunity scores. For example, a page with a score of 70 that experiences 1000 page loads a day will have a higher Opportunity score than a page with a score of 50 that experiences only 10 page loads a day. ### [Prerequisites and Limitations](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals.md#prerequisites-and-limitations) **Web Vitals** and **Performance Scores** are automatically captured by Sentry's JavaScript SDKs through the [BrowserTracing](https://docs.sentry.io/platforms/javascript/configuration/integrations/browsertracing.md) integration. You can find out how to set up Sentry on your web application in the [installation docs](https://docs.sentry.io/platforms/javascript.md). If you are using a JavaScript framework, you may need to follow additional setup instructions for your specific framework: * [React SDK](https://docs.sentry.io/platforms/javascript/guides/react.md) * [Vue SDK](https://docs.sentry.io/platforms/javascript/guides/vue.md) * [Angular SDK](https://docs.sentry.io/platforms/javascript/guides/angular.md) * [Svelte SDK](https://docs.sentry.io/platforms/javascript/guides/svelte.md) Although Sentry provides auto instrumentation for many frontend frameworks, there are some environments and scenarios that may not be fully supported. If you are unable to find your pages in the **Web Vitals** page, check to see if your page loads are meeting the following conditions: * **Performance Scores** only support **Chrome**, **Firefox**, **Safari**, **Opera**, and **Edge** desktop and mobile browsers. * Some pageloads may not capture all Web Vitals supported by Sentry. This may depend on the client browser and/or the unique behavior of your web page. * Find out the full list of Web Vitals in the [Browser Support](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md#browser-support) table. ## Pages in this section - [Web Vitals Concepts](https://docs.sentry.io/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.md)