I felt it important to go through the process of optimising my website, to improve its speed in browsers. In the past few years Google has factored the site speed in to help determine how to rank search engine results, so it is an important SEO consideration as well. I used a site called GTmetrix, as recommended by my friend & SEO guru Mark Attwood.
When I first used GTmetrix to generate a site speed report, it wasn’t great… Mark recommends achieving a score of at least 90% for both the PageSpeed score and the YSlow score.
There were several areas I needed to focus on:
Enable gzip compression
First off I used their own site’s advice and edit my .htaccess file as described here.
When a user hits your website a call is made to your server to deliver the requested files. The bigger these files are the longer it’s going to take for them to get to your browser and appear on the screen. Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.
Leverage browser caching
Again I followed the advice on their site here.
This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.
I also added a couple of extra lines to include SVG and the woff font type…
It only advised me to reduce the file size of one image, so this was a relatively easy update. It was the background image in the header behind my name. I had inadvertently saved it originally as a PNG-32. I changed this to PNG-8, which reduced the file size from approx 12.5k to 3.5k. I lost the gradient effect a little, but it was so subtle that it wasn’t really an issue.
What are the differences between the various PNG formats?
- PNG-8: The 8 stands for 8 bit. It can handle up to 256 colours. They are similar to GIFs, and uses a lossless compression method. More ideally suited to small, more simple graphics such as logos & icons.
- PNG-24: It is similar to PNG-8s, but has support for 16 million colours, and will preserve colour variations such as gradients better. It will be a larger file size as it retains more detail.
- PNG-32: It’s the highest quality of all PNG formats, and supports full alpha transparency. It is therefore the largest file size of the three formats. It is best used for detailed graphics such as those that have gradients, varying colors, rounded edges and transparencies.
Keep-alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request. It just required adding the following to the .htaccess file:
# enables KEEP-ALIVE <ifModule mod_headers.c> Header set Connection keep-alive </ifModule> # END enables KEEP-ALIVE
Remove query strings from static resources
I couldn’t really do much about this without the help of a plugin. I installed Zendy Speed: Query Strings for this purpose. It increased the rating from 83% to 94%…
For the other recommendations, much of it was out of my control, as they mostly related to 3rd party WordPress plugins. So I continued to fight plugins with more plugins!
I found the article ‘The Ultimate Quickstart Guide to Speeding Up Your WordPress Site‘ extremely useful. It requires installing the W3 Total Cache and WP-DBManager plugins. The W3 Total Cache plugin optimises your site using caching: browser, page, object, database, minify and content delivery network support.
The last thing I did was something that the YSlow results advised. It recommends using a Content Delivery Network (CDN) for some of the resources. I couldn’t really do anything about the 3rd party plugins this time, but I did have a few resources of my own I was calling locally in the header.php template file. Luckily I came across the CDNjs library resource. You can browse the library for any plugins you’re using, and get a full CDN url to use instead of locally calling files. It supposedly means less load on your server, therefore meaning less work for your server to do. An interesting post on the subject can be read here. Interestingly though, PageSpeed recommends reducing DNS lookups. So I guess you need to find a bit of a balance.
After setting all this up, I re-ran the performance test. The results were way better than I expected! I’ve nearly halved the page load time and total page size. The requests have also been reduced from 27 to 19. I’m very pleased with that.
It just goes to show that this procedure shouldn’t just be an afterthought, and that making some images smaller is all you need to do… It should be PART of the process EVERY time. And it should be regularly monitored if your site is constantly being updated.
Share my post!