Google Page Speed Insights

The Google Page Speed insights tool gives you a good idea as to how your Magento site is performing according to Google’s page speed analysis rules. It will rate your page speed for both Desktop and Mobile devices on a scale between 1 and 100, the higher the rating the better. Apart from the general response speed of your server it concentrates on some basic optimisation rules including compression and browser caching.

Google will provide you with some guidance to help you improve your page speed analysis results. The main speed issues all Magento stores are going to suffer from will, despite all your optimisation attempts, probably always eventually come back to your server hardware resources and configuration. The mean time to the first byte delivery for a Magento store will be very dependant on server, database and network resources that may be out of your control (or budget) especially as Magento is already a pretty data intensive beast.

Here are 5 ways to improve your Magento Google Page Speed insight results.

1. Buy a new server / enable full page caching

Ok, so a new server is probably not going to be an option, but remember if your server is not up to spec for your Magento installation no amount of optimising is going to make your server faster. Full page caching might be an option to help improve server response times.

2. Enable Apache Compression

Assuming you are using Apache, make sure compression and the mod_deflate module is enabled. mod_deflate is an Apache module which “provides the DEFLATE output filter that allows output from your server to be compressed before being sent to the client over the network.” (from its web). You need to make sure the module is enabled before you try to configure compression. To do this with Ubuntu for example simply enter

a2enmod deflate
service apache2 restart

Now take a look at the default Magento .htaccess file in the root of your Magento folder,  Make sure the section with the deflate compression rules is not commented to enable the default compression rules.

############################################
## DEFLATE COMPRESSION
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
    AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript application/x-javascript
    #AddOutputFilterByType DEFLATE application/x-httpd-php

    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI \.(?:pdf|doc)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI \.(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary

These are the default rules, if you google this subject you will also find suggestions to improve on / customise these rules. Some will also argue that you should move the .htaccess rules to your apache site .conf file.

3. Enable Browser Cache Rules

Similar to taking advantage of Apaches compression features, you need to also make sure you are telling visitors what data their browsers can and cannot cache, and for how long. Client side caching rules obviously help considerably to reduce the time required by the browser to fetch data.

The Apache module is called mod_expires. Enable this with

a2enmod expires
service apache2 restart

Again look at the default Magento .htaccess rules and make sure the mod_expires section is not commented out.

############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires

	ExpiresActive On
	ExpiresDefault "access plus 1 year"

4. Optimise images

The first thing you will see when Google analyses your product pages are suggestions to improve image optimisation. A good Magento store will have a lot of images, and Magento makes a good job of resizing and caching product images for various frontend views.

There are two really good lossless image optimisation tools available that can optimise all your images in seconds with just one command line: jpegoptim and pngcrush.

These are free utilities that should be available for your flavour of Unix. In ubuntu you can install them with

apt-get install jpegoptim
apt-get install pngcrush

First take a backup of your Magento installation, or at least your /media/catalog/product and category folders.

To optimise every single product image open a terminal session and change to your magento media/catalog/product folder. Now execute the following command line

find . -type d -exec  sh -c "/usr/bin/jpegoptim --strip-all -t {}/*.jpg" \; | perl -e '@a=<>; $a=join("", @a); @b = $a =~ /%\s+\((\d+)k\)/g; foreach my $n (@b) {$sum = $sum + $n}; print "Total saved ${sum}k\n"' 

This will optimise all jpg files in the current folder and all subfolders. The original file will be overwritten and a summary of the compression savings shown at the end. Be sure to reset the permissions of all the image files after running the optimisation as they will have all been reset which can lead to them not being accessible by Apache.

If you have png files you want to optimise the corresponding pngcrush command is

for png in `find $1 -iname "*.png"`; do pngcrush -ow "$png"; done

Before you jump in and optimise all your images make sure you have a backup, and I would also do a test optimisation on your production server. Replacing thousands of broken product images is really no fun at all.

5. Minify and Optimise JS, CSS and HTML

The best way to minify and optimise your javascript and style sheet files for Google page insights is to enable the Magento js and css combination feature in admin. I would also recommend installing the Fooman Speedster Advanced module. I noticed the new RWD theme in Magento 1.9 now supports SASS, this will no doubt help to improve CSS optimisation in the future, if your theme doesn’t support SCSS then have a look at manually optimising the CSS yourself using online tools. The same goes for javascript, make sure any plugins you install are using minified js files, or try to minify the source yourself using online tools.

I am currently testing a module that uses the well known minify code to minify Magento html output.

Each of these steps will help to improve the page speed insight score, html minification alone increases the rank by 1. When you add all these small improvements together your page speed rank will increase by 5 to 10 points which may well be enough to get you in to the green ranking of 85 and above.