Everything you need to improve WordPress speed

Your poorly designed WordPress site runs slowly and is killing your chance for growth. But there are some simple steps you can take to improve your WordPress PageSpeed scores.

PageSpeed has become a crucial factor for search engine optimization (SEO). Google is now rewarding those sites with faster load times by placing them higher in search, and punishing those with slow speeds.

Simply put, if you want your site to rank highly, you should take steps to improve your WordPress PageSpeed scores. 

As the most popular content management system in the World, many people rely on WordPress to bring their business online.

But visitors won’t stick around waiting for your site to load. If you have a slow website, then you need to improve your WordPress PageSpeed now.

Unfortunately, WordPress out of the box isn’t always the easiest to create blazing fast sites with. But luckily for you, I’ve compiled my knowledge gained from optimising many WordPress sites for great PageSpeed scores into this handy guide.

What is PageSpeed, and why improve it?

PageSpeed is a measure of how quickly the content on a web page loads. It is often measured in two ways: “time to first byte” (TTFB) which measures how quickly the server provides the first byte of information, or “page load time,” which measures how long it takes the entire page to load.

PageSpeed has become something of concern for website owners because Google uses page speed as a ranking factor. In other words, if all else is equal between two pages, the faster of the two will rank higher.

Slow websites are likely to encounter higher “bounce rates,” which means customers will give up trying to load the page and go to your competition instead.

A Google Study backs this up:

Source: https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf

As you can see, bounce rates significantly increase if your page takes longer than 3 seconds. If your site takes more than 10 seconds, there is a 123% increase in bounce rates!

The sweet spot is no more than 3 seconds, but many web developers and SEO experts will aim for an even lower number. Personally, I’m happy with 2 seconds and below but the faster the better.

If you are website owner in a country with a highly developed internet infrastructure, your page speed is even more important. Customers will be used to faster loading websites through modern connections such as 5G and fibre broadband, and therefore become more frustrated when a site loads slowly.

How to easily measure your PageSpeed

There are many tools and metrics available when measuring page speed, but since we’re concerned with Google ranking, let’s go straight to them.

PageSpeed Insights is a handy free tool, provided by Google, that can give you a very useful report on your page speed. The results are displayed in a simple Red, Amber, Green format that anyone can understand, meaning that even a total novice can start to evaluate their website’s loading time.

Here is an example from my own homepage:

As you can see, I have a 94 rating which sits my site comfortably in the “green zone,” although there is room for some improvement. Google should have no problem ranking my site based on its page speed, unless a rival site that is equal in other ranking factors has a higher score.

Along with your overall score, PageSpeed Insights will also give you a breakdown of six measurements used to determine your page speed. Once again, they are shown in a Red, Amber, Green format as you can see from my own page speed report here:

Nice! 5 out of 6 green ratings, although I should look at the Largest Contentful Paint, which is amber, to see what I can do to improve it.

Don’t worry if you’re unsure what all these terms mean, as I’m going to explain each one below. All you need to do is focus on the ones that don’t have a high rating.

What is First Contentful Paint?

First Contentful Paint (FCP) is the time it takes for the browser to show the first piece of content after a user has loaded your page. This is usually an image or text.

A major problem with images is that they are often too large and haven’t been compressed enough. Poorly optimised images like this will impact your site speed as the browser needs to load files larger than it really needs.

Fonts can also require a large file to be loaded. We’ll look at how we can improve the speed of font loading later.

A “fast” FCP score is considered anything that loads in less than 2 seconds, making my 0.9 seconds a great result and something I don’t need to worry too much about.

What is Time to Interactive?

Time to Interactive (TTI) measures the amount of time it takes for the page to be interactive. In other words, when can users actually start to interact with the site, such as scrolling and clicking buttons.

TTI is an important measurement because it combats poor page speed practises where developers allow content to be shown, but not interacted with. This frustrates users because the page appears to be loaded, but in fact isn’t.

A word of warning here: I’ve seen many web developers showing off their page speed scores based on this method. There is no point in trying to be clever an ‘outsmarting’ the lab data, because when your site is used in the real world, the user experience will be horrible.

