The Site speed in Google Analytics (GA) has stirred some serious debate. Over the years I’ve stumbled upon many blogs and articles who wrote about the sense, and nonsense of the site speed metric in GA, especially its definition. In this article we’ll take a deeper look into the Site Speed metrics and I’ll show you other tools to help you get a better grip on improving website loading speeds.
Why is site speed important?
Site speed is becoming more important as mobile devices become prevalent in our daily lives. Google has been pushing website speed aggressively through its recent updates and prioritizing mobile traffic. One can only guess for the true motives, but we can speculate. Mobile phones, and mainly smartphones, have a higher market penetration than desktops in developing nations and as the adoption of Google Search in the developed world is reaching almost saturated levels, Google has to search for new growth regions to get more advertising dollars. Through its Accelerated Mobile Pages (AMP) project it tries to convince web developers to create faster mobile experiences.
Another reason for the push to more mobile friendly websites is the, in the beginning of the mobile internet era, limited speeds and data caps that were present on the provider networks. Users couldn’t load full desktop pages filled with uncompressed images and all the elements which didn’t work properly on mobile phones. A change had to be made to make the web more suitable for mobile phones.
53% of visitors abandon a web page when it takes more than 3 seconds to load.
Not only do optimized loading speeds result in a better web experience, which Google has been pushing for. It’s also hurting your business results. Google found, already back in 2016, that 53% of visitors abandon a web page when it takes more than 3 seconds to load, and one in two people expect a web page to load in less than 2 seconds. 46% say they dislike waiting for a page to load as the most annoying part of mobile browsing. As a company you are potentially losing out on a lot of business as more than half of your visitors might leave your page after 3 seconds of no fully loaded page. Creating a website that loads at breakneck speeds is not just nice to have, it should be your top priority.
What is the definition of Site Speed?
I once had a heavy debate about what page speed actually meant, back in the day it might have been time to first byte. But this has since, if the previous scenario even existed, changed to, according to Google’s official definition “how quickly the browser parses the document and makes it available for user interaction.”
This is far more valuable than time to first byte, as a byte can quickly transfer, but when a user can’t interact with your website, it’s worthless. User centricity will and always will be the reason site speed will remain important.
The Google Analytics Site Speed report
The Google Site Speed report can be found in the reports section under Behavior. The following reports can be found:
Page timings
The page timings report, as the name suggests, looks at the individual performance of pages on your website. The default view orders the page by page views and their average loading time deviation compared to the rest of your website. This can be in some respects a misleading report, because when your whole site is slow, seeing pages that perform even worse than the average, will send a signal your site is pretty well built. While in reality, this is not the case.
Speed suggestions
The speed suggestions report shows the web pages ordered by the amount of pageviews and their individual PageSpeed score. The latter metric is an interesting addition to the report, as it gives us in one glance the top and least performing pages in one report. Google rightfully gives a disclaimer to the PageSpeed score, as it is no speed test, but a score that shows how much room for improvement there is for a certain page. For example a page with a score of 89 will need less work than a page that received a 56 score.
User Timings
The user timings report is designed for web developers who want a closer at different website elements. Chances are that you as an online marketer will not use this report often. At least I haven’t used it for site speed optimizations. The user timings report has three data feeds, the explore, distribution and the map overlay for regional specific user timings.
I’ve noticed over the course of time that the Google Analytics speed reports were always a little clunky or misleading and remain like this even to this day. This is especially true for smaller accounts which have smaller sample sizes to properly measure user timings and combine them into a useful report. Therefore we will also look into other tools, including Google Page Speed Insights, to measure and optimize your site speed, especially when you have low amounts of traffic.
Using PageSpeed Insights to improve site speed
Google Analytics in itself doesn’t really reveal where optimizations can be made. You are referred to one of Google’s other tools, namely the Page Speed insights, which will generate a report looking as follows. Note that your results and report will have different findings.
The report itself, at first glance, looks like a bucketload of terms that don’t necessarily send a spark of imagination and get you running to your web developer with improvements to be made. We’re going to break down the report to better help you understand what all the different elements within the report mean and how can improve.
The Lab Data section
First Contentful Paint (FCP)
When I first saw this term, I had no clue what it meant. When I looked at the document Google described the FCP as a performance indicator that measures how long it takes to render the first piece of the DOM. You might be wondering what the DOM is?
The DOM stands for Document Object Model which acts as an interface for the browser to read and interpret HTML and XML. Your browser can translate your code into a working website. When your HTML or XML is difficult to process, the browser will either misinterpret the DOM and render a faulty website, or with inefficient code take a long time to load. Google wants to ensure the website is as fast as possible for users to interact with. Google consider a loading time between 0 and 2 seconds to be good, between 2 and 4 seconds the average and over 4 is seen as slow. Google recommends using fonts which are supported by most browsers, as custom fonts will take a long time to load.
You can read more about the DOM at freeCodeCamp.
Speed Index
Speed will be one of the most important metrics you want to improve upon. The speed index report measures how fast content is visible to the user during loading of the page. The scoring is a little more lenient than with the DOM speed test in the FCP report. Google considers 0 to 4.3 seconds to be fast, 4.4 up to 5.8 is average and above 5.8 is considered slow. I always recommend aiming for 3 seconds which is well into the green zone. Faster loading times will need coding knowledge and can sometimes be complex to establish.
There are a lot of ways to improve your site speed. The most common ones I’ve seen over the years is the usage of uncompressed images, cheap hosting or inefficient code. The easiest one is the most easy fix as it requires zero coding knowledge. You can easily compress your images through WordPress plugins or manually through tools such as TinyPNG.
Time to Interactive
Time to Interactive has a lot of overlap with the previous metrics as it combines the FCP and Speed Index and adds another metric to enhance the report, namely user interactions with page elements that need to occur within 50 milliseconds. That sounds pretty technical already and in most cases you won’t be able to fix this yourself, unless you have sufficient coding knowledge.
To reduce the interaction time with page elements, it’s recommended to remove unnecessary Javascript. Optimizing Javascript can be done through different methods, such as reducing third party scripts which can severely impact loading speeds, deleting flashy animations created through Javascript which can be easily manipulated through CSS. Some scripts are also less important than others so they can be placed further down the body of the HTML. Good practice is to always make sure the HTML and CSS are loading first, and then Javascript.
First Meaningful Paint (FMP)
This report has been phased out and should be used for optimizing your website. I would consider the FMP as a mixture of the FCP, Speed Index and Time to Interactive.
First CPU Idle
As with the FMP, this report has been phased out as well.
Max Potential First Input Delay (FID)
Like many of the aforementioned reports, does the FID report have a lot of similarities to previous reports? The FID measures the time between user interaction and the time for the browser to process the interaction. At the developers section of Google, the metric is considered as a valuable first impression for the user. The same fixes that are recommended optimizing Javascript, font loading and code splitting. Code splitting means separating large chunks of Javascript into smaller files, instead of cramming them into one giant file that needs to be loaded in one go.
Opportunities report
Eliminate render-blocking resources
Elements on a website won’t always load properly due to Javascript or CSS errors. It’s good practice to separate your Javascript and CSS, also called inline CSS, from your HTML file. Inline CSS predates from the beginning of the dot com era and isn’t used anymore by well seasoned web developers. I don’t see inline CSS errors that often anymore, especially with the rise of CMSs such as WordPress, Shopify, Wix which have professionalized and standardized web development conventions.
Defer offscreen images
Offscreen images is a rather vague description, but it boils down to below the field images which are loaded whilst not visible to the user. Google advises to load these only when visible. You might see this phenomenon on Facebook, where not the whole time is loaded, but gradually build up as you scroll further down the page. This technique is also called lazy loading.
Serve images in next-gen formats
I never heard of next-gen image formats, not even when I worked at a Digital Asset Management company, but apparently these formats are JPEG 2000, JPEG XR and WebP, which use a more efficient compressing technology. I don’t know anybody who uses these formats and JPEG and PNG are most prevalent in the online marketing community. For this opportunity I refer back to the TinyPNG/JPG which serves perfectly as an image compressor and doesn’t force you to use uncommon image types. You can reduce your file sizes up to 50 – 75% without a significant loss of image quality.
Remove unused CSS
This one speaks for itself. Having unused code in your website is always a bad thing, especially when it hurts site loading speed. You should talk with your developer to review the code on a regular basis.
Properly sizes images
Another vague term, but the Google Developers resources section proves to be useful as it refers to using responsive images. Having responsive images is important for creating a pleasant web experience and makes sure users load the site that is best suited for their devices, like loading a full blown version of Unsplash which drains your data in seconds on your smartphone.
Summary
It might sound weird coming from me, a dedicated Google Analytics user to recommend going outside the trusted tool. But in the case of site speed optimization, it’s best to look in Google’s repertoire. The site speed report is great for collecting data about your website performance in the general sense, but for real optimization it’s best you look at tools such the Google PageSpeed Insights, which helps you narrow down where you can find performance optimizations.
