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
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:
- Find core web vitals in one.newrelic.com.
- Understand how core web vitals translate into site performance.
- Filtering data in New Relic to find what's contributing to your score.
Understand core web vitals
If you've already monitoring your browser app with New Relic, go to one.newrelic.com > All capabilities > Browser > (select an app) > Monitor > Web vitals.
Important
For some customers, Web vitals may be located under More views (instead of under Monitor).
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.
The three core web vitals are:
- Largest contentful paint: measures loading performance
- First input delay: measures interactivity between user input and browser response
- Cumulative layout shift: measures visual stability
Each web vital has the following thresholds to help you track your app's performance and SEO:
Good | Needs improvement | Poor | |
|---|---|---|---|
Largest contentful paint | <=2.5s | <=4s | >4s |
First input delay | <=100ms | <=300ms | >300ms |
Cumulative layout shift | <=0.1 | <=0.25 | >0.25 |
Good web vitals can help your organization save money and increase SEO. Poor or Needs improvement can reflect negative user perceptions of your organization, which could result in dissatisfied customers or lost business opportunities.
Drill down into specific pages
If you want insight into an important page — for example, an ecommerce checkout page — find it in the Page URL 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.
one.newrelic.com > All capabilities > Browser > (select an app) > Monitor > Web vitals > (click on a page URL): View a breakdown of core web vitals for the most impactful webpages.
Filter by 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 Filter by tool to filter any key attribute.
one.newrelic.com > All capabilities > Browser > (select an app) > Monitor > Web vitals > (add filters): Use the filter tool to filter core web vitals by key attributes.
Though you can filter by nearly any key attribute, read on for some useful examples.
Get more context with 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.
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:
- 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.
- 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.
- 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.
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.