My TTI of 1.5 seconds is considered a green score, as the site is fully interactive in less time than Google’s recommended 3 seconds and even the much sought-after less than 2 seconds.

What is Speed Index?

Speed Index measures the time it takes for the contents on a page to be shown to the users.

This is different from the TTI which was described above. Ideally, you want both elements to have a good score, but you shouldn’t sacrifice TTI in favour of speed index.

Your website loading speed is important, but remember so is user experience. Don’t do anything that would confuse or frustrate the users.

Here I have another green rating of 1 second and can leave this alone.

What is Total Blocking Time?

Total Blocking Time (TBT) measures the difference between the FCP and TTI, and unlike the other metrics is measured in milliseconds.

TBT looks at when the first content is loaded, and when a website can be interacted with, such as: clicking buttons or hyperlinks, or entering text into forms. The longer this takes, the more frustrated a user can become with a website that appears to be loaded, but cannot be meaningfully used.

A score of 40ms for my homepage falls easily within Google’s recommended 200ms timeframe.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) measures the time it takes for the largest visible element to load on the screen. This is sometimes referred to as being “above the fold.” This simply means the elements that are visible on the screen without scrolling.

Here you can see that my LCP of 1.5 seconds is considered “amber,” so it could do with some work. However, this is a good example of a time where you may need to move beyond the lab data and think about your real world users.

I know from the report that the largest content to be loaded above the fold is the hero image I use on my homepage. I can optimise it to reduce its dimensions and file size, but at a certain point image quality will be impacted.

Considering that I have green scores elsewhere, this is something I may revisit to try and improve, but it won’t be a matter of priority for me.

What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) measures the movement of elements on your page. These unexpected movements make it more difficult for users to interact with the page.

Think of times when you have tried to click a link and it suddenly goes somewhere else on the page. This can be frustrating for users if it is minor, but website-breaking if major CLS prevents users from using your page properly.

There may also be damage to the reputation of your business if CLS makes users do something that they didn’t intend to do: e.g. they hit a “pay now,” button where the “go back” button used to be.

While CLS won’t have a major impact on your site speed, it is an important user experience metric.

How to optimise WordPress PageSpeed

So now you understand the the importance of PageSpeed and the metrics that come with it. But you still need to know exactly how to optimise and improve your WordPress PageSpeed. Here, we’ll look at some practical examples of exactly how you can do this, and enjoy the search rankings and user experience that come with it.

1. Choose a good quality host

A host is a server which stores all of your website data. When people visit your website, their device makes a request to your server to provide them with the information.

Using a high quality host is one of the most important steps you can take to improve page speed. Look at this example of a website that was moved from a poor-quality host to a G10 Digital private server:

As you can see, the site received a huge increase in its PageSpeed score immediately after migrating to a G10 care plan. This was with no optimisation work, other than moving hosts.

To understand why this site suddenly saw such a speed boost, it’s important to know the difference between different types of hosts.

Shared Hosting

Shared hosting is exactly what it sounds like. Your website shares space on the server with other sites.

The problem with shared hosting is not so much sharing with other sites, but the number of sites you will usually be shared with. Typically, shared hosting will place your site on a server with hundreds, if not thousands, of other sites.

When these sites receive a lot of traffic, the server will struggle to maintain a good speed.

You may be wondering why anyone would use shared hosting? The answer is that shared hosting is usually cheaper than other options. And some of these companies are great with marketing, which draws in newbies to web design who may not know about hosting providers.

Some shared hosting plans can cost just a few pounds per month. There is no way that they can make a profit on these servers unless they do one or more of the following:

  • Pack their servers with as many websites as they can. It is not unheard of to see servers hosting 1,000 websites.
  • Lure in new customers with incredibly cheap introductory offers, only to have the package renew at a much higher rate
  • Include a myriad of upsells that may be standard features with more expensive hosting options
  • Provide poor customer service, as the customers payments will not be enough to pay enough support staff

For website owners concerned with PageSpeed, shared hosting is not a recommended solution.

VPS Hosting

VPS hosting has some similarities to shared hosting, in that websites are stored on one server. However, unlike shared hosting, a VPS sections off a portion of server resources just for your site.

So your own server resources are yours, and won’t be affected by the traffic on other sites.

