As part of this site’s latest makeover, I went all out to optimise its performance. Like an F1 car, the slightest of adjustments can have a big impact on performance so I’ll run through my top 5 tips for optimising wordpress…
First things first, you need to establish a benchmark. You can’t improve something by measuring it against nothing. What I look for initially is page size, the number of requests on the page and how the site performs in Google Page Speed, YSlow & Pingdom (or just enter the url in to gtmetrix which is a handy performance reporting tool which combines elements from them all). What I *don’t* care about is page load time… why? Well it tends to be distracting and misleading. It will vary based on where the testing server is and perhaps whether anything has been cached anything etc.. you’ll likely get a load time of 2 seconds one minute, 1.7 seconds the next even and 2.8 seconds after that even though you haven’t changed anything on the site. Obviously that doesn’t help you optimise your website so that’s why it’s important not to get too distracted by load time (until you know everything that can be optimised, has been optimised).
1. Removing plugins, widgets and crap that isn’t necessary
I remember having 30+ plugins installed and active at one stage. I’m down to about 10 these days and all of them are necessary. Plugins that aren’t very popular tend to go stale quickly, can poorly written and over time may pose security threats… but my pet hate is when you delete a plugin and it doesn’t remove its crap from your database. So don’t just assume when you deactivate and even delete a plugin, that’s it gone for good. You may find it’s left a few surprises for you in your database which you have to clean up manually.
Also have a think about whether you need Facebook like boxes, twitter widgets and all of that stuff pulled in from external sources. It all tends to be horribly slow and not that well optimised for your site and your users. Fixed width widgets or iframes really aren’t acceptable these days and although they help make a site look busy and pad it out with content, question deeply whether they actually add any real value for your users (I’ll give you a hint: they don’t). Remove all of the social crap and widgets from your site and you’ll almost instantly notice a visible boost in your site’s performance, without having to run any tests.
2. Compress & optimise images
When it comes to photos and general graphics, i don’t tend to host many on this website but if i do, i optimise them all. I’ve seen hundreds of 5mb photos being scaled down to thumbnail size using CSS and 20gb of server space being maxed out due to someone uploading very high resolution photos directly from a memory card. These are messy situations to cleanup but it has to be done. Luckily, there are some plugins that help compress and optimise images. EWWW Image Optimizer is my favourite.
I’d also highly recommend you install the wordpress Jetpack plugin and activate ‘Photon‘ – which is effectively a free CDN service for your posts’ images. You still upload images as normal to your own server, but Photon will mirror them and server the mirrored images to users, saving your server’s resources and resulting in a performance boost for your users. Jetpack is a bit like marmite among the wordpress community because on the one hand it offers some really great features like Photon, but on the other it enables (by default) a lot of crap, useless ones which you have to manually deactivate.
If possible, you should also be using sprites to reduce the number of http requests. The problem with sprites is that they tend to require a lot of CSS in order to work smoothly in responsive design but if your goal is to optimise a website for speed, this is an easy win.
3. Cache everything
I use the wonderful W3 Total Cache as my go-to cache plugin. It’s packed full of features and options that nobody knows how to use, so it can be a little intimidating at first but out of the box it works quite well.
4. Minify everything
Minifying CSS & Javascript files will remove comments, spaces and line breaks from code. Stuff that isn’t necessary, unless you’re developing. Both W3 Total Cache and Cloudflare (I’ll get on to it next) offer minify options but in my experience W3 Total Cache does a better job, at least according to the ratings on Page Speed & Yslow.
A word of warning: don’t link W3 Total Cache with Cloudflare (even though there’s an option to do it). If you do, it’ll turn off W3 Total Cache’s minify options and use Cloudflare’s by default. It’s not going to kill anyone, but it just means you’re losing out on a fraction of a second. Going back to our F1 analogy, every minor improvement counts and can make a difference to the end-user.
5. Use a CDN
A content delivery network takes stuff from your website and stores it on a bunch of servers in different regions. Why? Because it will make the site load faster for most people. The internet is great, but it’s not immune from the laws of physics. So if a website is hosted in Dublin and i visit it from somewhere in Dublin, it’s going to load much quicker than if i visit the same website from New York (all things being equal).
If traffic to my website is global, however, it would make sense that I try to host the website in as many different places as possible, to ensure everyone can access the site as quickly as possible. I could buy hosting space in each continent and mirror the website on all of those servers but that’s expensive and time-consuming. A CDN is a more efficient solution – it clones stuff from your website and stores it in multiple locations around the world for a set period of time in a bid to speed up your site for as many people as possible.
Cloudflare is a free CDN and ridiculously simple to use. I use cloudflare. These are my performance settings…
The minify options are switched off because I’ve switched them on in W3 Total Cache instead.
Practicing what I preach
It’s easy recommending doing certain things but it’s not quite as easy when you’re the guy tasked with implementing the recommendations. There are always trade offs… for example i decided against using sprites even though I know they’d reduce http requests and bring load time down. The reason why i decided against using sprites was because I’m not certain all of the icons I’m using will be there for good. I may change them. Plus sprites and responsive designs don’t really play well together – they require a lot of custom CSS and meddling. So the time involved in all of that isn’t worth it for me. It may take a couple of hours doing that and if I were to change the icons at a later date that would be work down the drain…
However, I did make an effort with virtually everything else. These are some test results over the past 24 hours or so when i really started fine tuning… I’ve reduced the number of requests from 31 to 23 and shaved about 7% from the original page size. Those improvements have resulted in straight A ratings from GTmetrix, up from B ratings when i started…
