How to speed up your WordPress blog or website

However great your site looks, and however well written its content, if it takes more than a few seconds to load then you’re likely losing out on traffic.

Studies show that shaving just a second or two off a site load speed makes a huge difference to the amount eCommerce sites like Amazon make, and it’s believed that people will wait just a matter of seconds for a site to load before giving up and looking elsewhere.

Site load speed is even more crucial now that so much web traffic comes from mobile devices. While people used to browse the web from laptops and desktops connected to high speed ethernet or WiFi connections, these days many people will be browsing your site on-the-go, using slow 3G or 4G connections. So those large, beautiful images that you spent so long deliberating over may be killing your site for these impatient visitors.

While for some site speed is just a minor nuisance, for others it can make a big difference to their earnings.

So what can you do?

There are plenty of factors at play when it comes to site speed – some easier to resolve than others. Today we’re going to explore how you can improve your site speed quickly and easily, and give some tips on some of the bigger things you can do to speed things up.

How well is my site performing?

The first thing you should do is take a look at where your site is at the moment – a benchmark to which you can compare once you’ve made some improvements, and use to keep track of your progress on your journey to a speedy blog or website.

Google Analytics has a Page Speed section, showing you how quickly your site loaded for real visitors. To get it to, open up the Behaviour section in the left hand menu, then open Site Speed, then finally click Overview.

On the Overview screen, you’ll see your site’s average load speed – if it’s more than 4 or 5 seconds, you’ve got some work to do.

You can drill down further by going to the Page Timings screen, and see how each individual page compares to the site’s overall average. Take a look at your most popular pages, or important pages such as sales landing pages, and make sure that they aren’t taking too long to load. If they are, you could be losing out on visitors and missing some key sales.

What can I do to speed up my site?

Google Page Speed Insights is designed to test your site and give you a list of common issues which may be slowing it down. It’s mainly aimed at developers, so some of the language it uses is pretty technical, but we’ll talk you through each of the possible suggestions and how you can implement them.

Stick your website address in and click Analyze.

Reduce server response time

You can do everything possible to speed up your site, but if you’re on a slow host, you’re often at their mercy.

The ‘server response time’ is the time it takes between a user trying to access your site, and the page itself beginning to load.

So if you’ve got a server response time of 3 seconds, that’s 3 seconds before the images, scripts and everything else on the page even start to think about loading.

Google suggests an ideal response time of less than 200ms.

There are a lot of factors that can cause a slow response time, including poorly designed scripts and plugins, as well as just slow servers.

If you’re on a cheap, shared hosting platform, you’re sharing your server space with tens, if not hundreds, of other websites, and each server only has a certain amount of memory and computing power to go around. Thus if you’re sharing with a lot of other websites, or some very popular websites, then that’s going to affect the performance of your own site.

In an ideal world your site would be on its own server or a virtual private server, but they’re often costly (hundreds of dollars a month) and not an ideal solution for most bloggers or small companies. So sometimes, living with the potential downsides of a shared hosting package is inevitable.

Because it’s hard to be sure exactly what’s causing a slow server response time, we suggest you leave this one until last, and do everything else you can to try and speed up your website.

If you’ve enabled cacheing, compression and minified all of your scripts and styles, and Google PageSpeed Insights is still showing a slow server response time, then get in touch with your host and see if they can help you get to the bottom of it.

Enable Cacheing

When you load a page on your WordPress site, it looks like one complete, functioning page. But it’s actually being pulled in from various places and being compiled together every time you load a page.

The templates that make up your WordPress are written in PHP, which is a development language, while all of your content is stored in a database.

When someone visits a page on your website, your host’s server needs to convert the PHP code into standard HTML, needs to access the database to get the content, and then needs to put all of that together with your images and CSS to display the site.

All of this requires computing power, and is a reasonably slow process – so if you’re not on a super-fast server, or if you have hundreds/thousands of people accessing your site, it can create a bottleneck and cause your site to run slowly.

To speed this up, a cache will essentially take a snapshot of your page. It will create ‘static’ pages complete with your template and content already built. Then, any time someone visits a page going forward, the server doesn’t have to do all of the complex stuff like processing the PHP or access the database, as all the info it needs is contained in the ‘snapshot’.

There are a number of cacheing plugins available for WordPress, but our favourite is WP Super Cache. It’s regularly updated and used by over 2 million users, so you can trust it to do a good job.

You can either download it from the WordPress plugin directory here, or just go to your website’s Plugins screen within WordPress and search for WP Super Cache.

Unless you’re an advanced user, you’ll be fine sticking with the basic settings. Just go to Settings > WP Super Cache, tick the ‘Caching On’ button, then click the ‘Update Status’ button.

Now, click the ‘Test Cache’ button to check it’s all working okay. If it is, great, your site is now serving users nice fast cached versions of your pages!

Minify CSS, HTML and/or JavaScript

Your website is likely made up of hundreds, if not thousands, of lines of code – HTML code, CSS, Javascript, they all work together to power your website, its layout and its functionality.

All of these lines of code take time to load. And, most of the time, they’re not very efficient. They’re full of white space, line breaks, unnecessary characters that all take up additional space.

While a few white spaces and extra characters doesn’t sound like very much, it all adds up.

In addition, the more files you have, the more requests that have to be made to the server every time someone visits. If you’ve got 12 different JavaScript files and 3 different CSS files, this will take longer to load than if you’ve got 1 JavaScript file and 1 CSS file, even if the combined contents are the same length.

To speed things up, you can merge all of the CSS files into one, all of the JavaScript files into one, and remove all of the white space.