Think of it like an apartment block with 1,000 residents. Although they all occupy the same physical building, each one has a space of their own with their own resources and facilities that are independent of the others.

Because of this, you should see some performance improvements compared to shared hosting, but at a slightly higher price.

Cloud Hosting

Cloud hosting relies on a series of connected servers, rather than one physical server. There are many benefits of this, but let’s focus on the PageSpeed benefits.

Like VPS hosting, cloud hosting means that you have access to your own resources. Although other websites may share an overall pool of hosting resources, the ones you have access to are ringfenced – your own site won’t slow down when there is a lot of traffic on another.

Because cloud hosting relies on a pool of servers, your data is distributed amongst them. The main PageSpeed benefit is that these multiple servers can all work together and help to spread the load. On a shared host, the server may grind to a halt if too much demand is placed on it. Cloud hosting solves that problem.

My recommendation: CLOUD HOSTING gives you the best bang for your buck.

2 – Optimise Images

Images are essential to any website. Without them, a website would be unattractive and off-putting to visitors. And yet, images are one of the largest elements that your site will have to load. If you get them wrong, your PageSpeed will suffer.

When I work on site speed for my clients, one of the first things I do is go through all images and look at their file size. The bigger the file size, the longer it will take to load.

Anything over 100kb is not necessary, but people who are unaware of this upload unoptimised images that are 5MB: 500 times the recommended limit!

Optimising images is a balance between minimising file size and maintaining image quality. There is no point in having a fast loading image if it looks horrible.

Let me show you how I optimise images to ensure that they load quickly, but still look great.

Dimensions

The dimensions of an image are measured in pixels, just like your screen is. The more pixels in the image, the bigger the file size and the longer it will take to load. This will have an impact on PageSpeed scores.

It’s very easy to upload images that are much larger than necessary. Images taken with a decent phone camera, a digital camera, or even downloaded stock images, will usually have many more pixels than you actually need.

For example, it is not uncommon to download a stock image that is 5,000 pixels wide. This is far too big. According to StatsCounter, over 60% of desktop visitors are using a screen that is no wider than 1920 pixels.

You can easily reduce the dimensions of your images to a more suitable size, using free tools. Adobe Spark will allow you to resize your images for free. Alternatively, you could do it right in the WordPress dashboard:

There is no need to upload an image that is any larger than the screen will show it. Why use up extra loading time on a 1,000 pixels wide image if it will never be shown larger than 500 pixels on the screen?

Compression

Once your images are the correct dimensions, you can look to compress them to reduce the file size even more.

There are various ways to do this, some quicker than others and some more effective than others. The process I use is not the quickest, but I believe that it gets the best results.

Step 1 – Reduce Quality

Using Photoshop, you can export an image and reduce its quality. This sounds scary, but in reality you can sometimes reduce an image quality by 50% before it’s really noticeable to the human eye. This gives a massive reduction in file size. The lower the size of the file, the quicker it loads and the better your PageSpeed will be.

Personally, I use Adobe Photoshop to compress my files. This isn’t the cheapest option out there, but the Adobe package has a lot of features that I like. It’s also super easy to reduce an image:

I usually aim for 50 – 60% reduction as the sweet spot between low file size and an acceptable reduction in image quality.

Step 2 – Compress Further

Once you have exported the image at a lower quality, you should already see a massive benefit in file size. But you don’t need to stop there. There are tools to help reduce the size of the image files even more, giving you added PageSpeed improvements.

I use ShortPixel to compress images even further. Not only do they compress images to a lower file size without impacting on quality, they also have a great free plan which is perfect for users who don’t need to compress lots of images.

Once images go through their compression, you can often save a further 10 – 25% on the file size. It all goes towards to your PageSpeed score!

Step 3 – Serve in Next-Gen formats

There are several Next-Gen formats, but I’m only going to focus on WebP images. The reason is simple: according to Google, they typically achieve 30% extra compression compared to JPEG images. They also don’t impact on image quality, so you get a great image with a lower file size and better PageSpeed scores!

If you’re using WordPress, you can easily use a plugin to serve WebP images on demand to your visitors. A decent plugin will detect whether their browser has WebP support (most do nowadays) and serve them a fallback image if they don’t.

