How to speed up your WordPress blog or website

Your site looks great – you love your design, you’ve filled your blog posts with high quality images, and your post quality is exceptional. But there’s just one issue: your visitors are complaining that your site feels sluggish, and it takes a good 10 or so seconds to load when you try to visit it.

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

Studies show that shaving just a second or two off a site load speed can make a huge difference to the amount of money eCommerce sites make, and others show that people will wait just a matter of seconds for a site to load before giving up and looking elsewhere.

So what can you do?

Well, it turns out 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 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.

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/

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 is 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 this 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.

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.

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 all being compiled together every time you load a page.

The functionanlity of your WordPress site is powered by 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 to display your site’s templates, access the database to get the content, and then 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 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.

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.

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‘.