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 Testhttps://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
Other minor issues were:-
- 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
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.
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.
Our results are now:-
76 / 100 on Mobile
85 / 100 on Desktop
We would encourage you to use this tool and begin optimising your websites.
Post a comment