Earlier this year I delivered a short talk on how to make your WordPress website load faster. Nobody of course likes a slow website and, indeed, it’s pretty obvious a slow website will cost you traffic and sales, but it’s an area many website owners often neglect.
My presentation below was the closing session of WordCamp London 2016, a national event dedicated to all things WordPress, held at London Metropolitan University. The conference took place between 8th-10th April 2016 with over 500 attendees.
I also gave a similar presentation to WordCamp Birmingham in 2015, where I gave the opening session in track two.
This is a huge topic and I literally just skimmed the surface when it comes to WordPress speed optimisation, but hopefully this gives some food for thought and I hope you find some of the links handy!
Turbo-speed your WordPress website!
What Google say about website loading times?
We [Google] must deliver and render the “above the fold” content in under one second, which allows the user to begin interacting with the page as soon as possible.
Google believe that after a second, a user’s mind starts wondering when the content is going to appear. After a couple more seconds, people are getting increasingly frustrated, with a greater chance every ongoing second that the user will abandon the pageload.
However, websites are getting increasingly bloated
The HTTP Archive reports that the average weight of webpages has increased by 12% in the past year to over 2MB (April 2016), with about 100 HTTP requests (individual files) being downloaded into a visitor’s browser.
The graph below covers 2011-2016:
- Left axis, dark green line = page weight
- Right axis, light green line = number of files loaded
Bloated websites are not mobile-friendly
Over the past few years, most of us have been spending a lot of time making websites easier to load on mobile devices, yet this increasing bloat is making websites slower.
When using a 3G connection, for instance, the initial request from the smartphone takes about half a second at best, before any content has even started to download. Many mobile devices can only download six files simultaneously (from a single host name), so if your user has a slow data connection and your website has 100 files to download, then there’s a high risk your webpages are taking several seconds to fully load!
Although the issue isn’t of course just confined to mobile use – I’ve recently witnessed WordPress websites on my desktop taking well over ten seconds to load.
Slow loading speeds harm your SEO
Slow websites not only create a bad user experience, but can also harm your SEO (Search Engine Optimisation). Google is known to use loading speed as a ranking factor and that’s become increasingly important.
So, how do I test my website’s loading speed?
Here’s my pick of three tools I use most often to check website loading speeds:
- Pingdom – it’s got a nice and really simple-to-use interface.
- Google Speed Test – offers some great advice and a really useful tool for checking mobile speed optimisation.
- webpagetest.org – the Swiss army knife of speed testing, with a choice of dozens of browsers (including mobiles), many locations (including London), connection speed emulation, and it will even record a video so you can pause the loading sequence.
Remember, don’t just test your home page – all your landing pages matter! I would also recommend repeating the test several times.
Note the waterfall in these tools below, which is the sequence in which your files load, and that’s important too. Non-essential files should load last.
At WordCamp London, there was also a good presentation on performance testing tools built into Chrome browser, so these are worth exploring too.
Make your WordPress website load faster
Server Side Caching
When a page loads, WordPress has to generate and assemble all the components of that page for the individual visitor. Take for example an intranet home page that we host for a client, which pulls in the header, footer, navigation menu, weather data, latest news items, latest comments, forthcoming calendar events, new job vacancies, recent tweets, and much more. That all takes a bit of time on the server and needs some processing power.
So the purpose of a server-side cache is to save a copy of the whole page, already pre-generated, ready to serve it immediately to visitors. I haven’t come across a case yet where a server side cache hasn’t improved website loading times!
A quick show of hands in the room at WordCamp Birmingham showed that the majority of people did use a cache to make their WordPress websites load faster.
If you have a whizzy web host, especially a WordPress-specific host, then your web host will probably have a professional caching service available. For example, they may offer things like NGINX, Litespeed, Memcached, etc. You might need to refer to your web hosting company’s support guides to enable this.
However, if you’re using a budget web hosting provider, you might not have access to sophisticated server-level caching systems and will have to find a solution yourself. There are several WordPress plugins that offer basic caching, and whilst they’re not as good as a proper web server caching system, they’ll still help your loading speeds. Two of the most popular caching plugins for WordPress are WP Super Cache and W3 Total Cache, but I’d recommend checking out Hyper Cache too as it’s one of the simplest caching plugins to setup and it performs very well in benchmarks. A paid-for plugin WP Rocket is also well worth exploring, plus there are many other plugins available if you have a search.
Let’s take a real example. I installed this off-the-shelf theme, which is pretty poorly optimised, and imported the demo content. The page weight comes in at a hefty 5.9MB, with Pingdom measuring a loading time of 5.24 seconds.
Activating HyperCache immediately makes a difference, with the loading time reduced by ¾ second to 4.54 seconds. (It makes an even bigger difference in the intranet example I mentioned above!).
Note, HyperCache doesn’t serve cached pages to a logged-in user, so when doing these tests, ensure you open a private viewing / incognito window in your web browser for testing purposes. Visiting the website as a logged-out (normal) visitor forces WordPress to generate a cached copy of the page, which then gets stored for future visitors, so do this first before running your speed test. Also, my advice would be to run your speed test multiple times to get a more accurate result.
Here’s the non-cached and cached loading times shown below, using the HyperCache plugin:
When a visitor loads your webpage, normally some web files are temporarily saved onto the user’s own computer or device. Resources such as CSS files don’t change very often, so you can tell the browser to save these files into a visitor’s local cache. If they visit again in the next few days, the browser will load these offline files instead of having to download everything from the web server, assuming the user hasn’t cleared their cache.
There’s various ways of telling a web browser to locally cache your files, but a quick and efficient way of doing this is by adding the following code to your htaccess file:
To speed up your website’s loading time, try to combine these files into as few files as possible to minimise the number of HTTP requests (file downloads) between the browser and the web server.
A good plugin to try is Better WP Minify, which was one of the first to do this, although there’s many more plugins now available on the WordPress plugin directory. Also check out WP Asset Clean Up. Always ensure you test your site in different browsers after combining files to ensure everything is working as expected.
So in the example theme I’m using, it’s loading:
- 23 CSS files
By activating the Better WP Minify plugin, it’s combined several files and reduced the count to:
This is the process of stripping out all the unnecessary code in your files, such as line breaks and comments, which make no difference to how the webpage actually looks.
Better WP Minify will also do this for you, but normally you shouldn’t expect to save more than a few KB, although every little helps!
So going back to our example, combining and minifying our webpage gives us another half second saving in loading times.
Notice the file size saving too – to be honest that isn’t normal to see such a large saving in the file size, but it has certainly helped with this particular theme!
Adding this together with caching before, this has saved about a quarter of the loading time already.
The benchmark below shows before and after combining / minification:
Images contribute most to the page weight and it’s really important to get this right.
Take our example theme, with a large feature image at the top of the home page. It’s very poorly compressed, with the file size of this image being over 1MB. Whilst it’ll unlikely be an issue for your visitors on broadband, it’ll probably be noticeable for those on a mobile connection.
With your images, any good desktop image editing software should allow you to:
- Resize your image files to dimensions suitable for the web. Downloading images straight off a digital camera will be far too big. Many users do not realise that simply dragging and resizing the image edges in the WordPress editor will NOT change the file size loaded. Use a desktop program to edit and save your images, e.g. 1000px wide is suitable for most web uses (measure your own body column!), or about 1600px wide for full screen width images (even if stretched for larger screens). There are also plugins that will resize your images upon upload to WordPress, but I tend to prefer having my own control over this.
- Save your images in the right format. For example, logos and files with a limited colour palette are normally best saved as PNG files, whilst photographs should be saved as JPEGs (and never PNGs!).
- Use file compression in your software to reduce the file size. If you haven’t got this facility built-in to your current software, have a look at RIOT image editor (Windows) for JPEGs, and the online tool tinypng.com can do magic with PNG files!
So in our example theme, I’ve reduced the file size of the feature image from 1.25MB to 250KB, with no noticeable loss in image quality. Doing this for all the other images on the page has also considerably reduced the data transfer needed (see below):
The speed results!
By installing two plugins and optimising a few images, all quite simple work, we’ve been able to reduce the time it takes to load this home page by a third. We’ve saved a bit of disk space too! And it’s quite a bloated, poorly optimised WordPress theme anyway, so that’s not bad work!
More ways to make your WordPress site faster:
Responsive image loading
It’s worth knowing about responsive image loading. It’s rather pointless serving an image file 1600px wide for a smartphone or small screen device. Ok, there’s high density pixel displays where larger pixel files can be an advantage for things like logos, but nevertheless in most normal circumstances you don’t need images to be massively bigger than the screen size!
Following the WordPress 4.4 release, WordPress will also try to automatically tell the browser if there are different sized versions available of the same image file, so the browser can make its own choice whether to download the full size image or a smaller version. This is particularly useful for mobile browsers and can cut down the data transfer (and therefore time needed) for pages to load. It’ll work automatically, but if you’re an experienced theme developer, you may want to set your own custom image sizes.
So, with a slider, ask yourself whether you really need it?
Most parallax effects normally rely on loading large scale images, where the section being viewed is a fraction of that whole image. Warning – these massive images can heavily contribute to your page weight, so if you must use parallax effects, use sparingly!
This is a technique, particularly good for icons and small logos, where you can combine multiple images into a single image. This means HTTP requests (the number of files loaded) is reduced.
In this example below, a number of icons, which change colour on mouse rollover, have been combined into one single image file. So rather than sixteen images loading, they’re all saved in one single image file. The web browser is told to display only a portion of this whole image each time you insert a sprite image.
Arguably, you could also use SVG (Scalable Vector Graphics) files in this case too, so you could explore this method too.
Using an icon font, such as Font Awesome, is a popular way of inserting icons into your web design. It means you can insert a large range of icons (including social media icons) via just one font file. They render quickly and scale well.
There is a downside that your icons start looking like lots of other websites, but familiarity isn’t necessarily a bad thing depending on how they’re used.
Also explore using SVG (Scalable Vector Graphics) for icons too.
Social share buttons
Some social share buttons display how many likes, tweet mentions, etc, a particular page has had. Whilst they’re eye-catching, they also open connections to these third-party servers and download extra files in your visitor’s web browser, so they can harm performance. So be careful using these and similar widgets!
You might want to try a simple share facility, such as Social Sharing by Danny, which still looks nice, but is designed for fast loading and doesn’t load any third-party resources. After all, the vast majority of your visitors never use social sharing buttons anyway!
Or use something like Font Awesome I mentioned before, which includes social media icons within its library, and you could create your own social media box design.
Your web host
It’s pretty obvious (and a topic too large to cover here), your web host makes a huge impact to your website’s performance.
If you’re targeting a UK audience, but your web server is in America, on a $4 / month hosting plan, the chances are that server isn’t going to offer the quickest speed! You get what you pay for…
If speed matters, look for hosting with dedicated server resources (i.e. RAM, processor cores) and decent technical specs (e.g. using SSD hard drives, NGINX, PHP 7). Performance goes hand-in-hand with reliability too.
Even more website speed tips!
Progressive page loading
For example, if you have features such as image rollovers or carousels, these images could be loaded after everything else.
Data URIs are best described as images saved as HTML code. Can be a useful technique for small icons.
Content Delivery Networks
There are pros and cons of CDNs (Content Delivery Networks). If your audience is predominantly UK-based, or based in one country, don’t automatically assume a CDN is making things faster.
However, some CDNs, such as Cloudflare, offer extra benefits (for instance security monitoring, serving cached pages if your web server is offline, etc), so you may feel these features outweigh a small performance impact.
WordPress runs maintenance tasks for various routines on your website, such as clearing out expired cache files, sending out newsletters, etc. However, a WordPress website might (for example) be setup to run a cron job when the first visitor comes to the website after each hour has passed, which means that particular visitor’s initial page load will be impacted. Instead, try to run these maintenance tasks via a scheduled server task, so it’s triggered by the server at set times per hour.
If you’re using web fonts (e.g. Google Fonts), be careful to only load the font subsets you’ll need, e.g. for English-language websites, you probably won’t don’t need Arabian characters on your webpages.
Website speed optimisation is a huge area and this has only been a taster of some of the tools and techniques that can help make your WordPress website load faster.
Hopefully this talk gives you a bit of inspiration to think about your own website’s loading speed and for you to learn more about the subject.