Web vitals refresh (#15100)

<!-- Use this checklist to make sure your PR is ready for merge. You may
delete any sections you don't need. -->

## DESCRIBE YOUR PR
Copy refresh and update old Arcade.

## IS YOUR CHANGE URGENT?  

Help us prioritize incoming PRs by letting us know when the change needs
to go live.
- [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE -->
- [ ] Other deadline: <!-- ENTER DATE HERE -->
- [ ] None: Not urgent, can wait up to 1 week+

## SLA

- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
added an urgent due date to it.
Thanks in advance for your help!

## PRE-MERGE CHECKLIST

*Make sure you've checked the following before merging your changes:*

- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)

## LEGAL BOILERPLATE

<!-- Sentry employees and contractors can delete or ignore this section.
-->

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.

## EXTRA RESOURCES

- [Sentry Docs contributor guide](https://docs.sentry.io/contributing/)

---------

Co-authored-by: Alex Krawiec <[email protected]>

Author: coolguyzone

docs/product/insights/frontend/web-vitals/index.mdx

@@ -1,56 +1,52 @@
 ---
 title: "Web Vitals"
 sidebar_order: 0
-description: "Understand your application's performance score and how each web vital contributes to it. Drill in to explore opportunities to improve your app's overall performance."
+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."
 ---
 
-Web vitals are a set of metrics that measure the quality of the user experience on a web page. To learn more about these metrics, see [Web Vitals Concepts](/product/insights/web-vitals/web-vitals-concepts/).
+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](/product/insights/web-vitals/web-vitals-concepts/).
 
-For your instrumented web apps, Sentry gathers web vitals from real user traffic through [supported browsers](web-vitals-concepts/#browser-support). These web vitals are used to calculate a [Performance Score](#performance-score) for your web application. Using these metrics, we surface the pages that have the most [opportunity](#opportunity) to improve your app's overall performance.
+For your instrumented web apps, Sentry gathers Web Vitals from real user traffic across [supported browsers](web-vitals-concepts/#browser-support). These metrics are used to calculate a [Performance Score](#performance-score) for your web application. Using these metrics, we surface the pages that have the most [opportunity](#opportunity) to improve your app's overall performance.
 
-The interactive demo below walks through how to get insights on your web vitals.
+The interactive demo below walks through how to get insights on your Web Vitals.
 
-<Arcade src="https://demo.arcade.software/pSDa9dkXo1yB4HIuGVuz?embed" />
+<Arcade src="https://demo.arcade.software/N9e0ghMonxkDJR2o03kG?embed" />
 
 ## Web Vitals Page
 
-The **Web Vitals** page, nested under the **Insights** tab, gives you an overview of your page load and interaction performance for the selected project(s). You can use this page as a starting point to investigate poor Web Vitals affecting your web application and drill down to better understand which pages are affecting your web performance the most.
+The **Web Vitals** page, found in the the **Insights** tab, 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.
 
-In the top left, the [Performance Score](#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 on the right shows you a breakdown - by Web Vitals - of your performance score over time.
+In the top left, the [Performance Score](#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 on the right 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 application's p75 vital values and the individual scores for each Web Vital. These metrics can help you prioritize which Web Vitals need attention most. Click on a Web Vital to open a more detailed summary of that metric and see which pages have the most [opportunity](#opportunity) for improvement.
+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](#opportunity) for improvement.
 
-At the bottom of the **Web Vitals** page, a sortable table shows a list of your application's pages, along with their associated p75 values for each Web Vital. Each page also has its own individual Performance Score. 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.
+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.
 
 <Alert>
 
-The **Web Vitals** page only displays data from your application's initial page load transactions and interactions. Navigations are not included.
+The **Web Vitals** page only displays data from your application's initial page load transactions and interactions. Navigations are **not** included.
 
 </Alert>
 
-## Page Overview
+## Page Summary
 
-From the table in **Web Vitals** or a Web Vital Summary panel, click on a page to open its **Page Overview**. Here, you can see a summary of that single page's Web Vitals. In **Page Overview**, you can further drill down to a specific page load sample [Event](/concepts/key-terms/tracing/trace-view/), [Interaction](/product/insights/web-vitals/web-vitals-concepts/#interaction-to-next-paint-inp), [Replay](/product/explore/session-replay/), or [Profile](/product/explore/profiling/).
-
-The **Page Overview** page displays a "Page Loads" chart in the right sidebar of the page. A mini **Aggregate Span Waterfall** is also displayed in the right sidebar, which shows you common span paths that your application's page may take. Click the "View Full Waterfall" button or the "Aggregate Spans" tab at the top of the page to see the full **Aggregate Span Waterfall**.
+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](/concepts/key-terms/tracing/#whats-a-trace), [LCP Element](/product/insights/frontend/web-vitals/web-vitals-concepts/#largest-contentful-paint-lcp), [Replay](/product/explore/session-replay/), or [Profile](/product/explore/profiling/). The right sidebar of the page displays a circular graph highlighting the page's Performance Score broken down by metric, as well as a "Page Loads" chart.
 
 ### Samples List
 
 <Alert>
-  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
+  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](/product/insights/frontend/web-vitals/web-vitals-concepts/#browser-support)
   table.
 </Alert>
 
-At the center of the **Page Overview**, Web Vital p75 values and scores are displayed. Clicking a Web Vital score will open a slideout panel containing a variety of **Page Load** samples with good to poor scores. Each sample contains an **Event ID** that can be clicked to open the [Trace View](/concepts/key-terms/tracing/trace-view/#product-walkthrough-trace-details-page) page for further investigation. If there is a [Replay](/product/session-replay/) or [Profile](/product/profiling/) associated with the sample page load, links will be included in the associated table columns.
-
-<Arcade src="https://demo.arcade.software/rFtiXFfPG1CX1QcrgdSf?embed" />
+At the center of the **Page Summary**, Web Vital p75 values and scores are displayed. Clicking a Web Vital score will open a slideout panel 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](/concepts/key-terms/tracing/trace-view/#product-walkthrough-trace-details-page) page for further investigation. If there is a [Replay](/product/session-replay/) or [Profile](/product/profiling/) associated with the sample page load, links to those will be included.
 
 ## Performance Score
 
-**Performance Score** is a rating from 0 to 100 that summarizes the perceived performance of your web application. Page loads and Interactions on your web application are scored based on their **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.
+**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.
 
@@ -99,5 +95,5 @@ You can find out how to set up Sentry on your web application in the [installati
 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 depending on the client browser and/or the unique behavior of your web page. **Performance Score** are calculated based on available web vitals.
-  - Find out the full list of web vitals in the [Browser Support](/product/insights/web-vitals/web-vitals-concepts/#browser-support) table.
+- 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](/product/insights/web-vitals/web-vitals-concepts/#browser-support) table.

docs/product/insights/overview/filters-display/widgets.mdx

@@ -63,7 +63,7 @@ This widget is available in the [Backend Overview](/product/insights/backend/),
 
 ## Best Page Opportunities
 
-Shows web pages in your application that have the most [Opportunity](/product/insights/web-vitals/#opportunity) to improve. These pages usually have poor [Web Vital](/product/insights/web-vitals/) scores, high throughput, or both. Click on a page to open its [**Page Overview** page](/product/insights/web-vitals/#page-overview) or click "View All" to open the [**Web Vitals** page](/product/insights/web-vitals/#web-vitals-page).
+Shows web pages in your application that have the most [Opportunity](/product/insights/web-vitals/#opportunity) to improve. These pages usually have poor [Web Vital](/product/insights/web-vitals/) scores, high throughput, or both. Click on a page to open its [**Page Summary** page](/product/insights/web-vitals/#page-overview) or click "View All" to open the [**Web Vitals** page](/product/insights/web-vitals/#web-vitals-page).
 
 This widget is available in the [Frontend Overview](/product/insights/frontend/).