Merge pull request #21402 from newrelic/Session-Replays-section-core-webvitals

Added Session replay section in Monitor your core web vitals doc

Author: adutta-newrelic

src/content/docs/tutorial-improve-site-performance/guide-to-monitoring-core-web-vitals.mdx

@@ -1,10 +1,10 @@
 ---
-title: Monitor your core web vitals
+title: Monitor your Core Web Vitals
 tags:
   - Browser
   - Browser monitoring
   - Guides
-metaDescription: "A guide to monitor Google's core web vitals."
+metaDescription: "A guide to monitor Google's Core Web Vitals."
 redirects:
 - /docs/browser/new-relic-browser/guides/guide-to-monitoring-core-web-vitals/
 - /docs/browser/new-relic-browser/guides/guide-to-core-web-vitals
@@ -16,17 +16,17 @@ redirects:
 freshnessValidatedDate: 2024-03-21
 ---
 
-Core web vitals are Google’s metrics that gauge overall user experience. They give valuable insight into how users view your business, which can influence your site’s SEO rankings. By having a score that captures user experience, you can take action on specific problems rather than guessing at what your site needs.
+Core Web Vitals (CWV) are Google’s metrics that gauge overall user experience. They give valuable insight into how users view your business, which can influence your site’s SEO rankings. By having a score that captures user experience, you can take action on specific problems rather than guessing at what your site needs.
 
 ## Objectives [#objectives]
 
-This tutorial walks you through using New Relic to break down your core web vitals. By the end of the tutorial, you'll have these tasks completed:
+This tutorial walks you through using New Relic to break down your CWV. By the end of the tutorial, you'll have these tasks completed:
 
-* Find core web vitals in New Relic.
-* Understand how core web vitals translate into site performance.
+* Find CWV in New Relic.
+* Understand how CWV translates into site performance.
 * Explore your New Relic data to identify what's contributing to your score.
 
-## Learn about core web vitals [#learn]
+## Learn about CWV [#learn]
 
 Google measures overall website performance by these three metrics:
 
@@ -123,7 +123,7 @@ Each web vital has the following thresholds to help you track your app's perform
 <Callout variant="tip">
   ### How is the CLS score calculated?
 
-  The cumulative layout shift score is a unitless value between 0 and infinity, not a time-based measurement like the other core web vitals. It reflects the sum of the impact of unexpected layout shifts that occur during the loading process of a webpage. Here's how the CLS score is calculated:
+  The cumulative layout shift score is a unitless value between 0 and infinity, not a time-based measurement like the other CWVs. It reflects the sum of the impact of unexpected layout shifts that occur during the loading process of a webpage. Here's how the CLS score is calculated:
 
   * Layout shift score: This considers two factors:
     * Fraction of viewport shifted: How much of the visible area of the page (viewport) is affected by the layout shift.
@@ -133,11 +133,11 @@ Each web vital has the following thresholds to help you track your app's perform
 
 <DNT>**Good**</DNT> web vitals can help your organization save money and increase SEO. <DNT>**Poor**</DNT> or <DNT>**Needs improvement**</DNT> can reflect negative user perceptions of your organization, which could result in dissatisfied customers or lost business opportunities.
 
