How’s that for a catchy title?! This is a semi-advanced guide so you will need some knowledge of the back-end of WordPress and will require FTP access so if you’re unsure, get in touch using the comments at the bottom or send me a private message & I’ll talk you through the bits you don’t get.
The load time of a page on the web is 15.23 seconds for full rendering. 15 SECONDS! Sit in silence for 15 seconds and you’ll know just how long that feels. Obviously, the longer the load time, the more users will get bored and leave your site without even making it to the content. A page should be readable after 2 seconds – every added second after that decreases the conversion rate of your website.
So let’s speed it up.
As always, take a full backup of your website before making any of these changes (I will not be held responsible for broken websites!).
Measure a Starting Point
First things first, you need to be able to measure the changes that you are making are actually making a difference so let’s take a baseline report of your website as it is now. Google’s Page Speed Insights tool will give you a number out of 100 for both Desktop and Mobile speeds so run your website through this and note down your score. It doesn’t, however, tell you the actual site speed. For this, I use Pingdom Website Speed Test which gives you a huge amount of detail. For now, just jot down the site speed and performance grade. By the end of this guide, you should see all these numbers improve (hopefully!).
Image Optimisation
Images are the number one cause of slow website download speeds. There are two ways you can go about optimising images. The way that works best for me is by using Kraken and following these instructions:
- Copy the entire Uploads folder from wp-content (this might take a while if you have a lot of images so go make yourself a brew).
- The Uploads folder should be separated in years and months. Run each folder through Kraken.io. Make sure you choose LOSSLESS compression.
- Download the .zip file and extract the optimised images into the same folder. Copy & Replace the existing images.
- Do the same for each of the Month folders.
- Upload the whole Uploads folder up to FTP.
- Enjoy super-fast, optimised images on your website!
If you do this process every month or so then you’re images will always be optimised.
Moving Javascript to the Footer
Javascript files block the rendering of a web page so if they are in the header they will slow down the time that the content becomes visible. By putting them in the footer, we tell them to load at the end of the rendering process to eliminate render blocking.
You do this by adding this code to your functions.php file.
Make sure you test your site on desktop and mobile after adding this. If it all works, that’s great; if not, just remove the code from the functions.php file and re-upload it. Then, if that doesn’t work, this gives a comprehensive guide on how you can move Javascript one-by-one to see which is causing the problems.
Load Javascript Asynchronously
So at the moment, all our javascript is loading one at a time in the footer. Whilst this is better than before, we could make this process even quicker. By adding an ‘async’ attribute to each Javascript call we can force them to load at the same time. You might as well use a plugin for this as it will continuously update the Javascript calls if any are added. This Plugin works well.
Minifying CSS
This is straightforward enough. Find your style.css file and copy it. Rename the copy min.style.css. Copy all the content in the new file and paste it in CSS Minifier. Copy the minified results and paste it back into the min.style.css file and hit save. Upload it.
Now is the trickier bit. We need to make sure your site is pointing at the new minified CSS file, not the old style.css. With any luck, you’ll be able to pop into your functions.php file, find the bit that says wp_enqueue_style, and just add a ‘min.’ to the beginning of your style.css file.
If you get to your functions.php file and can’t find a wp_enqueue_style it’s probably in the header. Instead of changing the header file itself, recreate the entire script shown in the above example and you should be able to overwrite your original stylesheet.
Remove Unnecessary Header Crap
WordPress puts a load of code in the header which can slow down the load speed. Most of it is from its blogging origins but are not needed on a business website. Add this code to get rid of a lot of it.
Compression & Caching
By enabling compression and caching you allow a users browser to remember your website so the next time that person visits your site, it downloads the content from it’s memory bank which is a lot quicker than downloading it from scratch every time.
To do this add this code into your .htaccess file.
Retest!
Make sure you test your website thoroughly on desktop, tablet and mobile to make sure nothing has broken. Run your website through the Page Speed Insights tool & Pingdom Tool and see the improvements.
