New Relic Inc.

09/17/2021 | News release | Distributed by Public on 09/17/2021 14:15

Diagnosing slow page load times on your website with histograms and heatmaps

Are you monitoring the performance of your website and ensuring that your pages are loading quickly? If not, you should be. Users will abandon a website within seconds if it doesn't load.

In this tutorial, you will learn how to set up continuous monitoring of key metrics that measure user experience, including Google's Core Web Vitals. In just a few minutes, you'll have visibility into how each of your pages are performing. You will be able to create histograms and heatmaps to look at both the overall performance of your site and to drill down into the performance of specific pages. That way, you can fix your slowest pages and keep your end users (and your software teams) happy.

You need to sign up for a free New Relic account to use Browser monitoring, which automatically monitors and visualizes Core Web Vitals for you, and also allows you to create custom visualizations. You can integrate your website with New Relic in a few quick steps. That's covered in this tutorial, too.

What are Core Web Vitals?

First, let's take a look at Core Web Vitals, which Google introduced in 2020.

Core Web Vitals consists of three metrics that measure the user experience for web pages, including how fast they are. They aren't just important for user experience-they will also affect the SEO of your pages if they are subpar, which will affect your site traffic negatively.

Largest Contentful Paint (LCP for short) measures how long it takes a page's main content to load. Largest Contentful Paint focuses on the largest piece of content that appears on the page without any user scrolling. It should take less than 2.5 seconds for the Largest Contentful Paint to load.

First Input Delay (also known as FID) measures how long it takes for a webpage to respond to the user's first interaction on that page. For instance, if a user clicks a button that activates a modal, FID measures the time between the button click and the modal appearing on the page. Good experiences should have an FID of 100 milliseconds or less.

Cumulative Layout Shift (CLS for short) measures the visual stability of a page. As a page loads, the elements can shift, making it harder to click links and navigate. Ideally, a page should be stable and not shift. The CLS score for a page should be 0.1 or less.

There are also quite a few non-core web vitals such as First Paint, which measures how long it takes the first content on a page to load.

These metrics give you deep insight into how fast and responsive a page is. Wouldn't it be nice to continuously monitor these vitals for your website and have cool visualizations that help you see exactly how your site is performing? You can do that by setting up a few heatmaps and histograms in New Relic.

All of these Core Web Vitals are included directly in New Relic One's Real User Monitoring (RUM) capabilities.

Visualizing Core Web Vitals with heatmaps and histograms

Let's take a quick look at some New Relic visualizations of Core Web Vitals, because they demonstrate exactly what you can do once you are done with this tutorial.