Guide to monitoring core web vitals

Core web vitals are Google’s metrics to gauge overall user experience of your site, which can influence your site’s SEO rankings and give you valuable insight into how users perceive your business.

This is why it’s important to monitor your site’s core web vitals and take action on low scores - and New Relic can help you do that!

What are core web vitals?

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 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.

Want to learn more about how core web vitals are collected? Check out our self-paced core web vitals training course. It's free!

Monitor core web vitals with New Relic

Now that you're familiar with core web vitals, it's time to monitor them with New Relic.

If you've already monitoring your browser app with New Relic, go to one.newrelic.com > Browser > (select an app) > Monitor > Web vitals.

If you're new to New Relic, create a free New Relic account and install our browser agent (it takes around 5 minutes!). Then come back here to learn how to navigate the Web vitals page.

Drill down into specific pages

If you want to get insights into an important page, like an ecommerce checkout page, click on a page in the Page URL table. You'll see a breakdown of what's contributing to core web vitals for that specific page. Use this data to understand how your end users are experiencing your most important pages and what’s contributing to poor scores.

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.

Filtering examples

Though you can filter by nearly any key attribute, read on for some useful examples.

Filter 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 Web vitals:

1. In the Filter by field, set Attribute todeviceType and Value to desktop.
2. In a duplicate browser, set Attribute todeviceType and Value to mobile, then compare the results.

Filter by user information

Let's say an end-user complained about performance issues on your site’s checkout page on November 1, around 12pm, and you want to see what happened for this user. To investigate this in Web vitals:

1. Set the time range to November 1, between 11am and 1pm.
2. In the Page URL table, click on the checkout page URL.
3. In the Filter by field, set Attribute to userID and Value to user ID.

Filter 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 Web vitals:

1. Set the time range to November 10 at between 7am and 9am.
2. In the Page URL table, click on the home page URL.
3. In the Filter by field, set Attribute to elementTagName and Value to IMG.

Troubleshoot missing data

Are you seeing missing data in Web vitals? See Missing data on the Web vitals page for some solutions.