Did you know that you probably already have an automatic analysis tool for your website’s performance? Google Analytics actually offers tracking of the loading speed of your web pages, through the Site Speed function. We will see that even if this function does not allow real-time monitoring for operation like Real User Monitoring (RUM or passive monitoring) tools, it allows global analyses to be carried out.
Drawing on our years of experience, we will detail the settings that we recommend for analyzing the performance of your website, using your Google Analytics.
1. Make sure to analyze relevant performance metrics on Google Analytics
By default, Google Analytics only shows metrics that are available in your browser via Javascript. These are taken from [Navigation Timing].
The metric highlighted is page load time . However, several studies show that this does not have a strong correlation with user experience .
It is preferable to analyze the critical rendering path by looking at the Avg. Document Content Loaded Time and Avg. Document Interactive Time .
2. Beware of sampling raw measurements
Google Analytics measures by default only 1% of the page views tracked on your site . You have the possibility to increase this number. This default sampling rate can be increased up to 10,000 measurements per day. You must therefore calculate your sampling ratio to measure data throughout the day.
The possibility of increasing this number is done at the tracking code level:
[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 your ratio to 100%. On the other hand, if you have 100,000 page views per day, we recommend setting your ratio to 10%. This will allow you to measure data over a longer period of time during the day, rather than only measuring it in the first few hours of the day.
These volume limitations are a point on which we really invite you to pay close attention. They can prevent a truly interesting use of Google Analytics. We will see later how to segment your users to conduct an even more detailed webperf analysis. Be careful, however, the size of the segment must remain large enough not to be totally volatile!
3. Focus on distributions rather than averages
The Google Analytics interface displays by default the averages of the measured metrics. However, these can be strongly influenced by extreme and minority values, unlike the median? As such, the median is therefore more representative of the reality of Internet users. You can also study the 80, 90 and 95 percentiles (the median is the 50th percentile).
To bypass this default displayed average, you can look directly at the distribution curve in the distribution tab .
4. Segment your data to better analyze it
Analyzing the loading time of your pages involves segmenting the data to determine the areas of improvement.
We recommend segmenting your data according to the following variables:
- Visitors’ country:
This first filter will allow you to only look at visits from countries that are of interest to your business. This will allow you to eliminate outliers for your macro analysis (bots coming from other countries at strange times, for example).
- Device type:
The measurement differences between desktop and mobile are significant and tend to be visible across all the sites we track. This can easily be explained by the power of phones as well as the difference between mobile and ADSL or fiber. That’s why it’s best to analyze them in different segments.
- Page type or other custom dimension :
We also recommend that you take advantage of your tagging plan to analyze the loading time of your pages by page type. For an e-commerce site, we distinguish at least the home page, the category / product list pages and the product pages.
5. Le tracking des User-Timing
Measuring only Navigation Timing is extremely limiting. Fortunately, Google Analytics also offers the ability to leverage 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"/]
Par exemple :
[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 important element of your page (Hero image, slideshow…).
With this custom tool, we can add the metrics that seem most relevant to us such as Start Render, Speed Index , time of first interaction (click, scroll).
6. How to measure Start Render User-Timing tracking
Start Render is a key metric for web performance. We have already discussed it several times in our articles.
You can measure it using the Paint API to measure First Contentful Paint :
The customer is very important, the customer will be followed by the customer. As the land of the land, the mourning nor the corporal of the land, the pillow of the lion.
[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.
Note however that First Contentful Paint is not completely reliable and is only available on Chrome.
7. How to measure Speed Index
Speed Index is also a very interesting metric that is usually calculated by analyzing the video of the page loading. However, it is possible to calculate an approximate value using Resource Timing.
The most complete script is available here >>
This is also the script used by Fasterize for its own monitoring.
8. Monitor the abandonment rate
We know that users often leave a page before it has fully loaded. Unfortunately, all of our measurements are affected by the [ survivorship bias ] problem, where the data does not include measurements from people who have left the page.
It is still 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 segmentation possibilities, which are difficult to replicate on another tool. However, you must have a sufficiently mature use of it to avoid falling into the various traps: non-significant metrics, strong sampling, average, etc. By integrating your own metrics and cleaning the data via segments, you will be able to draw real conclusions from your figures!
Also remember that this tool does not replace a continuous monitoring tool (RUM) used to alert a team in the event of an anomaly.
Now you are ready to analyze your site’s performance. 