Increase your website speed and make more sales!

Gavin Davidson

February 7, 2023

Why is website speed so important?

I couldn’t be bothered with slow websites anymore. I immediately hit the back button to look at other options in the search results, as I’m sure most of you do.

Google is less inclined to favour slow websites. Website speed is an important SEO ranking factor for your website. Search engines generally consider a slow website with a bad user experience. So if yours is too slow, your chance of a high ranking in the search results is adversely affected.

Even if your website has a good position in the search results and loads slowly, people will go back and click on other links resulting in those websites overtaking you.

Does website speed affect sales?

It sure does! A case study by Radware concluded that a 2-second improvement in page speed more than doubled conversions.

Page speed affects sales on your online store.

The article mentions that 70% of people abandon their carts when checking out. That’s a staggering amount. The number 1 culprit? Slow loading times.

How fast should a page load?

Most people expect a page to load in 2 seconds. This time should be your benchmark speed. 2 seconds is a complex task for larger platforms, but try to make your website load quickly.

What is a good Google page speed average?

Web Vitals is a fantastic tool for measuring front-end performance. The front end is what a person can see and interact with on your website. It also provides suggestions on how to make your site load much faster.

It rates your front-end performance on a scale of 1-100. Anything over 89 means your site is performing well.

My current Google page speed score.

Mobile

Desktop

Let’s boost these scores into the green zone.

This is how you make your website load much faster!

You can increase your website speed substantially by following these simple steps.

This demonstration is on a WordPress site. Unfortunately, I can’t demonstrate all content management systems because there are too many. But you will be able to implement the steps I’ve used here, on your platform.

Ok, let’s get into it!

Update your website and plugins.

Your first step is to update your plugins and website to the latest software. Software updates come with more efficiencies.

Before you go ahead and do this, make sure to back up your site. Your hosting service provider should be running daily backups for you, but I like to play it safe in case they get hacked or don’t have the latest version.

There are a few backup plugins available. I use All-in-One WP Migration by ServMask. Download it or search for All-in-One WP Migration in your WordPress plugin directory.

Updating my WordPress plugins. Updating your plugins increases efficiencies, making your website speed load faster.

Type ‘All-in-One WP Migration’ in the search field.

this is an image of a search field or box with the input of All-In-One-WP-Migration

Install the plugin and activate it. (I have already installed mine, but you will see an install button on top, right)

this image shows the All-In-One-WP-Migration plugin in the WordPress plugin list.

Select the plugin from the dashboard and choose export.

this image shows you how to prepare your export using All-In-One-WP-Import.

I export to file as my preferred backup method. I find this the easiest way. If I need to restore my website, I import the file again. But you can choose the option that you prefer.

this image shows you the file option as the preferred output when exporting your website using All-In-One-WP-Import.

The export usually doesn’t take that long. The export process will depend on the size of your website. If your website is over 500Mb, you may need to use the All-in-One WP Migration Unlimited Extension.

When the export finishes, you will see this pop-up message to download your file.

this is what the pop-up image looks like when your site is ready to download using All-In-One-WP-Import.

Once your backup is complete, go to your dashboard to see which version of WordPress or the content management system you use is the latest. If it’s not the latest, update it.

Update all your plugins and delete the ones you are not using.

You may need to log in again.

Now you are running the latest version of your website and your plugins.

Boost your website speed by distributing it in the cloud.

We know that the faster your site is, the higher it will be ranked. By distributing your website on a content delivery network or CDN, the quicker you can deliver it.

A CDN is a distributed server system designed to deliver web content to users based on their geographic location. A CDN has an impact on your website speed.

For instance, if your website is hosted in South Africa, and somebody views your website from the same country, that information doesn’t have to travel that far, so your pages should load quickly. But if somebody opens up your website from Japan, that information has to travel much further.

When you place your website on a CDN, it distributes your content worldwide. So wherever your website is accessed, it will always have a shorter distance to travel, making your website speed much faster.

There are several services available to you. I use Cloudflare. It’s free if you have a small website like this one, and you get SSL, a type of encryption for your website. Google also favours sites with SSL.

Content Delivery Networks: a word of caution.

If a website shares an IP range with other websites and the hosting company makes changes that result in a change of IP addresses, it can impact the CDN.

The CDN relies on the IP address of the website’s origin server to properly route and deliver content to users. If the IP address changes, the CDN may not be able to properly route the requests, resulting in broken links, slow loading times, or even complete failure of the website to load – the latter happening to my website.

