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

An image showing the Google PageSpeed tool 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.

An image showing PageSpeed performance out of 100 for a desktop and mobile website

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:

An image showing optimisation suggestions from Google PageSpeed Insights

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.

Before we go into the details of each recommendation, it’s worth explaining the three elements that are used to build sites – HTML, CSS and JavaScript.

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.

JavaScript – Defined as an object-oriented computer programming language commonly used to create interactive effects within web browsers. This is a complicated way of saying that it brings the features of your site to life with animation and interactivity.

To use a loose analogy: if your site were a car, your HTML would be the frame, the CSS would be your aesthetic details, and JavaScript would make it move.

Traditionally, CSS and JavaScript are both stored in separate locations to a webpage, and are referenced within the HTML to ‘call-in’ style and function information.

Now that’s cleared up – on to the recommendations.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

An image from Google PageSpeed Insights suggesting to eliminate render-blocking JavaScript and CSS in above the fold content

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.

To reduce this waiting time, Google recommend that you use a process called ‘inlining’. This is where you can directly insert certain CSS styles or JavaScript functions next to their HTML counterparts, meaning that browsers and crawlers don’t have to fetch an external resource to load the HTML.

The tool gives you a list of the CSS/JavaScript files that it has to fetch to allow it to load the page. If you’re not code savvy then this is a job for your web development team to undertake.

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

An image from Google PageSpeed Insights suggesting to 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.

These can be elements like the basic CSS and JavaScript functions of your site (assuming these change infrequently), or standard imagery such as your logo.

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.

Optimize Images

An image from Google PageSpeed Insights showing which images need to be optimised

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

Minify HTML/CSS/JavaScript

An image from Google PageSpeed Insights suggesting to minify HTML, CSS and JavaScript

This is a smaller job and thus has a slightly smaller impact than the other recommendations in Google’s PageSpeed Insights tool.

HTML, CSS and JavaScript files are all laid out in a line-by-line format, and can often contain lots of spaces and paragraph breaks.

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!)

Enable Compression

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.

Written by Alex Wright

Head of Search