fix(webvitals): Fix links to web vitals not pointing to correct page (#9424)

edwardgou-sentry · web-flow · commit e867d6d8a67a · 2024-03-12T12:20:07.000-04:00
We moved the webvitals concepts into its own page. Updates links to properly point to the new page.
diff --git a/docs/product/issues/issue-details/performance-issues/large-render-blocking-asset/index.mdx b/docs/product/issues/issue-details/performance-issues/large-render-blocking-asset/index.mdx
@@ -13,7 +13,7 @@ The detector for this performance issue looks for specific asset (resource) span
 - The span operation has to be either a: `resource.link` or `resource.script`.
 - The span's `resource.render_blocking_status` data property should either have a value of `blocking` (added by the `@sentry/browser` SDK, version `7.38.0`), or be missing.
 - The span's `Encoded Body Size` data property has to be over `500kb`.
-- The [First Contentful Paint (FCP)](/product/performance/web-vitals/#first-contentful-paint-fcp) of the transaction must be at least `2` seconds (with an upper bound of `10` seconds to eliminate outliers).
+- The [First Contentful Paint (FCP)](/product/performance/web-vitals/web-vitals-concepts/#first-contentful-paint-fcp) of the transaction must be at least `2` seconds (with an upper bound of `10` seconds to eliminate outliers).
 - The span's duration must be at least `33%` of the FCP.
 
 You can configure detector thresholds for large render blocking asset issues in **Project Settings > Performance**:
diff --git a/docs/product/performance/transaction-summary.mdx b/docs/product/performance/transaction-summary.mdx
@@ -38,7 +38,7 @@ While you can use the search field to narrow down your events, you can also filt
 
 - **Trends:** This graph uses a modified version of [ASAP](https://arxiv.org/pdf/1703.00983.pdf) smoothing. The Trends graph shows the unsmoothed data of the Display data, along with a smoothed version of that data.
 
-- **Web Vitals:** This graph displays the [P75 threshold](/product/performance/metrics/#p75-threshold) of [First Paint](/product/performance/web-vitals/#first-paint-fp), [First Contentful Paint](/product/performance/web-vitals/#first-contentful-paint-fcp), [Largest Contentful Paint](/product/performance/web-vitals/#largest-contentful-paint-lcp), and [First Input Delay](/product/performance/web-vitals/#first-input-delay-fid) over time. This view helps you understand how the Web Vitals associated with the transaction are performing over time.
+- **Web Vitals:** This graph displays the [P75 threshold](/product/performance/metrics/#p75-threshold) of [First Paint](/product/performance/web-vitals/web-vitals-concepts/#first-paint-fp), [First Contentful Paint](/product/performance/web-vitals/web-vitals-concepts/#first-contentful-paint-fcp), [Largest Contentful Paint](/product/performance/web-vitals/web-vitals-concepts/#largest-contentful-paint-lcp), and [First Input Delay](/product/performance/web-vitals/web-vitals-concepts/#first-input-delay-fid) over time. This view helps you understand how the Web Vitals associated with the transaction are performing over time.
 
 - **User Misery:** This graph displays the [User Misery](/product/performance/metrics/#user-misery) score for the transaction. User Misery is a score that represents the number of unique users who have experienced load times four times the project's configured threshold.
 
diff --git a/docs/product/performance/web-vitals/index.mdx b/docs/product/performance/web-vitals/index.mdx
@@ -82,10 +82,10 @@ A **Page Load Performance Score** is comprised of up to 4 individual **Web Vital
 
 | Page Load Web Vital                                             | P90 (Good)                                             | P50 (Meh)                                              | Weight |
 | --------------------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------ | ------ |
-| [Largest Contentful Paint](#largest-contentful-paint-lcp) (LCP) | [1200ms](https://www.desmos.com/calculator/ejhjazajbd) | [2400ms](https://www.desmos.com/calculator/ejhjazajbd) | ~42%   |
-| [Cumulative Layout Shift](#cumulative-layout-shift-cls) (CLS)   | [0.1](https://www.desmos.com/calculator/irdoqfftdf)    | [0.25](https://www.desmos.com/calculator/irdoqfftdf)   | ~22%   |
-| [First Contentful Paint](#first-contentful-paint-fcp) (FCP)     | [900ms](https://www.desmos.com/calculator/gcxbiypuuh)  | [1600ms](https://www.desmos.com/calculator/gcxbiypuuh) | ~22%   |
-| [Time To First Byte](#time-to-first-byte-ttfb) (TTFB)           | [200ms](https://www.desmos.com/calculator/ykzahw9goi)  | [400ms](https://www.desmos.com/calculator/ykzahw9goi)  | ~14%   |
+| [Largest Contentful Paint](/product/performance/web-vitals/web-vitals-concepts/#largest-contentful-paint-lcp) (LCP) | [1200ms](https://www.desmos.com/calculator/ejhjazajbd) | [2400ms](https://www.desmos.com/calculator/ejhjazajbd) | ~42%   |
+| [Cumulative Layout Shift](/product/performance/web-vitals/web-vitals-concepts/#cumulative-layout-shift-cls) (CLS)   | [0.1](https://www.desmos.com/calculator/irdoqfftdf)    | [0.25](https://www.desmos.com/calculator/irdoqfftdf)   | ~22%   |
+| [First Contentful Paint](/product/performance/web-vitals/web-vitals-concepts/#first-contentful-paint-fcp) (FCP)     | [900ms](https://www.desmos.com/calculator/gcxbiypuuh)  | [1600ms](https://www.desmos.com/calculator/gcxbiypuuh) | ~22%   |
+| [Time To First Byte](/product/performance/web-vitals/web-vitals-concepts/#time-to-first-byte-ttfb) (TTFB)           | [200ms](https://www.desmos.com/calculator/ykzahw9goi)  | [400ms](https://www.desmos.com/calculator/ykzahw9goi)  | ~14%   |
 
 <Note>
 Some browsers may not support all **Web Vitals** used in Sentry's **Performance Score** calculation, so weights are dynamically adjusted depending on which ones are available on the browser.
@@ -97,7 +97,7 @@ An **Interaction Performance Score** is based off a single **Web Vital** compone
 
 | Interaction Web Vital                                             | P90 (Good)                                           | P50 (Meh)                                              | Weight |
 | --------------------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------ | ------ |
-| [Interaction to Next Paint](#interaction-to-next-paint) (INP)   | [200ms](https://www.desmos.com/calculator/jaqxodpx8d)  | [500ms](https://www.desmos.com/calculator/jaqxodpx8d)  | 100%   |
+| [Interaction to Next Paint](/product/performance/web-vitals/web-vitals-concepts/#interaction-to-next-paint-inp) (INP)   | [200ms](https://www.desmos.com/calculator/jaqxodpx8d)  | [500ms](https://www.desmos.com/calculator/jaqxodpx8d)  | 100%   |
 
 The overall **Performance Score** of your web application is the weighted average of your **Page Load** and **Interaction** scores. If your web application has far more Page Load scores than Interaction scores, your overall **Performance Score** will be biased towards Page Loads, and vice versa. An equal number of Page Load and Interaction scores produces an overall **Performance Score** comprised of a 50/50 average.
 
diff --git a/docs/product/reference/search/searchable-properties/events.mdx b/docs/product/reference/search/searchable-properties/events.mdx
@@ -338,25 +338,25 @@ A [warm start](/product/performance/mobile-vitals/#app-start) refers to when the
 
 ### `measurements.cls`
 
-[Cumulative Layout Shift (CLS)](/product/performance/web-vitals/#cumulative-layout-shift-cls) is the sum of individual layout shift scores for every unexpected element shift during the rendering process.
+[Cumulative Layout Shift (CLS)](/product/performance/web-vitals/web-vitals-concepts/#cumulative-layout-shift-cls) is the sum of individual layout shift scores for every unexpected element shift during the rendering process.
 
 - **Type:** number
 
 ### `measurements.fcp`
 
-[First Contentful Paint (FCP)](/product/performance/web-vitals/#first-contentful-paint-fcp) measures the time for the first content to render in the viewport.
+[First Contentful Paint (FCP)](/product/performance/web-vitals/web-vitals-concepts/#first-contentful-paint-fcp) measures the time for the first content to render in the viewport.
 
 - **Type:** duration
 
 ### `measurements.fid`
 
-[First Input Delay (FID)](/product/performance/web-vitals/#first-input-delay-fid) measures the response time when the user tries to interact with the viewport.
+[First Input Delay (FID)](/product/performance/web-vitals/web-vitals-concepts/#first-input-delay-fid) measures the response time when the user tries to interact with the viewport.
 
 - **Type:** duration
 
 ### `measurements.fp`
 
-[First Paint (FP)](/product/performance/web-vitals/#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.
+[First Paint (FP)](/product/performance/web-vitals/web-vitals-concepts/#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.
 
 - **Type:** duration
 
@@ -392,7 +392,7 @@ Returns results with a matching total number of frames.
 
 ### `measurements.lcp`
 
-[Largest Contentful Paint (LCP)](/product/performance/web-vitals/#largest-contentful-paint-lcp) measures the render time for the largest content to appear in the viewport.
+[Largest Contentful Paint (LCP)](/product/performance/web-vitals/web-vitals-concepts/#largest-contentful-paint-lcp) measures the render time for the largest content to appear in the viewport.
 
 - **Type:** duration
 
@@ -422,7 +422,7 @@ The [total stall time](/platforms/react-native/performance/instrumentation/autom
 
 ### `measurements.ttfb`
 
-[Time To First Byte (TTFB)](/product/performance/web-vitals/#time-to-first-byte-ttfb) measures the time that it takes for a user's browser to receive the first byte of page content.
+[Time To First Byte (TTFB)](/product/performance/web-vitals/web-vitals-concepts/#time-to-first-byte-ttfb) measures the time that it takes for a user's browser to receive the first byte of page content.
 
 - **Type:** duration
 
diff --git a/docs/product/session-replay/replay-details.mdx b/docs/product/session-replay/replay-details.mdx
@@ -13,7 +13,7 @@ Every replay has a detailed view that contains the embedded video player and ric
 - **Replay Player:** Video-like reproduction of a user session created from DOM snapshots. This is where you can visualize exactly what actions the user took during a user session, and how the website behaved within this specific user’s environment, including browser, latency, settings, and so on. Most importantly, you can see which actions lead to an error and take the guesswork out of debugging.
   - By default, the Session Replay SDK is configured to replace all text nodes and user input with asterisks (\*), and to remove media elements. See all privacy configuration options [here](/platforms/javascript/session-replay/privacy/).
 
-* **Breadcrumbs:** The replay breadcrumbs show when key user interactions took place, specifically: user clicks (including rage and dead clicks), user inputs, [page navigations, page loads](/product/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and the [Largest Contentful Paint (LCP)](/product/performance/web-vitals/#largest-contentful-paint-lcp) web vital. User clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays.
+* **Breadcrumbs:** The replay breadcrumbs show when key user interactions took place, specifically: user clicks (including rage and dead clicks), user inputs, [page navigations, page loads](/product/performance/transaction-summary/#what-is-a-transaction), as well as [custom breadcrumbs](/product/sentry-basics/integrate-backend/configuration-options/#breadcrumbs) set by the organization and the [Largest Contentful Paint (LCP)](/product/performance/web-vitals/web-vitals-concepts/#largest-contentful-paint-lcp) web vital. User clicks (including rage and dead clicks), are augmented with surrounding HTML source code to help users understand which event was targeted. These breadcrumbs are synced with the replay player and will auto-scroll as the video plays.
   - Some [breadcrumb types](/product/issues/issue-details/breadcrumbs/) visible in **Issue Details** are not 1:1 to the replay breadcrumbs list. The trail of events typically seen in the Issue Details page are now displayed in the Console and Network components of the **Replay Details** page.
 
 - **Timeline:** This is the section at the bottom of the **Replay Details** page that illustrates where significant events (such as errors, rage clicks, and user interactions) happen over the course of the replay. This allows users to easily scrub to key events by dragging across the timeline. It also visually conveys the amount of time that took place between events and has a zoom functionality so you can easily zoom-in to distinguish between events that happen close together.