If you decide to distribute your website on a CDN then keep a close eye on the IP address of your host’s origin server (where your website is hosted) in case you need to make changes or updates to your CDN configuration. Some CDN providers offer automatic IP address detection and updates, which can help to minimise the impact of IP address changes.

Additionally, using a dedicated IP address instead of a shared IP range can help to mitigate these issues, as the IP address remains the same unless you change it yourself. However, dedicated IP addresses often come with an additional cost.

Setting up your Cloudflare account

Visit Cloudflare and create an account. Then add your site.

Visit Cloudflare.com, create an account and add your website.

Select the free plan.

Once you’ve done this, you will get a list of your DNS records for your review. You may see a few on your list, e.g. you may have a blog on a subdomain like blog.yourdomain.com. Go through your list to see if any are missing. Add them here.

Then click continue.

You should see something similar to this:

Replacing your current nameservers with Cloudflare's nameservers.

Now you will transfer your data from your current host to Cloudflare’s hosts. Most registrars will have a zone editor in your control panel where you will implement this configuration. Each one will be slightly different. For a detailed walkthrough, visit Cloudflare’s support page to find the steps to update name servers for all major domain registrars.

On your dashboard or control panel, you should have a menu where you can manage your DNS.

Log in to your domain registrar and find your dashboard or control panel. You should be able to find a section where you are able to manage your DNS.

Here you will replace the name servers for your domain with Cloudflare’s name servers.

Selecting custom name servers as my option in my control panel. Here I am replacing my domain name servers with Cloudflare's name servers.

It can take 24 hours to activate the new name servers. An email notification will confirm your activation.

You should notice an increase in your website’s speed by now.

Caching

Caching places information on your computer so that the websites you visit load faster. Caching works like this: When a user visits a website, the browser stores a copy of the website’s static elements, such as images and CSS files, in a cache on the user’s device.

As a result, websites load faster on subsequent visits, as the browser can retrieve the cached content from the user’s device instead of having to fetch it from the server again.

Three variations of caching will enable your website to load much faster.

Browser caching allows people visiting your website to navigate pages more efficiently as it reduces the load on the website’s origin server and the amount of time it takes for a page to load.
Browser caching stores website assets like images and logos, HTML, CSS and javascript on your computer’s hard drive and is easy to set up.

Unlike browser caching, which caches static content on the user’s device, object caching caches dynamic content on the server.
Object caching improves website performance by reducing the processing required for each request, as the server can retrieve the cached data instead of regenerating it.
If you have a large website that generates a lot of traffic, your server can get loaded very quickly, slowing it down and impacting your site’s performance. Object caching will deliver queries to people much faster and improve your website speed.

Page caching saves the entire HTML layout rather than the individual design elements of a page.
Page caching is especially useful for websites serving static content, like information and blogs. This caching can be configured on the server or with browser caching.

Configuring the cache on your WordPress site.

I use WP Rocket to configure the cache on my website. You will need to pay for a license, but they have a few options for you or your organisation. Another excellent plugin that you can add for free is W3 Total Cache.

The configuration for both is straightforward.

After installation, go to your dashboard, under “Getting Started”, and view the second video: “Finding the Best Settings for Your Site”. The video will show you how to set this all up.

Go to your dashboard in your WP Rocket plugin to begin the process of configuring your cache.

I used standard settings for my configuration.

How to configure Cloudflare to work with WP Rocket.

Then set up your Cloudflare add-on by following these simple steps.

You can’t use the Cloudflare add-on and the WP Rocket add-on together on your WordPress site. If you have the Cloudflare plug-in enabled, deactivate it.

Go to your WP Rocket plugin and select settings.

Begin integrating your Cloudflare with your WP Rocket plugin by going to settings under the WP Rocket.

Under add-ons, select Cloudflare.

Enter your API key, zone ID and the email address you used to create your Cloudflare profile. Make sure your API key is secure.

Enter your Cloudflare credentials in your WP Rocket plugin.

To find your global API key, go to your Cloudflare dashboard, and click on your profile at the top right of the page.

Select the menu API tokens and view your global API key. Copy and paste it into your Cloudflare credentials.

Finding your Cloudflare API key. Select the API tokens tab.

View your Cloudflare API key and copy to your Cloudflare credentials in your WP Rocket plugin.

