How to make your WordPress website load faster

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

The rise in recent years has particularly been due to JavaScript files (not surprisingly given the much greater use of JQuery, responsive design, etc) and images (now bigger to look better on larger / retina screens).  Other factors such as web fonts have also added to the weight.

 

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.

 

Pingdom:

 

WebPageTest.org:

 

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:

 

Local Caching

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:

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

 

Combining Files

File bloat is a common issue with many premium off-the-shelf WordPress themes, which may load a long list of individual CSS and JavaScript files to cover various features provided in the theme (most of which you’ll probably never use!).

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
• and 35 JavaScript files

By activating the Better WP Minify plugin, it’s combined several files and reduced the count to:

• 23  6 CSS files
• 35  12 JavaScript files

 

Minification

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:

 

Image Optimisation

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:

1. 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.
2. 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!).
3. 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.

 

Sliders

It’s no surprise that sliders are not good for speed optimisation.  Sliders often use very large images and require a number of CSS and JavaScript files to run.  Research shows that the vast majority of people will not see beyond the first slide anyway, plus they rarely look good on mobile devices.  It also pushes your main (more important) content further down the page.

So, with a slider, ask yourself whether you really need it?

 

Parallax effects

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!

 

Image sprites

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.

It’s done through a bit of simple CSS coding (no JavaScript needed), but I’d suggest using a tool such as SpritePad to quickly generate your sprites.

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.

 

Icon fonts

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

Developers, think about the ordering of your code and especially the positioning of your JavaScript files.  Load essential things first.  The BBC and Guardian websites are very good case studies, where they get the text loaded onto the visitor’s screen as soon as possible, then all the fancy stuff loads afterwards.

For example, if you have features such as image rollovers or carousels, these images could be loaded after everything else.

Data URIs

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.

Cron jobs

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.

Web fonts

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.

 

Summing up!

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.

 

---

Photo credit for images featuring Mike: Copyright © Ian Stratton, licensed under Creative Commons.  Images resized/cropped – see the originals on the WordCamp London Flickr gallery.