How to Check Page Speed in Google Analytics 4

A slow website can frustrate visitors and hurt your search rankings, but pinpointing which pages are the problem isn't always straightforward. Google Analytics 4 handles page speed data differently than its predecessor, Universal Analytics, so finding these crucial metrics isn't as simple as opening a pre-built report. This guide will walk you through exactly how to capture and analyze page speed performance directly within GA4.

Why Is Page Speed So Important?

Before we get into the "how," let's quickly touch on the "why." Site speed isn't just a technical metric for developers to worry about, it has a direct impact on your business's success.

• User Experience: Seconds, and even milliseconds, matter. A slow-loading page creates a poor experience, causing users to bounce back to the search results and find a faster competitor.
• SEO Rankings: Google has explicitly stated that page experience is a ranking factor. The signals that measure this experience are called Core Web Vitals, which are direct measurements of loading performance, interactivity, and visual stability.
• Conversion Rates: A faster page almost always leads to better conversion rates. Whether you want a user to buy a product, fill out a form, or subscribe to a newsletter, reducing friction from slow load times helps you achieve your goals.

Finding Page Speed Metrics in GA4 (and Why It's Tricky)

If you're coming from Universal Analytics (UA), you might remember the convenient "Site Speed" reports that were available out of the box. UA automatically collected timing data like Page Load Time, Server Response Time, and more.

Google Analytics 4 does not automatically track page speed metrics in the same way.

There is no built-in, dedicated "Page Speed" report in the standard GA4 interface. GA4's data model is event-based, focusing on user interactions rather than session-based pageviews. While this model is more flexible, it means we need to do a little setup work to get actionable page speed data into the platform.

The best and most comprehensive way to do this is by using Google Tag Manager (GTM) to capture Core Web Vitals and send them to GA4 as custom events.

How to Track Core Web Vitals in GA4 with Google Tag Manager

Google Tag Manager (GTM) is a free tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website without having to modify the code. It is the perfect partner for sending rich, custom data to GA4.

We'll set up GTM to capture the three Core Web Vitals and send them to GA4:

• Largest Contentful Paint (LCP): Measures loading performance. It marks the point in the page load timeline when the main content has likely loaded.
• First Input Delay (FID): Measures interactivity. It quantifies the experience users feel when trying to interact with a non-responsive page.
• Cumulative Layout Shift (CLS): Measures visual stability. It quantifies how much unexpected layout shift affects the user's experience.

Step 1: Deploy the Web Vitals JavaScript

First, we need to add code to your site that can measure the Core Web Vitals. The easiest way to do this is with a Custom HTML tag in GTM that injects the necessary JavaScript library.

1. In Google Tag Manager, navigate to Tags > New.
2. Give your tag a name, like "CWV - JavaScript Loader".
3. Click Tag Configuration and choose Custom HTML.
4. Copy and paste the following code into the HTML box. This script loads a small library and pushes the Web Vitals metrics into the data layer, a GTM structure that holds information we can use.

<script type="text/javascript">
(function(){
var gtm_d = ["lcp","fid","cls"],
var gtm_dl = function(name, val, id) {
 window.dataLayer.push({
   'event': 'web-vitals',
   'metric_name': name,
   'metric_value': val,
   'metric_id': id
 })
},
var gtm_l,gtm_r,gtm_r = function(e){
 gtm_dl((gtm_l=e.name.toLowerCase()), e.value, e.id)
},(function(d,s){
 s=d.createElement('script'),
 s.src='https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.iife.min.js',
 s.onload=function(){
   for(var i in gtm_d){
     webVitals['on'+gtm_d[i].toUpperCase()](gtm_r, {reportAllChanges: true}),
   }
 }
 d.head.appendChild(s),
})(document)
})(),
</script>

1. Under Triggering, select the All Pages trigger (usually named something like "Initialization - All Pages"). You want this code to load on every page.
2. Click Save.

Step 2: Create Data Layer Variables in GTM

The code in Step 1 sends three key pieces of information to the data layer: the metric name (LCP, FID, or CLS), its value, and a unique ID. Now, we need to turn these into variables within GTM so we can use them.

For each metric (name, value, id), you will create a new variable:

1. Go to Variables > User-Defined Variables > New.
2. Configure three separate variables as follows:

Variable 1: Metric Name

• Variable Name: dlv - metric_name
• Variable Type: Data Layer Variable
• Data Layer Variable Name: metric_name
• Click Save.

Variable 2: Metric Value

• Variable Name: dlv - metric_value
• Variable Type: Data Layer Variable
• Data Layer Variable Name: metric_value
• Click Save.

Variable 3: Metric ID

• Variable Name: dlv - metric_id
• Variable Type: Data Layer Variable
• Data Layer Variable Name: metric_id
• Click Save.

Step 3: Create a Trigger for the Custom Event

Next, we need a trigger that fires every time our CWV script pushes the web-vitals event to the data layer.

1. In GTM, go to Triggers > New.
2. Name your trigger something clear, like "Event - web-vitals".
3. For Trigger Configuration, choose the Custom Event type.
4. In the Event name field, enter web-vitals.
5. Leave it set to "All Custom Events."
6. Click Save.

Step 4: Create the GA4 Event Tag

You have the data and a trigger, now it's time to create the tag that sends this information to Google Analytics 4.

1. Navigate to Tags > New.
2. Name your tag "GA4 - Core Web Vitals".
3. For Tag Type, select Google Analytics: GA4 Event.
4. Select your main GA4 Configuration Tag.
5. For Event Name, enter core_web_vitals. This is how the event will appear in your GA4 reports.
6. Expand the Event Parameters section and add three rows:

1. Attach the trigger you created in the last step ("Event - web-vitals").
2. Click Save.

Finally, click Submit in the top right of GTM and Publish your container to set your changes live.

How to Report on Page Speed in GA4

After a day or two, data will begin to flow into GA4. But before you can analyze it effectively, you have one more crucial step: registering your new parameters as custom definitions.

Register Custom Dimensions and Metrics

GA4 needs to know how to interpret the custom parameters you're sending with your event.

1. In GA4, go to Admin (the gear icon in the bottom left).
2. Under the Property column, click on Custom definitions.
3. Click the Create custom dimensions button and create the following two dimensions (one at a time):

1. Now, switch to the Custom metrics tab.
2. Click Create custom metrics and create one metric:

Build a Report in GA4 Explorations

With everything set up, you can now build a flexible report in the Explorations section to see which pages are slowest.

1. Navigate to Explore in GA4's left-hand menu.
2. Start a new Free form exploration.
3. In the Variables column on the left:

• Under Dimensions, click the + sign and import Page path and screen class and metric_name.
• Under Metrics, click the + sign and import metric_value and Event count.

1. In the Tab Settings column:

• Drag Page path and screen class and metric_name from the Variables column to the Rows section.
• Drag metric_value and Event count to the Values section. For metric_value, make sure it's showing the Average. You can change this by clicking on the metric in the Values box.

1. In the Filters section, create a filter for metric_name contains "LCP". This will show you the LCP data for each page on your website. You can change this to "FID" or "CLS" to analyze other vitals.

You will now have a detailed report showing the average LCP score for every page on your site, helping you identify and prioritize pages for optimization.

Final Thoughts

Tracking site speed in GA4 takes more upfront configuration than in Universal Analytics, but the result is a flexible and powerful reporting system. By leveraging Google Tag Manager to capture Core Web Vitals, you can build custom, actionable performance reports right alongside your primary analytics data, giving you a complete view of user experience.

Setting up tracking in GTM and building reports in GA4's Exploration tool is powerful, but it involves many manual steps. At Graphed, we simplify this entirely. After connecting your GA4 account in one click, you can just ask in plain English for the report you want, like, "Show me a list of my slowest pages based on LCP scores from the last month." We instantly build the corresponding analysis and visualization for you, turning hours of configuration into a 30-second conversation and letting you skip straight to the insights.