Then, copy and paste your zone ID. Your zone ID is located on your Cloudflare dashboard at the bottom right of the page, under API.

Find your zone ID, copy and paste it into your Cloudflare credentials in your WP Rocket plugin.

WP Rocket is now successfully integrated with Cloudflare.

Let’s go and set up the W3 Total Cache plugin.

Once you’ve installed and activated the plugin, go to general settings to enable your page, object and browser cache and save all settings.

Under your general settings in your W3 Total Cache plugin, enable object cache.

Under your general settings in your W3 Total Cache plugin, enable page cache.

Under your general settings in your W3 Total Cache plugin, enable browser cache.

Save all settings, W3 Total Cache plugin.

Configure Cloudflare to work with W3 Total Cache.

Once you have saved your settings, go to extensions, enable Cloudflare and authorise the extension by entering your API key and the email address you used to create your Cloudflare account.

Once you have set up your cache settings in your W3 Total Cache plugin, select extensions and input your Cloudflare credentials.

Your accounts are now linked. Your website speed should be much faster now.

Images can slow your website down: here is an image compression technique that solves this problem.

Another web performance tool I use to see how efficiently my images load is GTmetrix. It offers similar features to Google’s PageSpeed Insights, but it gives me a more accurate diagnosis.

There are a few reasons why these two performance tools produce different results. GTmetrix has modified Google’s original open-source PageSpeed library from 20 to 27 metrics for a more detailed and accurate score.

If you are interested in learning more about this topic, visit their blog for more details on the differences between GTmetrix and PageSpeed Insights.

Head over to GTmetrix. Under the dashboard, input your domain and click analyse.

Analyse your domain's performance using GTMetrix by inputting your url.

You will see there are two scores. One for Google (PageSpeed Score) and the other for Yahoo (YSlow Score).

These are my performance scores measured by GTmetrix, for both Google and Yahoo.

My PageSpeed score is below average. I want it to be green. My YSlow or Yahoo score is good, so I don’t need to worry about it.

Under the PageSpeed tab, performance recommendations are provided for you, ordered from lowest to highest score.

These were my Google PageSpeed performance scores measured by GTmetrix.

You can see there are issues with the images. When I expand on these two recommendations, it shows me in detail which images are causing problems.

Expand the performance recommendation that are highlighted in red to see in detail, where the issues are.

How you can optimise and compress your images for your website without losing quality.

There are a few plugins you can use to compress your images. I prefer plugins that result in lossless compression, meaning you won’t lose image quality.

The first image compressor I use is compressImage.io, my favourite image compression tool to reduce file sizes.

A reader also recommended this image compression tool by Website Planet, so check that out too.

Once all images are in my media library, I use Smush to compress them even more.

Under your plugins menu, select add new and search for the keyword smush. Install and activate the plugin.

Go to your Smush dashboard, click on bulk smush now and save your changes at the bottom of the page. Leave the settings on default. You may need to bulk smush more than once if you exceed the file size limit.

Once you've installed and activated the Smush plugin, bulk smush your images to compress all images at once.

Let’s re-test the performance on GTmetrix.

My new GTmetrix scores, retested after image compression.

That’s much better!

Phew – we are almost there!

Let’s head over to PageSpeed Insights and Web Vitals and retest our front-end performance.

My new Google page speed score.

Desktop

I’m happy with my desktop score so there is nothing more that I need to do here.

Mobile

Here’s my mobile website speed tested on Think with Google.

this is how fast the site loads, tested on Think With Google.

Website templates and website speed: a word of caution.

For a while, I was using Elegant Themes as my WordPress theme. Now, it’s an excellent page builder, and I don’t want to disparage it, but it comes with limitations.

When increasing your website speed, your biggest challenge is your CSS, scripts and images with large file sizes. Many WordPress templates still load CSS and run scripts even if you are not using them.

Slow website templates can affect your online sales.

For this reason, I chose Oxygen Builder instead. It is an excellent page builder for WordPress sites, and it only loads CSS and scripts that you are using. Another excellent builder which I am using more lately is Bricks – Visual Site Builder for WordPress.

Both of these builders make an enormous difference to my website speed. So before you build your site, make sure you know the ins and outs of the template system before using it, as it can slow your website down and hurt your sales!

Website speed infographic

Conclusion

Hopefully, this article is a call to action for you to prioritise website speed optimisation. A faster site means a happier user and more sales for you!

Good luck!