Thankfully, you don’t have to do this yourself. The Autoptimize plugin will do this for you. Install it, then head to Settings > Autoptimize. Tick the ‘Optimise HTML Code?’ and ‘Optimise CSS Code?’ boxes, and hit ‘Save Changes and Empty Cache’.

This won’t work perfectly on all WordPress installations. Automatically optimising JavaScript is the most problematic and may cause problems – so try ticking the ‘Optimise Javascript Code?’ box, then thoroughly test your site to make sure it still works. If it doesn’t, you can easily untick the box, hit the ‘Save Changes and Empty Cache’ button, and you’ll be back to where you were.

Optimise images

Be careful when adding photos or images to your blog or website. It’s easy to export images from Photoshop using the default settings, and have it spit out massive files.

Stick these into your blog, and if it isn’t optimised to automatically reduce the size of the images, then you’ll inadvertently massively increase the size of your webpage.

While many WordPress themes are clever enough to shrink down your images to an appropriate size, many badly-coded themes won’t do this, and will just use the image you’ve uploaded exactly as it is.

So, before you go uploading images to your site, ensure they’re optimised. Resize them in Photoshop so that they’re only as wide as they need to be – if your site’s theme is only 1400px wide, then you don’t need to upload 4000px wide images to your server.

Also, choose a lower quality setting when you run the export. For photographs, you can quite easily get away with selecting 65% quality on the Photoshop export screen.

You can also run your JPEGs through a site called TinyPNG, which will compress them whilst trying not to affect the quality. Run images through this before you upload them, then compare them to the originals to see if you’ve lost too much quality. If you haven’t, great, you’ve just ended up with an image that’ll be faster to load!

PNGs are ‘lossless’, which means they don’t get compressed when you export them, and will always display in beautiful quality. They’re commonly used for displaying logos, icons and graphics. However, this ‘losslessness’ means they can inadvertently end up a little on the large size.

Thankfully, not all of the information in a PNG file is necessary, and TinyPNG can reduce your images by 50-80% by stripping out some unnecessary colour information. While technically you’re losing quality by removing some of the colours, it only removes those indiscernible to the human eye, so it’s very unlikely you’ll spot even the slightest of differences.

So run your logos, graphs, icons and other non-photographic images through TinyPNG and see what a difference it can make!

Using a CDN for images and scripts

Often one of the biggest things slowing your site down is the time it takes for images to load. Your server has to handle every image request, and send the image to the user wherever they are in the world.

If your user is located close to your website’s server, they’ll be able to communicate with the server faster, so your website will likely load faster. If they’re on the other side of the world, it takes longer for the data to get to them, so your site will load slower.

A Content Delivery Network (CDN) reduces this strain by handing off your images to someone else, and letting them deal with the complications of serving images to users all over the globe.

CDNs usually have servers distributed in locations across the world, and will intelligently serve users your images from the server closest to them. So users in the US may have your images served from a US server, and users in Europe will have your images served from a European server.

Although the rest of your files – the text itself, etc – will still be sent from your own hosting company’s server, by letting users access your largest assets, your images, from a server close to them could make a big difference.

Jetpack, a free plugin from the creators of WordPress, is one of the most popular CDNs for WordPress-powered sites. As it’s made by WordPress for WordPress, it’s super simple to set up.

Head to the Jetpack website, click ‘Try for Free’ top right, and get started! It’ll only take a couple of minutes to connect to your site, and once it’s installed, head to the Settings page, and switch on ‘Serve images from our servers‘.

Enable Compression

Depending on your level of technical ability and how much access you’ve got to your server, this one may not be possible without some help from your hosting company.

This relies on something called gzip compression. This compresses all of your website’s files, reducing their size and thus reducing the time it takes for it to be downloaded to a user’s computer.

To enable this, you need to make some changes to your server’s configuration.

If you know what you’re doing, you can follow the instructions depending on your web server:

Chances are, you’re using Apache, but if you’re not sure then check with your hosting company and ask them if they can help you set up compression.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

When a page loads, it usually loads from top to bottom. Any CSS or JavaScript called in your page’s head gets loaded first, then the body content.

While it’s usually important that the CSS is loaded before the rest of the content – so you don’t get a flash of unstyled, ugly text before the CSS kicks into place – it’s not always as important that Javascript is loaded before the rest of the page content.

If you’ve got lots of JavaScript, deferring bits of it that aren’t needed to render the ‘above-the-fold’ content will help speed up your pageloads.

Sorting this is a pretty advanced topic, so we’d encourage first trying to minify your Javascript and CSS instead (see further down the page), then looking into eliminating render-blocking JavaScript and CSS as an additional measure.

We’ll be writing a full blog article on this in the future, but for now take a look at this excellent blog article from Kinsta for more info on this complex topic: https://kinsta.com/blog/eliminate-render-blocking-javascript-css/

Lazy Loading Images

Traditionally, when you visit a webpage, it tries to load everything straight away. It loads the content, CSS, any JavaScript files, images, the whole works.

This means that if you’re visiting a long page, such as a blog article with thousands of words and tens of photos, your browser downloads the whole thing regardless of whether you end up reading to the bottom.

Not only does this slow your page down, but it also means your users are downloading files that they’ll never even see, which is bad news if you’re on a hosting package with only a certain amount of bandwidth.

‘Lazy loading’ is the concept of loading content when it comes into view. So if you’ve got an image half way down your blog article, it will only load once the user scrolls to that part of the page, rather than loading straight away.

This is great at reducing the strain on your server if you write a lot of long-form content.