HOW CAN I SCORE 100 ON GOOGLE PAGESPEED INSIGHTS?

PageSpeed Insights (PSI) is a tool developed by Google to rank the speed of your website. There are a few things it doesn’t look out for, such as code validation or usability but it’s a good starting point at getting your site up to scratch.

The first step is to head to the insight tool and put your URL in the box. Unless you have already worked your way through the results, you will no doubt be faced with a series of errors and warnings for you to fix. Even the most popular sites could make some improvements (at the time of writing webcreationnepal.com receives a 16/100 rating).

PageSpeed Insights is split into two sections - Mobile and Desktop. When measuring your site Google will access it using two different ways; a mobile-user agent and desktop-user agent. When accessing via the mobile-user agent, PSI tries to replicate mobile characteristics, such as screen size, network speed and device processing power. The desktop analysis does not take these factors into consideration and will generally produce a higher score, as page speed will not be restricted.

Minify JavaScript, HTML and CSS

In order to make PSI happy, all your images, CSS, JavaScript and HTML need to be optimised and minified. To minify your CSS and JavaScript, you can use a build tool such as Gulp or Grunt, or there are several online tools which can do this for you. As for minifying HTML, most CMS’s provide this as a plugin (if you are using one), if not services such as Cloudflare act as a CDN and asset compressor. Alternatively desktop applications such as ImageOptim exist to allow you to “preprocess” your images before being uploaded.

If there are any optimisations to be made, PSI will generate a zip file containing all the new assets for you. If you are just running this tool on a static site, download the new assets and upload them to your site.

However, chances are you are going to want to know what optimisations have been made to the assets, so you can update and re-optimise any new assets you create.

Optimise Images

Having un-optimised images on your site can really hinder your Google PageSpeed score. The messages from Google are very unhelpful, as to what is required to “optimise” your images. We’ve spent the last few weeks ticking all the boxes and working out what is needed:

JPEG Quality - no higher than 85%
The compression quality of your jpeg should be no higher than 85% (for example, when saving in Photoshop). In most cases, there is no need to have it this high anyway, but make sure it does not go past this number. Our designers often mention the magic number of “51” for jpeg compression, but use your judgement as to how low you can go.

JPEG Subsampling - use 4:2:0 (aka 2x2,1x1,1x1 or 2:1:1)
JPEG subsampling is a topic which is not widely talked about and required a substantial amount of research before we fully understood it. This article on Chroma-Subsampling explains it better than we ever could. A tool similar to IMGOnline can be used to change this. Alternatively we use ImageMagick on the command line.

Greyscale PNGs - use the right colorspace
This one caught us out but now seems obvious. If your PNG image only uses black & white colours (e.g. is a shade of grey and features no colour) you can set it to use the  “Gray” PNG colorspace when saving.

PNG-8 over PNG-32Using PNG-8 over PNG-32 is down to personal judgement. Most of the time, PNG-8 will be sufficient for what you need and the file size is normally significantly smaller. This thread on Stack Overflow explains more. IDUX also have a great article explaining alpha transparency

Image sizePSI won’t generally pull you up on this, but it is good practice to ensure your images are not oversized for what is required. If your image is only every used as a thumbnail, the user shouldn’t need to download a 4000px image for it.

Image meta dataEvery image created stores several bits of meta information about itself. Storing this data increases the file size, which isn’t needed on the web. Use an image optimiser or minifier to strip out this meta data, reducing the file size of the image.

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

Google PageSpeed Insights requires any render blocking assets to be located in the footer of the page (just before your closing body tag). These render blocking assets include CSS and Javascript. Be careful - there may be some inline JavaScript on your page which relies on a library (such as jQuery) to be loaded before it can be executed. If this occurs and you are unable to move the inline script, you may wish to consider implementing a “javascript handler” to prevent your page from failing to execute.