Walkthrough – Optimising your site speed with PageSpeed Insights
Another week, another blog on site speed. Since the last update in July 2018, Google has been testing a new display in their PageSpeed Insights tool which allows the user a more comprehensive look at problems they might face and the changes that they need to implement
So what is the ‘Speed Update’?
According to Google: “People want to be able to find answers to their questions as fast as possible — studies show that people really care about the speed of a page. Although speed has been used in ranking for some time, that signal was focused on desktop searches.
“The “Speed Update,” as we’re calling it, will only affect pages that deliver the slowest experience to users and will only affect a small percentage of queries. It applies the same standard to all pages, regardless of the technology used to build the page. The intent of the search query is still a very strong signal, so a slow page may still rank highly if it has great, relevant content.
“We encourage developers to think broadly about how performance affects a user’s experience of their page and to consider a variety of user experience metrics.”
For this walkthrough, we’ll use a test site, analyse its performance on both mobile (another vital SEO consideration) and desktop before looking at the changes that can be made. For the purpose of this blog we will look at the following site – www.bbc.co.uk. By doing this walkthrough we aim to show you around the report at a primary level and help you understand why you are getting certain results for your URL.
The reason that we have chosen the BBC’s site is that it is not only one of the most read news websites in the UK but it has a conflicting set of results when optimised across mobile and desktop.
The starting point for any analysis to look at the current positioning of a brand, when you run it through the PageSpeed Insights tool. The results from the analysis are formed by lab data analysed by Google Lighthouse. If we look at the performance of the BBC’s mobile site we can see that it has a score of 15 which will be a huge concern with more focus on this as a ranking factor. Anything between 0-49 is considered slow and throws up a serious list of actions to perform.
The desktop site is a different story however with a score of 91 (fast).
The key takeaway here is that the site in general is pretty well optimised but that mobile side has been neglected. A key consideration here might also be that sites such as the BBC use apps as well so there may be more focus here. Nevertheless Google takes no prisoners when it comes to rankings so it needs addressing.
Top level stats
When it comes to the top level stats on which the speed is based, we see the following six metrics:
As you can see from the BBC’s mobile page test, five of the six areas are classified as slow and one is average here’s what they all mean:
First Contentful Paint (FCP)
The FCP marks the point, immediately after navigation, when the browser renders the first bit of content from the DOM (tree structure that represents the HTML of the website). This is an important milestone for users because it provides feedback that the page is actually loading. In the case of site speed it goes without saying – the faster the better.
Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated. The lower the score, the better.
Time to Interactive
Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as “fast” or “slow”.
The Time to Interactive (TTI) metric measures how long it takes a page to become interactive. “Interactive” is defined as the point where:
- The page has displayed useful content, which is measured with First Contentful Paint.
- Event handlers are registered for most visible page elements.
- The page responds to user interactions within 50 milliseconds.
Some sites optimise content visibility at the expense of interactivity. This can create a frustrating user experience. The site appears to be ready, but when the user tries to interact with it, nothing happens.
First Meaningful Paint
Page load is a key aspect of how a user perceives the performance of your page. This audit identifies the time at which the user feels that the primary content of the page is visible.
First CPU Idle
The First CPU Idle metric measures when a page is minimally interactive:
- Most, but maybe not all, user interface (UI) elements on the screen are interactive.
- The page responds, on average, to most user input in a reasonable amount of time.
Estimated Input Latency
Input responsiveness is a key factor in how users perceive the performance of your app. Apps have 100ms to respond to user input. Any longer than that, and the user perceives the app as ‘laggy’. To make your site responds to user input faster, you need to optimise how your code runs in the browser.
Opportunities and diagnostics
Understanding the metrics is a good starting point and the next stage of the report is the ‘opportunities’ tab. This lists all of the tasks that can be done and the benefits of resolving any flagged issues. This is a feature that was always available but the new interface shows the actual time that can be saved.
In the below screenshot you can see that there are five different opportunities for mobile speed optimisation, specifically relating to the page load time.
I’ve expanded the third point in the list and you will be able to see that there is a more detailed report about areas for improvement. Whilst in all likelihood these are task for a specialist web developer there are things that can be done in house such as making sure that all images are compressed and optimised. Images are in fact on of the main reasons for poor mobile speed, especially on 3/4G connections.
From a diagnostic point of view there are a few things that can be done to the mobile site of the BBC website and the potential positive impact is huge.
The timings that are associated with these tasks are startling. If you look at recommendations two and three you will see that these fixes could save a huge amount of time. In fact they currently have a combined 15.6 seconds of load time so making a saving here could take the mobile site to the same level as the desktop site.
As I mentioned earlier, the change needed are different for all sites and can be quite technical, but for those wanting to give it ago or manage the workload the tool now also offers two tabs at the top of the page, Guides and References.