Alex HyettPeople think that Google is some mysterious organisation with a mythical algorithm that searches the web and gives you the answers you need. The reality is Google’s algorithm isn’t that difficult to decode. At least the intentions of it aren’t. I will be going into detail in a future post how Google ranks websites, for now I am going to focus on one aspect, page speed.
Google’s sole objective is to find the website that best answers your query. Google tracks which results you click on, how long you spent on the site and whether you find the site so interesting that you stick around. The results are the output of Google’s product and therefore bad results make Google look bad.
So if your site takes a long time to load, visitors will get bored of waiting and try another link. As a result your website moves down the rankings as Google doesn’t want to show slow pages to it’s users.
You could write the best content in the world but if your page takes 10 seconds to load, no one is going to read it.
If you have followed my post on How To Start a Blog or already have a WordPress blog, read on and I will show you how to speed up WordPress and make Google and your visitors happy.
Now before we embark on our optimisation quest we need to do one thing first, take a measurement. As with all performance optimisations, you can’t know if what you are doing is working, if you aren’t measuring it.
Step 1: Take a benchmark
There are a lot of websites you can use to take a benchmark of your website. However there are 2 we are going to use today.
Google PageSpeed Insights
As far as rankings are concerned if Google think your website is fast enough, then that will probably do. Go along to the PageSpeed site and see how your website is doing. This is mine now after following these optimisations:
Not bad but still room for improvement. Ironically one of things they recommend I improve on is their own Google Analytics scripts!
Pingdom Website Speed Test
If you have caught the optimisation bug then head over to the Pingdom test. These guys will give you a much more detailed overview of what is slowing your site down.
Again here is mine after following these optimisations:
Step 2: Fix the big stuff
There are only a few reasons why your website might be running slowly. Either you are trying to download very large things or you are trying to download lots of things.
So lets focus on the large things first, images, videos and music. If you have a 2 MB image on your front page it is going to load pretty slowly for most users. There are a number of WordPress plugins that make this easy for us.
Images
My personal favourite at the moment is Optimus. It compresses your images as you upload them to WordPress which means you can focus on blogging and not worry about compressing your own images. It also allows you to bulk compress images as well.
Optimus is the only plugin that I found which compressed images enough to pass Google’s PageSpeed test. Google will actually give you some compressed images you can use in case even Optimus isn’t good enough.
Music and Video
If you have music which plays when you load up the website, just stop, problem solved. Unless you are Spotify or a music streaming website your visitors don’t want to listen to your favourite song when they go on your site.
As with music, videos should only be loaded when the user wants them to be and shouldn’t effect your content. We come on to this in more detail later in this post.
Step 3: Fixing the little stuff
After solving some of the bigger things which are slowing your website down we need to look at all those little things. Every HTTP request your visitor’s browser has to make is going to slow down your site. The aim is to try and reduce the number of requests as much as possible.
Each plugin you install will likely have it’s own CSS and Javascript that is loaded when your website loads. All of these add up, and before you know it you have a simple web page making 40 requests just to load the page.
Luckily there are some more WordPress plugins we can use to fix this for us.
Minify and Merging CSS and Javascript
The first one is Autoptimize and is what I use to minify and merge all of my CSS and JavaScript. When you minify a CSS or JavaScript file it modifies the files so that they take up as small amout of space as possible. This includes removing comments, removing whitespace, shortening JavaScript variables and moving everything on one line.
This is all done automatically and at the end of the process you should have just one CSS file and one JS file on your website (excluding external links).
Caching
WordPress is a PHP and MySQL application. Each post you write is stored to a database and retrieved whenever a user visits your site. However, once you have written a post, how often do you come back and change it? Probably not very often, if ever. This makes it perfect for caching. Until you write a new post or someone comments your whole website can be cached. It is much quicker for your server to serve a static HTML file than it is for it to retrieve data from a database.
There is yet another brilliant plugin for this called W3 Total Cache. This will cache the pages on your website as well as provide other useful optimisations.
Step 4: Where is your content located?
So by now if you rerun your PageSpeed/Pingdom test you should get a better result then you did previously. The next stage is to attack server load times. How long it takes to download data from your website is largely going to depend on where your users are located. If your website is hosted in the UK but your users are in India then expect the page to take slightly longer than you are experiencing. You can actually use the Pingdom test and change the location to see what a difference location makes. To solve this we need to host our content in multiple countries. So how do we do that without setting up an expensive multiregion server set up?
Content Delivery Networks (CDN)
This is the role of content delivery networks. They will take your now static files (see W3 Total Cache above) and host them across multiple servers around the world. They then sit between your users and your website and host the files from the nearest server available based on your user’s location.
I use Cloudflare for this as they also provide SSL for free which is another factor that affects Google page rankings.
Cloudflare can only be used if your website is self hosted as you will need access to your domain’s nameserver setup. The process is fairly straightforward if you know a little about domain name set up. I am not going to include details here as it varies widely between domain registrars. The general process is as follows:
Sign up for a CloudFlare account and enter in your domain name. CloudFlare will download your current nameserver set up and point it’s servers to it. Log on to your domain registrar and point your nameservers at Cloudflare instead of your hosting nameservers. Enjoy free SSL and global content delivery! There is also a CloudFlare WordPress plugin you can install to manage your website settings. Once the above is done you should get pretty high score on the tests.
Step 5: Above the Fold content
You have probably seen on Pingdom and especially Google PageSpeed about optimising for “above the fold” content and wondering what this is all about.
Above the fold content is simply the content on your website that appears before the user has to scroll. If everything “above the fold” loads quickly then the user will think your website loaded quickly even if stuff a few scroll wheels down is still loading, as they can’t see that stuff.
Unfortunately, I haven’t managed to find an above the fold content plugin that can automate this for you. If you know what you are doing you will want to use the Above The Fold Optimization plugin.
The goal is simple, any CSS that is needed to render the top part of your website should be included in the HTML without the need to download a CSS file. This is known as Critical CSS. The Above The Fold Optimization plugin has an option for inserting your critical CSS into your website but you are going to need to know what that is.
Andy Osmani has written some JavaScript code to extract the critical CSS from your webpage. There are also a few Gulp plugins that will do this if you want to automate the process.
If I manage to find a good way of getting this to work I will write another blog post on it.
Ideally we would take this one step further and only load content just before the user sees it. However, in reality this is probably overkill unless there is some page speed requirement you need to adhere to.
One area where this is important is videos. You don’t want to be loading a video on your page unless the user is actually interested in watching it. Luckily if you are embedding video from external sources such as YouTube or Vimeo their embedded code will handle this for you.
Step 6: Accelerated Mobile Pages (AMP)
The last step is to provide your mobile users with the fastest experience possible. Your website should be fairly well optimised for all users but to give your mobile users the best experience they are going to need a tailor made one.
Google has come up with an initiative to tackle this called Accelerated Mobile Pages or AMP for short. You may have come across this before on your mobile. You are taken to a webpage that resembles your site but the address in the address bar is still Google.
Essentially this is just scaled down version of your website that should load quicker for mobile users. Google will then cache these pages which is why they appear to be from Google.
So how do you implement AMP, you guessed it, yet another plugin. You can use AMP for WP
Conclusion
After implementing the above techniques you should find you now get a Google PageSpeed and Pingdom score in the 90s. If you want to get the coveted 100% score from Google, you will need to look into inlining your critical CSS as mentioned in Step 5.
If this was useful or you know of some other WordPress plugins that have been useful please leave a comment below.
