Google Page Speed Score – Optimising and speeding up my own site

While I’ve been playing about with the Page Speed plugin for Firefox for a while now, I never actually bothered to implement the changes suggested by it.

Well, with Google now counting page loading times as a signal in its ranking algorithm plus being particularly bored one night, I decided to action the suggestions made by Google Page Speed and see whether I could bump up my score from its 75/100 to 100/100. Below, I will walk through the changes I made and how I went about it.

On first inspection, I can see a list of tasks categorised into high priority , medium priority  and low priority/fine . These tasks are in fact rules of standard best practices that should be applied when designing or developing a site. I will be dealing with the high priority tasks only (ok, so I lied about bumping my score up to 100/100 ;))

Leverage browser caching

The first high priority rule is Leverage browser caching. If I expand it, I’m presented with more information on the issue. It tells me that the freshness lifetime in the following list of resources is too short or not specified. This means that each time the page loads, these files/images have to be downloaded and transferred through the network which in turn slows down the rate at which the page loads. By setting a longer caching date, these resources can be stored or cached by the browser or by a proxy.

After searching around on the Internet, I found a piece of code which can be added to the .htaccess file which basically sets caching rules by resource type. If you need to fix this tasks yourself also, simply copy and paste the code and add it to your .htaccess file.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

After uploading my .htaccess file, I clicked “Refresh Analysis” and it gave my the score of 80/100, an increase of 5 – not bad. However, Leverage browser caching has only moved down to medium priority, and not low priority/fine but that will do for the time being.

Minimize DNS lookups

DNS lookups takes time and if code and resources used on a site is located on another IP address (or subdomain), the browser will have to wait for the DNS to lookup the IP address of the webserver before making a connection. According to Yahoo!, it takes around 20 – 120 milliseconds to make a DNS lookup. You can imagine the time taken multiplied over if there are many DNS lookups to make. The ideal scenario would be to have all your files, etc on the same server in order to minimise the time taken overall.

The screenshot below shows two areas in which my homepage calls upon external resources. The first one is a Facebook badge under my Social Media widget on the right hand side. I won’t be able to do anything with this unfortunately as it’s dynamic and the badge updates as I update my Facebook status. What I did instead is remove it from the homepage completely – and place it in my About page some time later.

A piece of script is called upon externally in order for my Blog Engage voting buttons to be displayed and to function properly. I copied and pasted the piece of code over into a new file button.php and stored it in the root of my blog. Then I updated the Blog Engage plugin code so that it points to the new file.

Now Minimize DNS lookups has moved to the low priority/fine category and my Page Speed Score has increased from 80/100 to 84/100.

Parallelize downloads across hostnames

There is one more high priority task to resolve now, Parallelize downloads across hostnames. Browsers have a limit as to how many images/files it can download from each host at each time – so by spreading the images across different hosts you can have the browser download more images in one go. For example, I can create a subdomain image.seo-julie.co.uk and place images there, effectively tricking the browser into download twice as many images than before.

When I expand the last high priority task, it shows that the browser is having to make 14 parallelizable requests for the Fixed Social Buttons plugin I have installed. I’ve since removed the plugin, as I never liked it to begin with and thought it was a clumsy looking thing. Removing it has placed the task into the low priority/fine category and my latest score is 85/100.

I intend to try and remove all the medium priority tasks off the list eventually, though I doubt making these changes will have a profound effect on the speed really. Regardless, as mentioned before, these are all suggested best practices which if implemented, can only have a positive effect.