Merge pull request #13614 from newrelic/performance-benchmarks

performance benchmarks edits

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

@@ -19,6 +19,8 @@ import browserPageUrlView from 'images/browser_screenshot-full_page-url-view.web
 
 import browserFilteredWebVitals from 'images/browser_screenshot-full_filtered-web-vitals.webp'
 
+import browserSessionTraces from 'images/browser_screenshot-crop_session-traces.gif'
+
 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.
 
 ## Objectives [#objectives]
@@ -29,10 +31,14 @@ This tutorial walks you through using New Relic to break down your core web vita
 * Understand how core web vitals translate into site performance.
 * Filtering data in New Relic to find what's contributing to your score.
 
-## Find core web vitals in New Relic [#find]
+## Understand core web vitals [#understand]
 
 If you've already monitoring your browser app with New Relic, go to **[one.newrelic.com](https://one.newrelic.com/all-capabilities) > Browser > (select an app) > Monitor > Web vitals**. 
 
+<Callout variant="important">
+For some customers, **Web vitals** may be located under **More views** (instead of under **Monitor**).
+  </Callout>
+
 <img
   title="Track core web vitals site-wide, favorite key webpages, and filter by time period."
   alt="overview of the web vitals page"
@@ -42,12 +48,6 @@ If you've already monitoring your browser app with New Relic, go to **[one.newre
   **[one.newrelic.com](https://one.newrelic.com/all-capabilities) > Browser > (select an app) > Monitor > Web vitals**: Track core web vitals site-wide, favorite key webpages, and filter by time period.
 </figcaption>
 
-<Callout variant="important">
-For some customers, **Web vitals** may be located under **More views** (instead of under **Monitor**).
-  </Callout>
-
-## Understand core web vitals [#understand]
-
 The three core web vitals are:
 * [Largest contentful paint](https://web.dev/lcp/): measures loading performance
 * [First input delay](https://web.dev/fid/): measures interactivity between user input and browser response
@@ -202,14 +202,23 @@ Let's say your organization recently updated images on the site’s home page on
     </Collapser>
 </CollapserGroup>
 
-## What's next? [#next]
+## Get more context with session traces [#session-traces]
+
+New Relic captures data about a user's session on a given page. Session traces are randomly sampled, letting you view how a user experienced page load timing issues, JavaScript events, or other errors. 
+
+<img
+    title="Session traces in the New Relic UI"
+    alt="Session traces in Browser UI lets you look at real user sessions for a given page"
+    src={browserSessionTraces}
+/>
 
-This tutorial covered some actions you can take with your core web vitals. You have some options for your next steps.
+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:
 
-* If you're noticing missing data in **Web vitals**, then check out [Missing data on the Web vitals page](/docs/browser/new-relic-browser/troubleshooting/missing-data-on-web-vitals-page) for some solutions.
-* If you want to go deeper with core web vitals, you can learn more with our free [self-paced core web vitals training course](https://learn.newrelic.com/self-paced-core-web-vitals/).
+1. From the **Web vitals** 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 **Page URLs** section of the **Web vitals** 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 **Session traces** 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.  
 
-Core web vitals are an important resource for improving your site, but you can get even more detailed about what's causing poor user experience.  
+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. 
 
 <UserJourneyControls
     nextStep={{path: "/docs/tutorial-app-performance/fixing-high-latency", title: "Next step", body: "Locate latency issues across your services"}}

src/content/docs/tutorial-app-performance/performance-benchmarks.mdx

@@ -8,19 +8,21 @@ redirects:
 
 import sonicSliUiOverview from 'images/sonic_screenshot-full_sli-ui-overview.webp'
 
-## Objectives
+Your system architecture is made up of hosts, apps, and services that affect and depend on each other. If one part of your architecture underperforms, it can later lead to critical system outages. Service levels, however, let you apply thresholds that make keeping track of your system easier. If performance on a service exceeds or falls below a given threshold, you receive an alert. Here are the layers to service levels: 
 
-By the end of this tutorial, you will:
+* A service level is made up of service level objectives (SLOs). SLOs are goals that represent how you expect your services to behave. 
+* Your SLOs are defined by service level indicators (SLIs). SLIs are key measurements and metrics that determine service availability.
+* On top of these objectives an indicators are alerts. These notify you when your services fail to meet your SLOs. 
 
-* Understand service level indicators (SLIs) and service level obectives (SLOs).
-* Have created and defined SLIs and SLOs for your frontend experience.
-* Have alerts set up to warn of any SLI or SLO breaches so you can react before they impact your users.
+## Objectives [#objectives]
 
-## Intro 
+This tutorial walks you through creating performance benchmarks with service levels. By the end of the tutorial, you'll have these tasks completed:
 
+* Understand the relationship between service level indicators (SLIs) and service level obectives (SLOs).
+* Create and defined SLIs and SLOs for your frontend experience.
+* Set up alerts so you know when your services have a drop in performance.
 
-
-Let's look at the difference between service levels, SLOs and SLIs. Service levels describe services provided to users within a given period of time, in measurable terms. Service level objectives (SLOs) are the goals set for the availability expected out of a system. Service level indicators (SLIs) are the key measurements and metrics to determine the availability of a system. 
+## Define your service levels [#define]
 
 Defining and managing your service levels following the steps below provides the ability to: 
 
@@ -29,7 +31,7 @@ Defining and managing your service levels following the steps below provides the
 * Iterate and improve: With full-stack context and automation through open-source infrastructure-as-code tools like Terraform, teams have insight into how specific nodes or services impact system reliability and can quickly take control over their performance. Custom views for both service owners and business leaders drive operational efficiency and lead to better reporting, alerting, and incident management processes.
 * Standardize reliability: Cross-organizational teams have a unified, transparent view of service reliability, and can better comply with customer-facing SLAs. SLO compliance metrics and error budgets give organizations a way to report on reliability and implement changes across applications, infrastructure, and teams in a cohesive fashion.
 
-Let's get started with creating your frontend performance benchmarks:
+## Create your performance benchmarks [#create]
 
 <Steps>
     <Step>
@@ -275,13 +277,15 @@ Let's get started with creating your frontend performance benchmarks:
     Define the SLI you chose in step one in this pane. For example if you chose to define an SLI for browser app success, you would use the following queries:
 
     **Query for valid events**:
-    ```
+
+    ```sql
     FROM: PageView
     WHERE: entityGuid = '{entityGuid}'
     ```
 
     **Query for bad events**:
-    ```
+
+    ```sql
     FROM: JavaScriptError
     WHERE: entityGuid = '{entityGuid}' AND firstErrorInSession IS true
     ```
@@ -293,9 +297,11 @@ Let's get started with creating your frontend performance benchmarks:
 
 ## Next steps
 
-Congratulations! You've completed our journey on how to use New Relic to improve your site's performance! Ready to learn more about New Relic features? See our introductory docs on some of our most impactful features below:
+Congratulations! You've completed our journey on how to use New Relic to improve your site's performance! Ready to learn more about using New Relic like a pro? See some of our other tutorials:
+
+<DocTiles>
+    <DocTile title='My app is slow' number='1' path="/docs/tutorial-app-slow/root-causes/">Is your app slow? Check out our tutorial to diagnose and resolve app slowness.</DocTile>
+    <DocTile title='Prepare for peak demand events' number='2' path="/docs/tutorial-peak-demand/get-started/">Prepare your teams for a game day so your app stays live when demand peaks.</DocTile>    
+    <DocTile title='Create alerts' number='3' path="/docs/tutorial-create-alerts"> Stay in the loop about your system's health by creating high quality alerts.</DocTile>
+</DocTiles>
 
-* [Introduction to browser monitoring](/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring)
-* [Introduction to alerts](/docs/alerts-applied-intelligence/overview/)
-* [Introduction to synthetics](/docs/synthetics/synthetic-monitoring/using-monitors/intro-synthetic-monitoring/)
-* [Intro to service level management](/docs/service-level-management/intro-slm/)