How to Diagnose Load Times on Your Site

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.

The Browser dashboard in the previous picture is immediately available once you sign up for New Relic and instrument your application. The dashboard includes Core Web Vitals at a glance and answers immediate questions about your site’s performance.

In addition, as part of New Relic One’s unified data platform, you can create custom views to find performance outliers to help you drill down into slow page load times and which URLs are impacting performance.

The previous visualization shows a histogram of the First Paint of all the pages on a website. A histogram is similar to a bar chart, but each bar represents a range instead of a specific number. In the previous histogram, the ranges are the time it takes for each page to load. Most of the pages have their First Paint in under a second, but there are some pages that are taking more than five seconds to load, which can feel like an eternity to a user Most of your users won’t wait around that long.

To see specifically which URLs are taking too long to load, you can facet this data by URL, as shown in the following.

The previous graphic is a heatmap. A heatmap is like a histogram, only turned on its side with the X-axis representing frequency. There are orange boxes around two of the URLs for emphasis. The axis on the bottom of the heatmap shows how long each of these URLs takes to load. Darker squares indicate a higher incidence of pages loading in that specific time frame.

The two emphasized URLs have a lot of load times that are greater than five seconds. Again, that’s terrible—but with this visualization, you know exactly which pages you need to focus on to improve user experiences.

This example for First Paint, but you can quickly create additional dashboards in New Relic for any core or non-core web vital by changing the query, making it much easier to see exactly how your pages are performing. There will be more about queries later in this tutorial.

If you are just starting with New Relic, you need to set up browser monitoring, which is covered in the next section.

If you’ve already set up browser monitoring, you can skip the next section and jump right to Setting up heatmaps and histograms.

Setting up Browser monitoring and the New Relic agent

If you’re a first-time user of New Relic, you might feel like breaking into a cold sweat. Another integration? You say it’s quick to set up, but…

Don’t worry. It really is. It only takes a two-minute video to go through the whole process.

The steps are spelled out here.

1. Sign up for your free New Relic One account.
2. In your New Relic One account, click the Add more data button in the upper right corner. If you are already signed in, you can use the link above to go directly to the next page in your New Relic account.
3. On the next page, click the New Relic Browser button. Select the account you want to add the instrumentation to. If you just started with New Relic, there will only be one. Then click Continue.
4. On the Get started with New Relic Browser page that comes up, click the Copy/Paste Javascript code button in step 1: Choose a deployment method.
5. Scroll to the end of the Get started with New Relic Browser page. Enter a name for your application. You can leave everything else on its default setting for now. Click Enable.
6. Now it’s time to instrument the agent. That means copying the code and pasting it in the <head> of your HTML before any other JavaScript tags.
7. If you are already monitoring other parts of your stack with New Relic, you may want to add custom tags. Tags are key:value metadata (like labels) added to things in New Relic that you’re monitoring, and they help you organize your data at a high level. For example, you can assign tags based on teams or environments like staging or production.

That’s it. Hopefully, no sweat, cold or otherwise, was involved!

Setting up heatmaps and histograms

Once you’ve instrumented the agent (that’s a fancy way of saying “copy and paste the code”), you can start by viewing out-of-the-box metrics directly in the Browser monitoring UI. This includes important metrics like page load times, user time on site, traces, and errors to help you debug any performance issues. There’s a lot of useful information even without customization, but you can dig deeper with custom visualizations to get extra context. You can even create custom dashboards where you correlate metrics that are useful for your teams. For instance, you might want to correlate user experience with other operational and business metrics to measure impact on sales or cart values. 

This video shows you how to create histograms and heatmaps to identify poorly performing pages, and you can keep reading for a step-by-step walkthrough of the process.

Create a new dashboard for custom visualizations

To set up your own histograms and heatmaps based on Core Web Vitals, you need to create a new dashboard with a custom query. You can do so by following these steps. All of these steps are in the previous video.

1. Click on Dashboards in the nav at the top of the screen.
2. Click the + Create a dashboard button in the upper right corner. Name the dashboard, choose the account you want the dashboard to be associated with, and then click Create.
3. Click + Add a new chart, then click Add a chart from the right-hand pane.
4. You can now add a query. Select NRQL from the upper right corner of the query to write your queries. NRQL is New Relic’s SQL-like query language.

You can create dashboards for any core or non-core web vital. Let’s look at a few examples for First Paint, a non-core vital which is still essential for the user experience.

Create a custom histogram

To create a histogram, you need to use the histogram() function, which takes three arguments:

• Attribute: Examples include firstPaint and firstContentfulPaint
• Width: The entire width of the histogram, in seconds.
• Buckets: The total number of sections that should be in the histogram. Adding more buckets gives your histogram more granularity.

Here’s an example query:

SELECT histogram(firstPaint, width: 10, buckets: 10) FROM PageView SINCE 24 hours ago

The SELECT statement is required and specifies the data you want to query.

The attribute of this histogram is firstPaint. The histogram has a width of 10 seconds, so it displays all page loads that take 10 seconds or less. It has 10 buckets, so the histogram has 10 bars. We could add more bars, and hence more specificity, by adding more buckets.

The FROM clause is also required and it specifies the type of data you want to query. In the previous query, the data type is the event PageView and a timeframe of the last 24 hours is specified.

Create a heatmap to visualize Core Web Vitals for specific URLs

To visualize Core Web Vitals for individual URLs, we can use the same query as before with a facet added. Here’s the query:

SELECT histogram(firstPaint, width: 10, buckets: 10) FROM PageView SINCE 24 hours ago FACET pageUrl

A FACET adds more granularity to our query data, and you can facet by many different attributes. In this example, the attribute is pageUrl, allowing you to see the First Paint for specific URLs.

If you want to learn more about NRQL so you can create your own custom visualizations, check out the docs on NRQL syntax, clauses, and functions.

New Relic’s browser monitoring incorporates Real User Monitoring (RUM) and also measures full page lifecycle data. You can do a deeper dive with browser monitoring by checking out Introduction to browser monitoring.

Finally, if you discover that you are having issues with metrics related to Core Web Vitals, check out these tips to improve your page loading performance.

Heatmaps and histograms give you a good starting point to do some deeper investigation into your website’s performance. They are complementary charts, so using both in conjunction with each other is most effective. You can put them on your main dashboard so you can scan quickly for anomalies and make recommendations.