It’s been a while since I relaunched my company website, 2nd Floor. I worked hard to get the best performance I could from the website, running multiple page speed tests and really trying to hone it down.
After hours of experimentation (yes I got a bit obsessed with it) I was able to get a good compromise between page speed and sensible site maintenance.
The most important thing of all is that I’ve done it all with WordPress as the CMS, for the most part utilising freely available plugins from the WordPress plugin repository and its all been done on relatively inexpensive cloud hosting from TSO Host < click that link for a 10% discount.
At the time of writing, weare2ndfloor.com is performing at 72/100 for Mobile and 93/100 for Desktop according to Google PageSpeed.
Firstly, there are a lot of plugins out there that claim to do similar things to each other, I tested loads of them and the list below is what I ended up using on 2nd Floor. They provided the best performance for me
- EWWW Image Optimizer – this plugin automatically optimises your images on upload at a lossless compression. You can also batch optimise existing images.
- Unveil Lazy Load – based on the popular free jQuery version Unveil.js this plugin enables lazy image load, meaning pages load faster and the number of server requests on page load is decreased.
- W3 Total Cache – This is one of my goto plugins for quick reliable caching and compression. Out of the box, you have a number of caching and compression settings and if you want even more you can upgrade and pay for a premium version of the plugin which allows even more control. 2nd Floor uses the free version currently. If you want all the compressed files to land in the footer rather than the default <head> insert this just before your wp_footer();
<!-- W3TC-include-js-head -->
- WP Retina 2x – If you upload images at a large scale, a retina version will be created for retina devices. You can also tailor the plugin via the built in settings to not deliver retina to mobile devices if you are mega keen on quick download for mobiles.
There are a number of tweaks you can make to your .htaccess file, I found this was the only one that actually worked and was supported on cloud hosting from TSO, this sets expire information for all the mime types:
ExpiresByType text/css "access plus 60 days"
ExpiresByType image/ico "access plus 60 days"
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/jpeg "access plus 60 days"
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/png "access plus 60 days"
ExpiresByType text/css "access plus 60 days"
ExpiresByType text/html "access plus 60 days"
Along with running W3 Total Cache for the general compression and caching, from a development perspective I can heartily recommend Mixture.io. I use it for all of my development, WordPress, HTML, anything. I only use a fraction of what it is capable of, running in simple mode I let it deal with all of my compression and minifying. It does it all on the fly and you can test websites locally across all devices, very handy. I don’t know what I’d do without it.
Instead of loading the default style.css for 2nd Floor’s theme, I’ve set WordPress to enqueue the .min version to save some bytes.
Changing jQuery load position
As I said above, I got slightly obsessed with download speed, so I did something I normally wouldn’t do for WordPress. I forced jQuery to load in the footer.
This is not a recommended technique if you are producing client work or theme based work that you are going to hand over to a client or customer. However, if you have full control over the website and no one else is going to be installing plugins or fiddling with the code, you can use this technique to deregister jQuery from the head and load it in the footer via a CDN with the WordPress local version as a fallback.
These are techniques that I considered doing, but didn’t.
- Enable a CDN – W3 Total Cache allows your to hook in your chosen CDN. I didn’t do this as I was happy with the page load speed. I am planning on testing it out at some point, maybe.
- Enable Varnish Cache – I was unable to set up Varnish on Cloud hosting, but some hosts do allow it, so check with your host if you are interested in looking into this.
- Enable CloudFlare – CloudFlare protects and accelerates websites. Much the same as the CDN, I had to stop somewhere and didn’t get round to testing this out.
- Use WP Engine – I know this defies the point of the post, but it would be remiss of me not to mention this service. WP Engine is one of the best WordPress hosting solutions available, using this link, if you pre-pay for 1 year of hosting, you get 2 months free
The above are techniques that worked for me, there are many more improvements that can be made to really optimise your WordPress install, it would be great to hear your thoughts, techniques and hints.