5 Tips to Speed Up Your WordPress Site

If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year

Did you read the quote above? Ok, so your website is not making as much as that or your don’t have an e-commerce site. So, this doesn’t apply to your right? Wrong!

Page Load Time Infographic
Infographic demonstrating the correlation between page load times and user abandonment rate

The above stats are based on a proven study by Amazon, which has shown that “a 1-second delay in page response can result in 7% reduction in conversion“. This is a good general rule which can apply to most websites, saying that, we don’t expect your site to load in half a second, but generally aim for your pages to load under 3 seconds.

Your website is mainly content or information based, should you still consider page speed?

Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.

YES, it’s essential that you retain users after they have landed on your website, however, more importantly it affects your SEO. Google has updated its algorithm in July, 2018, calling it the “Speed Update“, and it now considers page speed as a ranking factor in its search engine.

Convinced that you need improve your page speed? Great! let’s get started, here are the top 5 tips to speed up your WordPress Site.

1. Run a Website Speed Test

The first step doesn’t involve any changes to your website, but it’s essential that you test website performance before we get started so that you know what your dealing with. For this you will be using a combination of online tools to record your page loading time and get performance recommendations.

Alright, lets begin, use one, or ideally all 3 tools below to test your website:

Once you have run the tests, note down your page load time and any recommendations provided by the tools. If you’re already getting page speeds under 3 seconds, that’s Amazing! But, still continue with this guide and lets see if we can half that 😉

2. Compress Your Images

TinyPNG Test
2.7 MB image reduced to 370 KB, saving 86% using TinyPNG

This is on of the most, if not the most important step to optimizing your page load times. Image compressing is the process of reducing the file size of your files by decreasing the number of colors in the image. If your site uses a lot of images this can shave off seconds from your website load time, as each image can be compressed up to 90%.

One of the best tools for image compression is TinyPNG. If you’re on WordPress they have a plugin that you can download, and what’s event better is it will compress your images automatically once you upload them.

Not on WordPress? not to worry you can still use the TinyPNG website to compress your images manually, however, if you expect to be uploading loads of images, it’s best to use the TinyPNG API, which can integrate with your server to compress your assets automatically.

3. Use W3 Total Cache Plugin

W3 Total Cache WordPress
W3 Total Cache plugin for WordPress

On WordPress and not using the W3 Total Cache Plugin? I have 3 words for you, DOWNLOAD IT NOW! Not so fast, let me briefly explain what the plugin does, it literally does everything when it comes to optimizing page speed, ok maybe not everything but it gets close. To understand how the plugin will improve your website performance, I will discuss the 3 main aspects of W3 Total Cache:

Caching – Think of caching like recycling, why build something from scratch when you can reuse materials? Recycling not only saves the environment but it also saves production time. Well caching is very similar: when a user visits your website, all the resources are stored in a server, the user’s browser, or if configured in a CDN (I’ll get to this later), So, when a new or retuning user visit your site again they don’t have to load the same resources again.

Minify CSS and JavaScript – Minification is the process of removing unnecessary characters in your code, such as spaces and comments, to reduce the file size of your CSS and JS. However, whilst compressing CSS files usually has no negative side effects, you should be very careful when compressing JS files as they are responsible for the functionality of your site. So makes sure you test thoroughly if you decide to minify your JavaScript, however if you are not very technical, I strongly suggest not to Minify your JS files, but only combine them (see below).

Combine CSS and JS files – Say you have 10 plugins on your WordPress site, each one of them will have their own CSS and JS file which leaves the browser with 20 different files to load. Combining them will put them all into 2 files, one for CSS and the other for JS; which means your user only has to load 2 files instead of 20. Amazing right? One thing to note is any core JavaScript libraries, such as jQuery should not be combined as they are needed as soon as the page loads, or if you are going to be combining them make sure they are kept in the ‘<head></head>‘ part of the page.

So that’s all well and good, but for most setting up this plugin for the first time can be very confusing, So here’s a very useful guide on the ideal W3 Total Cache settings.

4. Lazy Load Images and Videos

So we discussed compressing images, but whats lazy loading, and why do you need it? Think about it like having a stationary car running, you’re not going anywhere but you’re still wasting fuel; thats why most modern cars now come with stop-start technology. Lazy loading is like the stop-start technology for your website, you only load the images and videos which are on the user’s viewport, and only load the remaining assets on-demand, i.e once the user scrolls.

For WordPress users there are so many plugins out there, one of them is a3 Lazy Load, and i strongly recommend this one. Here’s why:

  • This plugin is super easy to configure, after installing and activating the plugin all the default settings (fine for most) are already enabled.
  • Lazy loads images, videos including youtube embeds and iFrames.
  • The plugin is very lightweight and won’t effect your site performance.

5. Use a CDN (Content Delivery Network)

CDN Diagram
The diagram on the right demonstrates the use of a CDN

A CDN is a network of servers that’s distributed world wide, these will store and cache your website resources so when users visit your website they will load your website files from the server which is the closest to them. This can drastically improve your page performance.

So is a CDN necessary?

The simple answer is No it’s not, however if your website gets a lot of traffic which comes from different regions around the world, I would say it’s highly recommend. If your website traffic is not very significant you might be better off without a CDN, as in some cases the processes involved in delivering your content can actually decrease your page load times.

The best way to know if you need a CDN, is to test your website using the tools like Pingdom and Webpagetest (make sure you try from your target regions), if you’re already getting fast loading times then it’s best to avoid a CDN.

If you are planning to use a CDN, there are many out there and prices will vary, So you need to do your research! For smaller websites you can get away with using a free CDN like Cloudflare, also, if you are going to be using W3 Total Cache (discussed above in point 3), there is an extension which will connect with Cloudflare.

We’ve reached the end…

Well done for getting this far! all that’s left for you to do now is to test your website speed again and witness the improvement, Magic right?

I hope this guide has been useful for your website, let us know in the comments below what worked for you and if you have any tips yourself, We would love to hear them too! Also, if these Tips have worked for you, don’t forget to share, so we can all work together towards faster internet browsing.