Today I want to go through some ideas on how to improve your WordPress website load speed. They might be something you’ve heard before, but give them a read over and ask yourself if you’ve applied some of these simple principles. They might help!
Here’s a quick look at the list and link to jump to to each section!
- Minification/Fewer HTTP Requests
- Minify JS & CSS file contents. Reduce the number of HTTP Requests each page has.
- Optimise Images
- Use a compression tool on your images. There’s various tools outside of WordPress, but also a useful one in WordPress.
- Plugins (or removal of)
- Don’t clutter your website with too many plugins! You could end up with hundreds of unnecessary scripts & code on your website.
- CDN (Content Delivery Network)
- Use a CDN to stream content to users as quick as possible. Investigate 3rd Party pricing packages and pick the best one for you.
- Caching/.htaccess
- Use a caching plugin (e.g W3 Total Cache) or edit your website’s .htaccess. Check out our WordPress .htaccess boilerplate on GitHub.
- BONUS: Hosting
- Make sure you’ve got good hosting! It’s the solid foundation you need to build on top of in order to create a stable, lightning fast website.
Minification/Fewer HTTP Requests
Technically there are two points here, but they go hand in hand very well. The first step in this process is to minify your CSS and/or Javascript file contents. This means getting rid of any needless characters that could be present in the form of:
- White space
- New lines
- Code formatting
- Comments
These things can be really useful when you’re writing your code, but it’s not actually necessary in order for your code to run. This means you can get rid of them to save previous bytes. By all means, keep your original files but only link to your minified files on your website, and you can use a task runner to help you with this. We’ve recently adopted Gulp as our weapon of choice, but there’s loads out there you can choose from!
We’ve recently adopted Gulp as our weapon of choice, but there’s loads out there you can choose from!
So now you’ve saved some time loading unnecessarily large files, here comes the second step which is all about creating fewer HTTP Requests for the browser to load. To do this, you’re going to want to combine your minified files. You’ll have to tread with care here though and be sure to thoroughly test your website as you go – combining files can sometimes cause problems! Don’t try to minify already minified files as this can sometimes be problematic and some files just break. Do what you can and if you can’t combine all files, think about only including scripts on specific pages that actually require those scripts.
For example:
If you’re loading a jQuery Slider on your homepage and nowhere else, why load the slider js library on all pages?
You might be tempted to install plugins to do this, but it’s not always the best option. There are some good ones about, Better WP Minify being one, but sometimes plugins can give you less control over the file output than required.
You’re not going to be able to control all JS & CSS files, however, some may be loaded through other plugins you have loaded onto the site which can’t be helped. But keep in mind point 3 from this list!
Optimise images
Optimising images might seem like a simple and obvious point, but you’ll be surprised how many times it’s not done, or not done properly. It’s one technique which can speed up loading times exponentially. Like the previous point, there’s a couple of ways you can do this. I won’t go into too much detail about them, but you’ll get the general idea.
Straight Outta Photoshop
So one way to do this is straight from your image editing software. The key is to play with the settings until you can export an image that you’re happy with the quality of and is reduced in file size. The best way to do this is by comparing the optimised and non-optimised versions of the image.
WordPress
You can also use a simple WordPress function to save an optimised version of the image. There’s a filter that you can hook into and pass through a percentage which equals the level of compression applied to the image. The code looks like this and can be placed in your active theme’s functions.php:
add_filter( 'jpeg_quality', create_function( '', 'return 80;' ) );
This will only execute on all new images uploaded to the media library (as it runs on upload), so older images won’t be affected.
I guess the problem with something like this is that when you upload your image, you won’t know what the output of the image actually looks like until it’s on the website. This is why completing this step first is better.
If you don’t fancy adding this code to your website manually, there are plugins you can use. A few that are worth looking at are WP Smush and EWWW Image Optimizer.
Plugins (or Removal Of)
Whilst you can, in theory, install plugins to try and speed up your website, you can also have too many plugins and have the opposite effect. I’d suggest thoroughly checking plugins you want to install on your website, not only for vulnerabilities but also for any issues they might cause your website. Plugins can also be a big contributor to multiple HTTP Requests (a point I covered above), which little by little will slow your website down. Extra requests means more things to load and in turn, slower loading!
So before installing plugins willy-nilly, make sure you actually need them first (and they don’t contain vulnerabilities that could take your site down!).
CDN (Content Delivery Network)
A CDN can be a trusty sidekick in terms of improving website load speed. Firstly, a quick explanation of a CDN, sourced from Google:
A content delivery network (CDN) is a system of distributed servers (network) that deliver webpages and other web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.
So to put it even simpler, content served to a user is based on their location in relation to a content delivery server. The closer they are to one of these servers, the quicker they’ll load content (in theory).
CDNs usually require a third party service. Like everything else in web, there’s loads you can look at. MaxCDN seems to be a very good one with a lot of good reviews and case studies. There’s also Amazon, Rackspace and Cloudflare, amongst others. There are costs associated with CDN services, so be sure to pick the right plan for your needs before you dive in.
Once you have your CDN service in place, you’ll need to change the output links of the files you’ve decided to serve through the CDN. You can do this manually but there’s also a really good CDN integration in the W3 Total Cache plugin which is definitely worth checking out.
Caching/.htaccess
There’s a lot that can be said of Caching and how it can help improve your website load speed. Another Google definition for you:
A web cache (or HTTP cache) is an information technology for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce bandwidth usage, server load, and perceived lag.
So caching is essentially storing a copy of the pages and resources of the website in your browser, meaning when you revisit the page the load time is decreased. This is because the temporary version that is stored by the browser is loaded, instead of you having to load all resources again.
With WordPress you have a few options at your fingertips. Like everything else in WordPress, there’s a plugin for it or there’s the manual way. Both get the job done, but I guess it depends on how confident you feel trying to do it all yourself. The .htaccess part of the title, refers to when you opt for the manual caching option as this is the main file you’ll be working with.
Caching Plugins
I’ve used a few of the many caching plugins out there and on the whole, they all seem to be pretty good. The two that come up time and time again are WP Super Cache and W3 Total Cache – both are great and stacked with features. Bear in mind they can be tricky to configure sometimes as you have to make sure the features you’re using are supported. You can read all about the features on the plugin pages.
Manual Caching
As I mentioned above, the .htaccess file on the root of your website directory is the best place to start when adding caching techniques yourself. There’s a pretty good article in the Google Developers website which you can find here – it’s worth a read. Here at Creare, we have a WordPress .htaccess Boilerplate which is currently on GitHub. We’ve packed it with various parts, some of which are speed and compression related – you can find the Github page here. If you have any ideas or improvements, we encourage contributions.
Bonus: Hosting
I’ve decided to add one more point into this list of 5 as a bit of a bonus! I think all these points are important and this may be the biggest of them all. You need to start out with decent hosting. They say you get what you pay for and in the most cases that can’t be true enough. If you don’t start with a good platform then there’s potential for all of the hard work you do to not have too much effect. It’s a good idea to look around and really weigh up your options. Go for the best hosting you can, at the end of the day it’s to host your website which you want to be as accessible as possible, right?!
Technically not hosting, but here at Creare we’ve been introduced to CloudFlare. We have a fair few websites running on it now and I can only speak of good things so far. CloudFlare has your back when it comes to a few of the points above. It offers a huge range of features which you can turn on/off per website and the speed increase you can get is great. Another handy accessory to have in your tool belt!
So I hope the above list has provided some good ideas to help you speed up your website. If you have any of your own tips or thoughts, please leave in the comments below!