Google PageSpeed is a family of tools by Google Inc, designed to help a website’s performance optimisations. Page speed is important for Magento customers, Google search and for SEO. The question is, is it possible to achieve a 100/100 rating with the Google Pagespeed insight tool?
Magento Pagespeed 100/100 rating
Well unfortunately due to some core Magento design issues I think the answer is no, BUT – you should be able to achieve a green rating of at least 90 to 95.
Magento Pagespeed Optimisation
Google Pagespeed insights targets 5 main optimisation categories
- Stylesheets optimizations
- Images optimizations
- HTML optimizations
- Tracking activity filters
When you run the insights tool these are the areas that will be looked at and reported on. Google will clearly tell you where your Magento store needs improvement, it is likely you will need to look at both your server configuration and Magento to address Pagespeed issues found by Magento.
Problems such as web server compression not enabled, browser caching not enabled and server response times will require changes to your web server setup or core server configuration.
Image optimisation is achievable with free image tools.
The Google Pagespeed insights tool will quite likely tell you that you have render blocking JS and CSS.
There are ways of customising the layout of your theme to move certain JS and CSS source files to the footer, in practice this can be complicated because you need to ensure that the loading order of your JavasScript files does not change so that scripts or plugins with dependencies on other JS libraries still run.
The guys at Mediarox have developed a neat solution that simply does a big cut and paste on your html code, finding all JS script and CSS elements, removing them from the header of the html and placing them in the footer.
I was pretty skeptical at first as to how effective this would be, but after installing the module and testing it I couldn’t see any major problems. The Mediarox module doesn’t minify html which was something I had been working on, so I integrated my minify html module into theirs and forked it on github.
modman clone https://github.com/gaiterjones/magento-pagespeed
Install the module and configure it at System -> Configuration -> Advanced -> Pagespeed. Here you can enable or disable HTML Minify, JS and CSS optmisation individually. I also added an extra option to disable all modules for logged in users.
If you want to exclude any JS scripts from optimisation enable the exclude list option and add a regex to identify the script.
Magento-pagespeed optimises Magento JS, CSS and html, I then cache the optimised html with Lesti_FPC. When implemented correctly you will see debug comments in the source of the Magento webpage indicating which Pagespeed (PS) module optimisations took place:
<!– +PS JS 28-08-2015 07:50:04 4ms –>
<!– +PS MIN_HTML 28-08-2015 07:50:04 30ms –>
<!– +FPC 28-08-2015 07:50:04 –>
Here we see PS JS and PS MIN_HTML are enabled. The JS optimisation took 4ms, the HTML minify code took 30ms. the html was then cached by Lest_FPC.
Moving the JS to the footer really helps to improve render blocking and this is reflected by the Pagespeed Insights tool running on my dev site :
Could I get to 100/100, probably but 93 is still a pretty good result I think.