Skip to content

Commit

Permalink
feat(content): add session traces content
Browse files Browse the repository at this point in the history
  • Loading branch information
akristen committed Jun 30, 2023
1 parent 1492b8c commit 369808f
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -204,16 +204,21 @@ Let's say your organization recently updated images on the site’s home page on

## 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 and recorded in New Relic, 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}
/>

## What's next? [#next]

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, 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, do you notice that users with one version of Chrome or a certain operating system are experiencing slow page load times?
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. Are users on a certain Chrome version experiencing the same error? Is it related to a specific AJAX request or DOM loading?

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"}}
Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 369808f

Please sign in to comment.