-New Relic leverages Google's [`web-vitals` API library](https://github.com/GoogleChrome/web-vitals) to gather web vitals in their raw state, without introducing additional calculations. To learn more about why core web vitals matter and how they're calculated, see the web.dev article [User-centric performance metrics](https://web.dev/articles/user-centric-performance-metrics).
+New Relic leverages Google's [`web-vitals` API library](https://github.com/GoogleChrome/web-vitals) to gather web vitals in their raw state, without introducing additional calculations. To learn more about why CWVs matter and how they're calculated, see the web.dev article [User-centric performance metrics](https://web.dev/articles/user-centric-performance-metrics).
 
-## Find core web vitals in New Relic [#view-data-in-nr]
+## Find CWVs in New Relic [#view-data-in-nr]
 
-Core web vitals are embedded into many New Relic features, but the best way to view web vitals at a high level is:
+CWVs are embedded into many New Relic features, but the best way to view web vitals at a high level is:
 
 1. Go to <DNT>**[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Browser**</DNT>.
 2. Select an app.
@@ -148,26 +148,26 @@ Core web vitals are embedded into many New Relic features, but the best way to v
    <img
      title="Track core web vitals site-wide, favorite key webpages, and filter by time period."
      alt="overview of the web vitals page"
-     src="/images/browser_screenshot-full_web-vitals.gif"
+     src="/images/webvitalssessionreplay.gif"
    />
 
 ### Drill down into specific pages [#drill-down]
 
-If you want insight into an important page — for example, an ecommerce checkout page — find it in the <DNT>**Page URL**</DNT> table. You'll see a breakdown of what's contributing to core web vitals, which you can use to understand how your end users are experiencing those areas of your site. For example, if you notice a pattern of poor performance from Chrome browsers, you can curate any future improvements to that user base.
+If you want insight into an important page — for example, an ecommerce checkout page — find it in the <DNT>**Page URL**</DNT> table. You'll see a breakdown of what's contributing to CWVs, which you can use to understand how your end users are experiencing those areas of your site. For example, if you notice a pattern of poor performance from Chrome browsers, you can curate any future improvements to that user base.
 
 <img
-  title="Click on a page URL to see page-specific web vitals."
+  title="Click a page URL to see page-specific web vitals."
   alt="Click on a page URL to see page-specific web vitals."
   src="/images/browser_screenshot-full_page-url-view.webp"
 />
 
 <figcaption>
-  <DNT>**[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Browser > (select an app) > Monitor > Web vitals > (click on a page URL)**</DNT>: View a breakdown of core web vitals for the most impactful webpages.
+  <DNT>**[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Browser > (select an app) > Monitor > Web vitals > (click a page URL)**</DNT>: View a breakdown of CWVs for the most impactful webpages.
 </figcaption>
 
 ### Filter by key attributes [#key-attributes]
 
-If you want to investigate something particular, like how a backend change or performance issue impacted core web vitals, you can use the <DNT>**Filter by**</DNT> tool to filter any key attribute.
+If you want to investigate something particular, like how a backend change or performance issue impacted CWVs, you can use the <DNT>**Filter by**</DNT> tool to filter any key attribute.
 
 <img
   title="Use the filter tool to filter core web vitals by key attributes"
@@ -186,7 +186,7 @@ Though you can filter by nearly any key attribute, read on for some useful examp
     id="device"
     title="By device type"
   >
-    Let's say you want to compare desktop vs. mobile performance and how core web vitals differ between the two platforms. To investigate this in <DNT>**Web vitals**</DNT>:
+    Let's say you want to compare desktop vs. mobile performance and how CWVs differ between the two platforms. To investigate this in <DNT>**Web vitals**</DNT>:
 
     1. In the <DNT>**Filter by**</DNT> field, set <DNT>**Attribute**</DNT> to`deviceType` and <DNT>**Value**</DNT> to `desktop`.
     2. In a duplicate browser, set <DNT>**Attribute**</DNT> to`deviceType` and <DNT>**Value**</DNT> to `mobile`, then compare the results.
@@ -214,10 +214,10 @@ Though you can filter by nearly any key attribute, read on for some useful examp
     id="resource"
     title="By resource"
   >
-    Let's say your organization recently updated images on the site’s home page on November 10 at 8am, and you want to see if the changes impacted core web vitals. To investigate this in <DNT>**Web vitals**</DNT>:
+    Let's say your organization recently updated images on the site’s home page on November 10 at 8am, and you want to see if the changes impacted CWVs. To investigate this in <DNT>**Web vitals**</DNT>:
 
     1. Set the time range to November 10 at between 7am and 9am.
-    2. In the <DNT>**Page URL**</DNT> table, click on the home page URL.
+    2. In the <DNT>**Page URL**</DNT> table, click the home page URL.
     3. In the <DNT>**Filter by**</DNT> field, set <DNT>**Attribute**</DNT> to `elementTagName` and <DNT>**Value**</DNT> to `IMG`.
   </Collapser>
 </CollapserGroup>
@@ -232,14 +232,29 @@ New Relic captures data about a user's session on a given page. Session traces a
   src="/images/browser_screenshot-crop_session-traces.gif"
 />
 
-We recommend using session traces to find patterns across different user sessions. If one of your core web vitals scores could be improved, one option is to look at session traces to see what common attributes are shared across different user sessions. Here's an example of how session traces can help you improve your site:
+We recommend using session traces to find patterns across different user sessions. If one of your CWVs scores could be improved, one option is to look at session traces to see what common attributes are shared across different user sessions. Here's an example of how session traces can help you improve your site:
 
 1. From the <DNT>**Web vitals**</DNT> tab, click the page that's performing poorly. Using the above image as an example, you see that your site has a good overall LCP score, but you also notice some of your individual pages need improvement.
 2. Looking at the <DNT>**Page URLs**</DNT> section of the <DNT>**Web vitals**</DNT> page, you see that your homepage URL has an LCP score of greater than four seconds. Is this due to an error that affects all users, or is it only affecting one kind of user? For example, if you notice that users with one version of Chrome or a certain operating system are experiencing slow page load times, you can better troubleshoot the specific cause of an issue.
 3. A new window will populate when you click the URL you want to troubleshoot. You notice that your LCP score is much higher than your site's overall LCP score. Scrolling to the <DNT>**Session traces**</DNT> section at the bottom of this page, you see various samples of real user sessions. These sessions can give you more granular detail about how that user experienced AJAX requests, issues related to DOM loading, JavaScript events or other errors.
 
 Data from randomized sessions helps you find patterns across hundreds or thousands of user interactions with a web page. If a pattern appears in this randomly selected data, you can have more confidence that your plan to resolve an issue will improve your page scores.
 
+## Enhance your understanding with session replays [#session-replays]
+
+If a poor LCP or a high CLS has been identified, session replays provide a visual record of what occurred, helping to quickly pinpoint the exact element or event causing the problem.
+
+Here's an example of how session replays can help you improve your site:
+
+1. Identify a performance issue: On the <DNT>**Web vitals**</DNT> page, click the relevant URL to open its detailed performance view. This action redirects to a detailed view of the web vitals information for that page. Examine the CWV scores and look for any with the <DNT>**Needs improvement**</DNT> or <DNT>**Poor**</DNT> labels. You can also filter the results by device type or browser, as performance issues can vary significantly across platforms. Understanding these details helps pinpoint specific areas for optimization.
+2. Access relevant replays: Click the number in the <DNT>**Session replays**</DNT> column for the data point you're investigating. This action automatically filters the replays to display sessions that experienced the specific performance issue. For example, clicking on the session replay count for a page with a poor LCP will present a list of sessions where the LCP was slow.
+3. Watch and diagnose: Watch the video recordings to gain a visual understanding of the problem. You might discover:
+    * LCP issues: A large hero image or video that loaded slowly, causing a blank screen for several seconds.
+    * CLS issues: An advertisement or third-party content that loaded late, causing the page content to unexpectedly shift.
+    * INP issues: A slow-responding button or interactive element can cause frustration.
+
+By combining the technical data from session traces with the visual context of session replays, you can develop a comprehensive plan to resolve performance issues and significantly enhance your end-user experience.
+
 <UserJourneyControls
   nextStep={{path: "/docs/tutorial-improve-site-performance/fixing-high-latency", title: "Next step", body: "Find latency issues across your services"}}
   previousStep={{path: "/docs/tutorial-improve-site-performance/improve-website-performance", title: "Previous step", body: "Instrument your site"}}