Optimising your website with Google PageSpeed Insights

Category: SEO   /   Posted on 7th October 2014

Google PageSpeed Insights is a great tool to check how quickly your web pages are loading and improve your website performance.

We've been spending quite a bit of time using this tool lately to try and optimise our website for both Mobile and Desktop use.

The results have been very encouraging and not as difficult as we once thought.

The Initial Test

https://developers.google.com/speed/pagespeed/insights/

Our initial scores were less than impressive. On Mobile, we had a 50 out of 100 score, whilst on Desktop it was slightly better at 60 out of 100.

The main problems were:-
- Leverage browser caching
- Optimize images
- Enable compression
- Eliminate render-blocking JavaScript and CSS in above-the-fold content

Other minor issues were:-
- Minify JavaScript
- Minify CSS
- Minify HTML

Step 1 - Optimising Images

So, our first step involved optimising our images.

A great tool for batch processing PNG images is PNGGauntlet. It is free to download and can be found at the following address:- http://www.pnggauntlet.com

After optimising and re-uploading our images, our results were 54 / 100 on Mobile and 64 / 100 on Desktop. Slightly better.

Step 2 - Enable compression

We then enabled mod_deflate in our htaccess file to compress CSS, JavaScript, HTML and XML files.

Step 3 - Leverage browser caching

We enabled mod_expires in our htaccess file to cache static resources such as images and CSS files.

So, after fixing these three major issues, our results were as follows:-

72 / 100 on Mobile
82 / 100 on Desktop

Encouraging, but we felt we could do better.

Step 4 - Minify HTML, CSS and JavaScript

The next step involved optimising our JavaScript code.

The following tool was very handy for this purpose - http://www.javascriptcompressor.com

When it came to minifying our HTML code, we decided on a slightly different approach.

Rather than output the contents of the page in HTML as we go, we stored the page contents in a PHP variable.

Prior to outputting this variable, we use the preg_replace PHP function to remove any tabs, extra white space and new lines.

The result? A large portion of our HTML output is minified and no more warning error on Google PageSpeed.

Minimising our CSS code involved manually looking over it and remove any unnecessary white space.

There are CSS cleaners around such as http://www.cleancss.com, however none of them really suited our purpose.

Results

Our results are now:-

76 / 100 on Mobile
85 / 100 on Desktop

Our next step will involve fixing the last issue - "Eliminate render-blocking JavaScript and CSS in above-the-fold content". For now, we are reasonably satisfied with the results.

We would encourage you to use this tool and begin optimising your websites.