Did you know that you probably already have a tool for automatic analysis of your website’s performance? Google Analytics offers a Site Speed function for monitoring the loading speed of your web pages. We’ll see that while this function doesn’t provide real-time monitoring for operations like Real User Monitoring (RUM or passive monitoring) tools, it does enable global analysis.
Drawing on our years of experience, we’re going to detail the settings we recommend for analyzing the performance of your website, thanks to your Google Analytics.
1. Make sure you analyze relevant performance metrics in Google Analytics
By default, Google Analytics presents only the metrics available to your browser via Javascript. These are taken from [Navigation Timing].
The metric highlighted is page load time. However, several studies have shown that this has no strong correlation withuser experience.
We prefer to analyze the critical rendering path by looking at Avg. Document Content Loaded Time and Avg. Document Interactive Time.
2. Beware of raw measurement sampling
By default, Google Analytics measures only 1% of page views tracked on your site. You can increase this number. This default sampling rate can be increased up to a limit of 10,000 measurements per day. You therefore need to calculate your sampling ratio to measure data throughout the day.
You can increase this number in the tracking code:
[pastacode lang=”javascript” manual=”ga(‘create’%2C%20’UA-XXXX-Y’%2C%20%7B’cookieDomain’%3A%20’domain.com’%2C%20’siteSpeedSampleRate’%3A%20100%7D)%3B” message=”” highlight=”” provider=”manual”/]
So, if you have less than 10,000 page views per day, you can set a ratio of 100%. On the other hand, if you have 100,000 page views per day, we advise you to set your ratio at 10%. This will enable you to measure data over a longer period of time during the day, rather than just in the early hours of the day.
These volume limitations are something we really urge you to pay close attention to. They can prevent a really interesting use of Google Analytics. Later on, we’ll look at how to segment your users for even finer-grained webperf analysis. Be careful, however, that the segment size remains sufficiently large to avoid total volatility!
3. Focus on distributions rather than averages
By default, the Google Analytics interface displays the averages of measured metrics. However, these can be strongly influenced by extreme and minority values, unlike the median? In this respect, the median is more representative of the reality of Internet users. You can also study the 80, 90 and 95 percentiles (the median is the 50 percentile).
To get around this default average, you can look directly at the distribution curve in the distribution tab.
4. Segment your data for better analysis
To analyze your page load times, you need to segment your data in order to identify areas for improvement.
We advise you to segment your data according to the following variables:
- visitors’ country :
This first filter will enable you to look only at visits from countries of interest to your business. This will enable you to eliminate outliers for your macro analysis (bots coming from other countries at strange times, for example).
- device type:
The differences in measurement between desktop and mobile are significant and tend to be visible on all the sites we track. This can easily be explained by the power of the phones and the difference between the mobile network and ADSL or fiber. That’s why it’s best to analyze them in different segments.
- Page type or other custom dimension:
We also advise you to take advantage of your tagging plan to analyze page load times by page type. For an e-commerce site, we distinguish at least the home page, category pages / product lists and product pages.
5. User Timing tracking
Measuring only Navigation Timing is extremely limiting. Fortunately, Google Analytics also offers the possibility of taking advantage of User Timing.
[pastacode lang=”javascript” manual=”ga(‘send’%2C%20’timing’%2C%20%5BtimingCategory%5D%2C%20%5BtimingVar%5D%2C%20%5BtimingValue%5D%2C%20%5BtimingLabel%5D%2C%20%5BfieldsObject%5D)%3B” message=”” highlight=”” provider=”manual”/]
For example:
[pastacode lang=”javascript” manual=”ga(‘send’%2C%20’timing’%2C%20’JS%20Dependencies’%2C%20’load’%2C%203549)%3B” message=”” highlight=”” provider=”manual”/]
Ref : developers.google.com
This allows you to measure the most important element of your page (Hero image, slideshow…).
With this custom tool, we can add the metrics we feel are most relevant, such as Start Render, Speed Index, time to first interaction (click, scroll).
6. How to measure Start Render User-Timing tracking
Start Render is a key web performance metric. We’ve already talked about it several times in our articles.
You can measure it by using the Paint API to measure First Contentful Paint:
[pastacode lang=”javascript” manual=”%3C!–%20Register%20the%20PerformanceObserver%20to%20track%20paint%20timing.%20–%3E%0A%20%20%3Cscript%3E%0A%20%20const%20observer%20%3D%20new%20PerformanceObserver((list)%20%3D%3E%20%7B%0A%20%20%20%20for%20(const%20entry%20of%20list.getEntries())%20%7B%0A%20%20%20%20%20%20%2F%2F%20%60name%60%20will%20be%20either%20’first-paint’%20or%20’first-contentful-paint’.%0A%20%20%20%20%20%20const%20metricName%20%3D%20entry.name%3B%0A%20%20%20%20%20%20const%20time%20%3D%20Math.round(entry.startTime%20%2B%20entry.duration)%3B%0A%0A%20%20%20%20%20%20ga(‘send’%2C%20’event’%2C%20%7B%0A%20%20%20%20%20%20%20%20eventCategory%3A%20’Performance%20Metrics’%2C%0A%20%20%20%20%20%20%20%20eventAction%3A%20metricName%2C%0A%20%20%20%20%20%20%20%20eventValue%3A%20time%2C%0A%20%20%20%20%20%20%20%20nonInteraction%3A%20true%2C%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A%20%20observer.observe(%7BentryTypes%3A%20%5B’paint’%5D%7D)%3B%0A%20%20%3C%2Fscript%3E%0A” message=”” highlight=”” provider=”manual”/]
Important: you must ensure your PerformanceObserver is registered in the of your document before any stylesheets, so it runs before FP/FCP happens.
Please note that First Contentful Paint is not totally reliable and is only available on Chrome.
7. How to measure Speed Index
The Speed Index is another very interesting measurement, usually calculated by analyzing the video of the page loading. However, it is possible to calculate an approximate value using Resource Timing.
The most advanced script is available here >>.
This is the script used by Fasterize for its own monitoring.
8. Monitor abandonment rates
We know that users often leave a page before it has fully loaded. Unfortunately, all our measurements are affected by the[survivor bias] problem, where the data doesn’t include the measurements of people who have left the page.
However, it is possible to measure the number of abandoned sessions using Google Analytics’ Measurement Protocol. Explanations using the visibilitychange event are described in this article.
Google Analytics can be a good tool for measuring (Real User Monitoring) the performance of your website, thanks to its wide range of segmentation options, which are difficult to replicate with any other tool. However, you need to be sufficiently mature in its use to avoid falling into the various traps: insignificant metrics, strong sampling, averaging, etc. By integrating your own metrics and cleaning up the data via segments, you’ll be able to draw real conclusions from your figures!
Bear in mind that this tool does not replace a continuous monitoring tool (RUM) to alert a team to any anomalies.
Now you’re ready to analyze your site’s performance 🙂