If you signed up for a free compression plan from ShortPixel, you can also access their handy Adaptive Images Plugin, which also has a free plan. This will automatically serve WebP images to your visitors, as well as automatically serving images in the correct dimensions for your viewers. This makes sure that browsers only load what is necessary, giving you an improved PageSpeed.

3 – Use Caching

Caching helps you to serve static (doesn’t change often) content to visitors, to help save loading time. Let’s dive deeper into what this is and how it works.

What is a Website Cache?

A website cache is a way to speed up your website’s load time. When a visitor’s browser loads your WordPress page, it has to be built from scratch each time. This process is time consuming, as it involves loading the database, PHP files and HTML content.

A lot of your website content rarely changes, so this is often an unnecessarily long process. When you use a cache, your server stores a ready-made version of this HTML content to serve straight to your visitors, rather than building it from scratch each time.

It’s like having a ready meal versus preparing one from scratch, only without the drawbacks (nobody wants soggy, tasteless chips). Instead of putting all of the ingredients together each time, your website cache already has most of it done for you.

My content just changed. What now?

Most caching will allow you to delete, and then regenerate, the cache. Depending on what cache you use, this process can be automated to regenerate your cache whenever a new post is published, or one is amended and so on.

So there’s no need to worry if you update your website: you’ll still be able to cache the pages and serve a super quick site to your visitors, with a great PageSpeed score. Some people call this “flushing” their cache.

What cache should I use?

There are two types of caching: browser caching and server caching.

When you access a page, you download a lot of files that you won’t necessarily know about: stylesheets, JavaScript files and fonts are just a few examples. When you access a page, your browser will store a cache of this and it won’t have to load them again next time. You can test this out by clearing your browser cache and loading a web page. Note how long it takes, and then load it again. The second time around will be considerably quicker.

Server caching stores a copy of your static content on the server, ready for users to access. Typically, this content will be stored somewhere that is quick to access, like the server RAM. This reduces the time it takes to serve the fully loaded webpage to your visitors.

If you took note of Tip #1, and used a good quality host such as Cloudways (and you really should have, because hosting is the most important factor affecting PageSpeed), then they may come with their own caching system. For example, Cloudways gives all users access to its Breeze plugin to boost PageSpeed scores.

Lazy Load Images

Lazy loading means that only the items on the visitor’s screen are loaded. In other words, all images will not be loaded when the website is, but instead when the user gets close to scrolling to them. The plugins will replace your images with a low-res version, which has a much lower file size.

Your website will load much more quickly, because when the site is requested, it will only load the content that first displays on the screen. If you set it up correctly, your users won’t even realise that lazy loading is occurring.

Most caching plugins will give you the option to lazy load images, and some will allow lazy loading of widgets too.

4 – Clean Code

Each line of code used to make your website needs to be read and processed by your browser. The more bloated your code, the longer it will take to load the page and the lower your PageSpeed score.

WordPress powers around 40% of all websites online today, including all G10 Digital site builds. It is quick, open-source and there’s tons of support for it from third party developers. But expanding WordPress beyond its core blogging features can involve adding other plugins, all of which come with their own code.

Luckily, there are ways to clean up the code and ensure that your site still runs nice and quickly for your visitors.

Choose your theme wisely

WordPress requires a theme to work. The theme takes care of your site layout, widget location, fonts, image locations and more, which makes it easy for users to drop in their own content and not worry about the styling.

However, many themes look great but are poorly optimised for speed. Overly complex layouts, animations and more sections than needed are guaranteed ways to slow down your site. It’s much better to stick to a simpler layout which is well optimised. This will please both your site visitors, and the PageSpeed scores.

A popular option is Astra Pro, which is a well-known, fast loading WordPress theme. It offers multiple layouts, and with over 1.5 million installs, has a solid user base. You can get started with a free account, or should you require more options, move to the pro version.

Choose your page builder wisely

Many WordPress sites are created using a page builder. If yours isn’t, you can go ahead and skip this section.

WordPress page builders are popular because they allow users to visually create their web pages, through a drag and drop interface. This can speed up the web creation process and makes web design more appealing for beginners, who may not be adept at coding.

