How To Track Page Load Time In GA4 (Google Analytics 4)

Do you want to track the loading time of pages in GA4 (Google Analytics 4)? If you’ve been using Universal Analytics, the previous version of Google Analytics, then you might also be wondering where the ‘Site Speed’ reports have gone in GA4. Currently, there is no ‘Page Timings’ report in GA4 and there are no page load time metrics either. Google might (or might not) add loading time metrics to GA4, so let’s look at how we can report on the loading time of our pages in Google Analytics using Google Tag Manager.

We’re going to travel through each step in the post, but if you would prefer to watch the page load time tutorial, here it is:

Update: we’ve made some adjustments to improve the page load time tracking since we recorded the video, so check out the updated steps below.

Before You Begin

First, you’ll need to be using Google Tag Manager (GTM) and you’ll need to have a GA4 configuration tag created in your GTM container.

Step 1: Variable

Next, you’ll need to create a custom JavaScript variable that includes the following:

Here’s what the variable looks like in GTM:

This custom JavaScript variable uses the Performance Navigation Timing API and it calculates the amount of time (in milliseconds) between the loadEventEnd and the startTime which gives us the page load time. We then take the number of milliseconds and convert it to seconds.

Tip: You could also adjust the script so that it reports milliseconds instead of seconds if you wanted more granular reporting of page loading time in Google Analytics. Here’s a version of the JavaScript that will give you milliseconds instead of seconds:

We previously used the Navigation Timing API to calculate loading time, but this has now been depreciated. This updated version has been provided by Dave in the comments below – thank you Dave!

Step 2: Trigger

The next step is to create a trigger that will fire our GA4 event tag. We’re going to create a trigger when using the ‘Window Loaded’ trigger type. We’re also going to apply a condition to the trigger, so that our tag only fires when the page load time variable has a value greater than zero. Here’s the trigger:

This tweak comes from Tappu in the comments – thank you Tappu!

Step 3: Tag

Now that we have our custom JavaScript variable that captures the page loading time and our trigger, it’s time to create our GA4 event tag. This tag will send the loading time to Google Analytics 4. Here’s the tag:

I’ve opted to name the event page_load_time, but you can name your event anything you like. I’m also sending the page load time (in seconds) to Google Analytics using the loading_time_sec parameter.

Step 4: Parameter

Now that we’ve created our custom page_load_time event, we need to register our loading_time_sec parameter in GA4.

To do this, you’ll need edit or admin permission in Google Analytics. We need to navigate to ‘Admin’, then ‘Data Display, select ‘Custom Definitions’, and choose the ‘Custom Metrics’ tab at the top.

This is where we can create a new custom metric to use the value of the parameter in our reports. Here’s the custom metric configured in GA4:

Step 5: Test and Publish

The final step is to test the tag, triggers, and variable in your GTM container.

Once you’ve loaded a page using Google Tag Assistant (aka preview mode), select the ‘Window Loaded’ data layer event on the left.

Then select the ‘Google Analytics | GA4 | Page Load Time’ tag.

You can select ‘Values’ on the top right corner to then see the value being collected by the parameter. Here’s an example of the page loading time value being sent to GA4:

When you’re ready, you can publish your container. You’ll now be tracking page loading time in GA4!

Troubleshooting Tips

Common reasons you might encounter issues tracking page load time with this solution include:

1. Data is only collected after you’ve implemented the page load time tracking solution. You won’t see page load time for your historical data, so it’s a good idea to check the date range used for the report. Ensure the date range begins after you implemented page load time tracking.
2. The page load time value isn’t appearing when previewing the container. Check that page load time is being collected correctly using Tag Assistant. If a value is unavailable in Tag Assistant, you will need to check the tag, trigger, and variable.
3. Ensure the GTM container has been published. If it’s not published, then you will see the value in Tag Assistant (and the DebugView in GA4), but you won’t be collecting data in your reports.
4. Check if you’re using a CSP (Content Security Policy) on your website. If you are, then this solution won’t work. You can find more details in Google’s developer documentation.
5. Check if you’re using a SPA (Single Page Application). This solution is not compatible with SPA’s.

Reporting on Page Load Time

Once you’re collecting page loading times into GA4, the next step is to report on the performance of your pages. There are limits to how you can do this directly inside Google Analytics, so I recommend using Looker Studio (previously Google Data Studio). However, let’s take a quick look at Google Analytics first.

Start by navigating to ‘Explore’ and create a new blank report.

I’m going to add the ‘Page Path and Screen Class’ dimension to my report, but you can use any of the page-based dimensions you like. For example, you could also use ‘Page Location’, ‘Page Title’, or ‘Landing Page’ as the dimension.

Now I’m going to add the ‘Views’ metric and the custom ‘Page Loading Time’ metric to the report.

This lets us see the loading time for the pages on our website. However, it presents the total loading time for each page. I’m expecting that Google will let us present averages for our custom metrics in the future, but currently, we need to either export our data or use Looker Studio. My preference is Looker Studio, so let’s take a look at the steps to view the average loading time using the data we’ve collected.

Using Looker Studio

First, you will need to create a report and connect your GA4 property to Looker Studio. Next, create a table and add your preferred page-based dimension. I’ve used ‘Page Path’, but again, you could use one of the other options. I suggest adding ‘Event Count’ and ‘Average Page Loading Time’ for the metrics.

Since we previously created our custom ‘Page Loading Time’ metric in Google Analytics, Looker Studio automatically provides us with the following fields to use in our reports:

• Page Loading Time which will provide the total combined loading time for your pages, just like we saw directly in Google Analytics
• Average Page Loading Time calculates the average loading time based on the custom metric we registered in Google Analytics
• Count Page Loading Time provides the total number of times the loading_time_sec parameter was collected

Finally, we need to add a filter to our chart because there might be cases where a page view has been collected without our page load time tag firing. For example, if you decided to adjust the trigger so the event doesn’t fire on every page, if there was an error, or if the page loading time was calculated as zero seconds (or less).

Here’s the filter you can create and apply to your chart in Looker Studio:

This will then give us a table that shows the average loading times for the pages on our website. You will find that Looker Studio automatically displays the loading time metric in the hours, minutes, and seconds format. If you prefer to see this reported as a number, you can click the edit icon (the small pencil icon) next to the metric and then change the ‘Type’ from ‘Duration’ to ‘Number’. This can be easier to read and interpret.

That’s it! You’re now tracking and reporting page loading time in GA4, Google Analytics 4, and Looker Studio using Google Tag Manager. When you’re ready, you can learn more about Google Analytics and Google Tag Manager in our GA4 Course and GTM Course.