Back to Website Launch Checklist

How to use Google Pagespeed Insights to analyse your website's performance

How to use Google Pagespeed Insights to analyse your website's performance

PageSpeed Insights is a handy tool created by Google which can analyse any URL and tell you how that page's performance could be improved, along with a rating out of 100 for both the mobile and desktop performance. As page load times are closely tied to search engine positioning, it's wise to pay some heed to this tool, however optimising all the way to 100/100 is rarely necessary (if even possible).

How to use PageSpeed Insights

It's really as simple as heading over to this page and entering any URL. Bear in mind that PageSpeed Insights is only analysing that specific page, not your entire website, so you may want to check multiple different pages for potential issues.

After you enter a URL and hit "analyze" you will be presented with your score and a Suggestions Summary which will contain a list of improvements you could make to the page. Depending on severity, these are broken down into 3 categories:

At this point it's up to you to look through these recommendations and decide what you can and can't fix. As a general rule of thumb you should at least aim to get rid of all "Should Fix" issues. Some will be easy fixes, some may require a serious look at your website's infrastructure and some thought as to whether its worth the time to implement.

Common Issues

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

This is such a big subject it could have an article of its own, but basically this suggestion wants you to load your JS and CSS in such a way that it doesn't interfere with the rendering of the rest of the page. The simplest way to achieve this for JS is to load your scripts at the very end of your document (not in the head). For CSS it's not as straightforward if you want to avoid the dreaded FOUC (flash of unstyled content). You can reduce the severity of this issue by simply reducing the amount of CSS you're loading into the page (do you really need that full icon font library?), but if you've tried everything else and you really want to follow this suggestion, you can look into only loading critical CSS immediately and defer loading the rest of your styles.

Optimize images

This means PageSpeed Insights has found images which are either superfluously large for the size they're being displayed on the page, or the file size of the image is larger than it needs to be and can be compressed. There are tons of online tools which allow you to compress images, or you can incorporate it into your build script if using a task runner like Gulp or Grunt.

Reduce server response time

Simply, your server responded slowly! Generally there's not a great deal you can do about this one beyond moving to a better server (unless your website's so poorly optimised that it's the thing causing the server to crawl).

Minify CSS/JavaScript

By minifying your code, you remove all whitespace and comments (plus a number of other efficiencies) which allows the files to be served considerably faster. This is something you would generally want to automate using a task runner like Gulp or Grunt, however there are also online minifiers available. Just remember to keep the original files as well!

Enable compression

This means your server isn't GZIP compressing files as they're sent to the client. This might sound confusing, but if you're on a standard Apache server it's a simple case of adding the following to your .htaccess file (in your website's root) to activate GZIP for most common filetypes:

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

Leverage browser caching

This means your server isn't setting expires headers for the files being sent by your website. As above, this is a simple addition to .htaccess to activate, but bear in mind that this will make your website cache files much more aggressively so you may want to comment this out during development:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

Hopefully this article has helped you get up to speed with Google PageSpeed Insights - happy optimising!

  Back to Website Launch Checklist