8 Tips on How to Speed up your WordPress site
During the build of our new website, I personally dedicated a lot of time on WordPress optimisation and server side scripts to ensure that our website loaded as quickly as it possible could.
It’s a sort of online myth that Google penalises your site if it’s not really fast. From my research your website has to be really slow before it starts affecting your search rankings. That being said, a fast website is better for your end user — and who likes to wait around?
Web Server Software
Since we began we’ve always served our websites using Apache. Apache is the most common server side software for Linux servers. It’s easy to set up and it’s pretty simple to get to grips with. Unfortunately due to the way that the modules integrate, it can get pretty bloated therefore slowing down your website.
I wanted to rectify this on our new site, so I took a look at NGINX. NGINX is an alternative to Apache released in 2004. It has grown in popularity due to its light-weight resource utilisation and ability to scale easily on minimal hardware. NGINX is also very good at serving static content quickly, and passes off dynamic requests to other software that is better suited to those purposes.
There’s a down side. It’s not as easy to pick up as Apache. We host our sites with Digital Ocean and they offer a wealth of tutorials and guides on setting up your VPS from scratch with many different softwares. So I decided to set up a test box, and give it a whirl.
It’s fast from the start, load time is drastically reduced, and the connection time between the browser hitting your domain and redirecting to the server decreased by at least 10%.
To increase speed further I then installed the mod_pagespeed module. This is where it starts to get complicated. With Apache, you can just download and add this module on, whereas with NGINX effectively you are required to build an installer with the module included and then install NGINX. Luckily Google provide a tool that does much of this for you. Watch out for where it installs NGINX in your system as you may need to set up a symlink.
HTTP Strict Transport Security (HSTS)
SSL has been known to potentially have marginal effect on your site’s SEO, and you can now get free SSL Certificate with Let’s Encrypt. So I thought, why not? Let’s secure our site.
However add an extra wait time when a browser requests your domain. This is because your site will be redirecting from HTTP to your HTTPS domain. That’s bad right?
Here’s where HSTS comes in. HSTS is a list of domains embedded right into Chrome to be known as HTTPS only. Most major browsers such as Chrome, Firefox, Opera, Safari, IE11 and Edge now have HSTS preload lists based on the Chrome list. This tells the browser that our site is now served from HTTPS and to go directly to that, rather than redirecting from HTTP. That eliminates the wait. Pretty cool huh?
Content Delivery Network (CDN)
It’s probably overkill for our site, as many of our clients are based in the UK and only a few overseas. However it does provide the advantage of putting less load on the server and means that the browser can load it asynchronously. Sounds pretty fancy, but what does asynchronously mean?
When a browser visits a website it downloads each element of the page, and it does this one by one. As it can only make one request to the web server at a time. The advantage of using a CDN is that the browser is loading the files from a different server/ip address which means it can load the files at the same time significantly speeding up page load.
AJAX Page Loading
This was a big feature that we had on our to-do list before we even began designing our site. AJAX offers both a speed benefit, and a user experience benefit.
AJAX allows us to refresh only the content that changes on the page when the user navigates to another page on the site. As the page isn’t actually being reloaded just injects the new content allowing us to add a nice fade/slide/whatever transition without the abrupt white screen reload.
A nifty feature of AJAX, and in particular SmoothState, is that when the user hovers over a link to another page, we can start preloading that page’s content in the background without the user even knowing. There’s around a 300 – 500ms delay between a user hovering over a link and actually clicking it — this is quite a lot in server time. Before they even click the link (depending on their connection) we could have almost preloaded the whole new page so the page load delay time is non existent, skilfully hidden in the user’s ‘hover’ time.
With the advent of HiDPI devices such as iPhones and new MacBooks we’re having to serve higher resolution images for them to look sharp.
Images and video are the biggest drain on bandwidth when visiting a website. Even a highly compressed image with a retina resolution will still equate to around 150kb or probably higher. On the average connection that works out around a second per image downloaded. Most sites are pretty image heavy and that all adds up.
I hear you saying “do we really have to load in the highest resolution image available if someone is browsing from a mobile? That doesn’t make sense”.
You would be right, we don’t have to do that. In comes the responsive <img> tag as we can now save the image in a variety of different sizes, optimised for different screen sizes. This means we’re only loading the image that’s needed and thereby reducing the load time.
You can also pair this with lazy loading. Lazy loading only starts downloading the image just before it comes into the users viewport. So the page initially loads quicker with a very small resolution version of the image, and just before the image scrolls into view, the browser loads the correct resolution for your device.
Caching your site
If you’ve never heard of caching you should be ashamed of yourself. But if you don’t, it’s a way of saving a ‘copy’ of your website on the viewers machine so that if they come back to it another time, it only loads items that haven’t changed from their computer which makes it very quick to load.
There are plenty of plugins that help you manage how your site should be cached but ones that we’ve tried and tested are W3 Total Cache, WP Rocket and WP Fastest Cache. We can thoroughly recommend all of them and it’s down to you which ones fits your needs best.
WordPress runs on PHP, which is a dynamic language that runs the code when you load the page. Imagine your homepage has a heading and an image, when the user loads the page PHP tells the server where it can find that file/text in the database and then outputs the HTML for the browser to display. This is great, but serving dynamic content like this causes a wait and also imposes a load on the server.
Now unless you’re updating your site every minute, it doesn’t make sense to do this every time someone views your site. What if we could run the PHP once and save a copy of the outputted result and serve that to the user? Sounds like a dream, I know.
Fortunately we can do that. There’s a NGINX add-on for WP Rocket which allows us to serve previously cached files without calling WordPress at all. This makes load times lightning quick. It also does other bits like add headers to control browser caching.
This is just a brief overview and by no means comprehensive of how to optimise a WordPress site. Tools we’ve found very useful are Pingdom, Varvy and GT Metrix, and they can really help you determine where you can improve your site’s load time.
If you have any questions don’t hesitate to drop me a message at firstname.lastname@example.org