Page Load Time Tracking in GA4

The ‘Site Speed,’ ‘Page Timings’ reports, and the ‘Avg. Page Load Time (s)’ metric, which are available in Universal Analytics, are not present in Google Analytics 4. Google adds new reports and metrics with updates every day, but currently, you cannot track the loading time of your pages in GA4. However, by using Google Tag Manager, we can create a report about the page loading time in GA4.

Step 1: Variables

We are creating a custom JavaScript variable. (Page Load Time)

This JavaScript variable will utilize the Performance Navigation Timing API. With this API, we will calculate the time between loadEventEnd and startTime (in milliseconds), providing us with the page load time. We then convert the obtained number from milliseconds to seconds.

Step 2: Triggers

In the next step, we will create a trigger that will activate our GA4 tag using the ‘Window Loaded’ trigger type. To our trigger, we add a condition to trigger only if the ‘Page Load Time’ variable has a value greater than zero.

Step 3: Tags

Now that we have created our custom JavaScript variable capturing page load time and our trigger, it’s time to create our GA4 event tag. With this tag, the page load time will be sent to Google Analytics 4.

Step 4: Custom Metric Parameter

After creating our ‘page_load_time’ event, we need to register our ‘loading_time_sec’ parameter as a custom metric in GA4.

You can add this in Google Analytics 4 by going to ‘Admin’ -> ‘Data View’, ‘Custom Definitions’ -> ‘Custom Metrics’ tab.

Step 5: Test and Publish

The final step is to test our GTM container. After loading a page from our website using Google Tag Assistant, select the ‘Window Loaded’ dataLayer event on the left.

Then select the ‘GA4 Event – Page Load Time’ tag.

Now the Google Tag Manager container can be published. Follow the steps below to track your page load time in GA4.

Page Load Time Reporting

We will be able to prepare our reports from GA4 -> Explore section and Looker Studio. In our blog post, we will prepare our report via Looker Studio. Let’s create a table and add ‘Page Path’ as the dimension. I used ‘Page Path,’ but other page-based dimensions can be added as well. Add ‘Event Count’ and ‘Average Page Load Time’ as metrics.

Later, we need to add a filter because there might be cases where the Page Load Time tag is not triggered during a page view. For example, if the event is set not to trigger on every page, if there was an error, or if the page load time was measured as zero seconds (or less), etc. We want the report to filter only for cases where the ‘page_load_time’ event occurred.

This will provide a table showing the average loading times for the pages on your website.

Now, using Google Tag Manager, we can track and report page load time in Google Analytics 4 and Looker Studio.