How To Use And Interpret Google’s PageSpeed Insights
If you’ve been keeping up with our recent posts, you’ll have seen that we’ve been putting some of the biggest brands in specific industries to the test using Google’s PageSpeed Insights tool.
So far we’ve covered:
The one thing that we’ve noticed is that there’s room for improvement regardless of how big your business might be.
The PageSpeed Insights tool is one that we as an SEO Agency use (amongst many others) to give an overview of a website’s performance in terms of speed, but we’re aware that it can appear a little complicated in terms of recommendations.
In light of that, we thought that we’d run through how to use and understand Google’s PageSpeed Insights tool in this post.
The Google PageSpeed Insights Interface
The interface itself is pretty straightforward, just type your URL into the field provided and hit ‘Analyze’. Google’s tool will then visit your site and run through a few basic tests.
You’ll then be presented with a screen similar to the one above, where you’ll be shown your site’s performance and grade (scored out of 100) for both your desktop and mobile site. We don’t need to tell you how important both of these are, especially with Google’s mobile speed update planned for July 2018.
It’s all well and good being told how well your site performs, but you need actionable information. The tool provides you with this in an ‘Optimization Suggestions’ section:
This is a great idea in practice, but the way in which the tool details these ‘Optimizations’ isn’t really accessible for someone who isn’t well versed in the technical side of things.
Let’s go through the above recommendations one by one to understand them further.
HTML – Defined as the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. HTML is used to build the structure of your pages, think of it as your building blocks.
CSS – Put simply, CSS (Cascading style sheets) are used to format the layout of Web pages. These make your webpages look good.
Now that’s cleared up – on to the recommendations.
The easiest way to approach this one is to break it down. Above the fold means anything that is placed in the top half of a webpage, making it immediately visible when the page loads.
Google’s PageSpeed Insights tool looks for any content above-the-fold, and finds out how it’s styled. If the styling information for the initial pieces of content on your page is stored in an off-page CSS file, then a browser/crawler has to fetch that styling information before it can display the page correctly. This takes time.
Avoid landing page redirects
This is a little more simple than the point above. A redirect is essentially a message that a website sends to a crawler or browser when they try to access a webpage that has moved.
The message tells them that the page has moved, and redirects them to the newer version of the page.
As a user, you won’t see this happen but you might notice that your target URL changes in your browser.
As you can imagine, redirecting a user adds a little more time onto the overall load time of a page.
Doing it multiple times increases that load time even more. If this recommendation is made by the Page Speed tool, it’ll give you a list of the redirects it has had to follow.
The easiest way to remedy this is to ‘cut out the middleman’. Remove redirects to the pages in the middle of the process and fix it with one redirect from original to new.
Leverage browser caching
Browser caching is a process whereby certain ‘static’ elements of a webpage can be remembered by browsers to save them trying to load them every time it visits a site.
To enable browser caching, you have to set an expiry date or maximum age for these static elements in your HTTP headers.
A HTTP header is how a site communicates with a browser or crawler. It contains redirect rules, expiry dates for static assets, information on how to display the site to desktop or mobile users and more.
Whilst it sounds like an easy job to add this rule to a HTTP header, it’s probably worth asking your development team to do this if you’re not too sure.
Most sites are given this recommendation by Google PageSpeed Insights. Images and other multimedia items are the largest assets that a web page can load.
High resolution images or images with a high file size can dramatically impact the load time of a site.
To give you an idea of what’s considered to be a high file size for an image, we’d roughly say that anything over 100kb is considered to be large.
If your site is suffering due to lots of large images, then they simply need to be compressed. There are multiple ways to do this, but it can be done by:
- Design teams
- Development teams
- Free web tools
This is a smaller job and thus has a slightly smaller impact than the other recommendations in Google’s PageSpeed Insights tool.
Believe it or not, these kinds of elements can increase their file size (even if only slightly), making them take longer to load.
Minifying these scripts is essentially the process of removing all ‘unnecessary’ space from the files.
This can be done using web tools or by your web development team (just make sure that you copy the original file and save an original copy in case anything goes wrong!)
We’ve talked about compressing images above, but this one is referring to compressing the transfer of your website itself to a browser or crawler.
When you try to access a website, your browser will send a request to the server that houses the website.
The server will then respond and use the HTTP headers to transfer the data of your site onto your screen. This communication and transfer all goes on in the background.
As you can imagine, there’s a large amount of data that needs to be transferred between servers and users when a site is accessed.
Fortunately, there’s a way of compressing the information that’s transferred. This is called gzip compression.
The PageSpeed insights tool will look for this kind of compression when it sends the initial request to view your website.
This one is a job for your web development team.
Reduce server response time
When Google’s PageSpeed Insights tool makes that first request to view your website, it’s sending a message to your server to request information.
It then measures the amount of time that your server takes to respond. This is sometimes referred to as Time To First Byte (TTFB).
There have actually been studies conducted into the connection between time to first byte and rankings in search. This study from Neil Patel, for example, shows a direct correlation between a fast time to first byte and high organic rankings.
Put simply – a slow time to first byte has the potential to negatively impact your rankings. This is another job for your web development team.
The Wrap Up
We can’t stress enough how important a fast website is to your online success, and Google’s PageSpeed Insights tool is only one of many that can give you actionable advice on how to improve site speed.
We’ve seen some staggering results from improving site speed for a number of our clients. If you want to find out more about how we’ve done this and how we can do it for your business, then get in touch.