But page builders are a tool in and of themselves. Simply using a page builder does not mean that you will get a great functioning website, any more than using a new drill will mean you can build a sturdy house. The important part is learning how to use the tool properly and to its full potential.

Two of the more common page builders are Elementor and Divi. Both are capable of creating exciting pages, with lots of cool features. Both are capable of creating blazing fast sites, just as they are both capable of creating sluggish ones. It all depends on who has created it.

Having used both, I personally prefer Elementor. It is more user friendly, seems to have more third party support and it has a slight edge in PageSpeed analysis. But with either option, you need to learn how to use it properly to maximise its speed potential.

Elementor now has features to reduce the overall loading time, including removing widget code from pages where it isn’t needed, which is a nice touch.

Further Optimisation Strategies

If you follow the advice so far, you should be noticing significant PageSpeed performance improvements. However, you can still fine tune your website speed to fully optimise its performance.

The methods outlined here will give you some improvements, but they depend on your level of WordPress proficiency and the time you have to invest.

Use a CDN

A CDN, or Content Delivery Network, is a group of servers that are distributed globally, and can work together. Your website cache, which we’ve already covered, can be shared amongst the CDN servers.

The main benefit of this approach, is that a user who is geographically located far away from your main server, can have website content served to them from a much closer location, by utilising the CDN server closest to them.

For example, if your website is hosted in London, but you have visitors from Australia, that data has a long way to travel. This travelling time will impact on your site speed. However, if the visitor can be served content from your cache on a server based in Australia, the site will load considerably faster.

Some of the more well known CDNs are CloudfareBunny CDN, and Fastly

But before jumping straight in, you should consider how many of your visitors actually come from locations far from your server. If you’re a local brick and mortar store, it’s unlikely that you will receive many visitors from abroad which would justify the extra cost of the CDN.

However, if you’re an eCommerce brand which sells globally, a good quality CDN may give you a boost to your PageSpeed score.

Delete Post Revisions

Every post revision will place an added burden on your WordPress database, which will be loaded when people visit your website. WordPress by default, creates a post revision whenever you save changes to your post. This includes draft versions too.

Post revisions are a useful feature in WordPress because they allow you to quickly go back to an older version. However, you often don’t need the many revisions that are created which are sitting in your database and bogging down your site.

If you’ve used a good caching plugin, as I recommend you do, it is likely that it will have a quick “delete post revisions” feature. Here is the option on Breeze, a free cache included with Cloudways servers:

Limit Post Revisions

With a little bit of code, you can limit the number of revisions stored in your WordPress database. Be warned: although this is a straightforward process, you should only ever edit WordPress code if you’re confident in what you’re doing. At the very least, take a backup of your site which can be restored if you break anything.

To limit your post revisions, you need to open your WordPress wp-config.php file, and insert the following code:

define('WP_POST_REVISIONS', 5);

The 5 represents the number of post revisions that will be stored, so you can play around with this number to get the right balance for your website.

Optimise the Database

Over time, your database will become full of junk that it simply doesn’t need. Deleted posts, trashed comments and old plugins are a common source of database clutter.

You can use a free plugin such as WP Sweep to scan your database for database items which are no longer needed. You can then get rid of them, and keep your database running smoothly.

Clean Up Unwanted Code

As discussed above, WordPress and page builders are notorious for loading unwanted code across your website. Luckily, there is a solution for this.

Asset Cleanup will allow you to remove code from pages where it doesn’t need to be loaded. This will give you a significant PageSpeed boost, because the amount of code that the browser has to load will be reduced.

You should at the very least take a backup of your site before you remove any code, and use a staging site to test this out. The last thing you want is to remove some vital code and mess up your site.

Summary

There you have it, a complete guide to massively increasing your PageSpeed, and with it, the number of happy visitors to your site.

Of course building a website for speed takes a lot of skill and time, as does ongoing optimisation work. If it sounds like too much, give us a shout over on the contact page, and see if a maintenance plan is right for you. There, we will take care of your ongoing website health, including keeping it running nice and quick, so you can focus on other parts of your business.

G10 Digital

19 Wembley Park Avenue,
Hull
HU8 0ND

karl@g10digital.com
07415161251