Increase your website speed and make more sales!

Posted by  Gavin Davidson  |  December 18, 2019

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 also becoming less inclined to favour slow websites. In fact, they have been talking about page speed for about a decade now. 

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 are adversely affected. 

This also applies to websites that already have a good position. If your site is loading slowly, people will look at other search results and those websites will overtake you.

Does website speed affect sales?

For sure it 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.

In their article, they mention that 70% of people abandon their carts before check out mostly because of slow load times. That’s a staggering amount.

How fast should a page load?

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

What is a good Google page speed average?

Google PageSpeed Insights is a fantastic tool that shows you how well your front-end, that’s everything that a person can see, is performing. It also gives you suggestions on how you can 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 really well. 

My current Google page speed score.

Mobile

This is my current google page speed score for mobile devices. The score is very low, meaning my front end is not configured efficiently, so my website speed will most likely be very slow.

Desktop

This is my current google page speed score for desktop. The score is very low, meaning my front end is not configured efficiently, so my website speed will most likely be very slow.

Let's boost these scores into the green zone.

This is how you can make your website and pages load much faster!

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

This demonstration is done on a WordPress site. Unfortunately I can’t demonstrate for all content management systems because there are too many of them. But you will be able to implement the steps I’ve used here, on your own platform. If you have issues, please leave a comment and I’ll try to resolve it for you. Ok, let’s get into it! 

Update your website and plugins.

The first thing you want to do is update your plugins and make sure your website is running the latest version, as 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. 

There are a few backup plugins available. I use BackWPup by Inpsyde. If you search for ‘backwpup’ in your WordPress plugin directory, you will find it. 

Select plugins and add new. 

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

Type ‘backwpup’ in the search field.

Search for backwpup plugin. This is a WordPress plugin that you can use to backup your site.

Install the plugin and activate it.

Install and activate the BackWPup plugin.

Add a new job.

Add a new job. Backing up your WordPress website.

Name your backup and select your tasks.

These are my default settings I use to back up my WordPress website.

Choose your archive format. I selected the zip format but there are other options available to you.

Selecting .zip as my archive when I'm backing my WordPress website.

Then choose where you would like your backup to be stored. I prefer to send my backup to a destination folder which is later downloaded to an external device.

I back up my website to a backup folder.

The option that you choose will appear as a new tab at the top.

Your backup destination appears as a tab.

You are able to change the location of your backup folder if you need to. 

Save changes. 

From your BackWPup menu, select jobs. 

Select jobs from your BackWPup plugin.

Run the job you’ve just created (Run now) to begin the backup.

Once you have selected your job, click on run now to start your backup.

It usually doesn’t take that long but this will depend on the size of your website. 

Once your backup is complete, go to your dashboard and make sure you are running the latest version of WordPress or whichever content management system you are using. If you are not, update to the latest version. 

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

You may need to log in again. 

You should now be running the latest version of your website and all your plugins should be up to date as well. 

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 faster you will be able to deliver your content. 

A CDN is like distributing your website in the cloud. And it makes a huge difference to your website speed

If your website is hosted in South Africa, and somebody views your website from the same country as you, 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 so it will take longer to get there. 

When you place your website on a CDN, it distributes it all over the world. So wherever your website is opened, it will always have a shorter distance to travel, making your website speed much faster. 

There are a number of services available to you. I use Cloudflare. It’s free if you have a small website like this one, and you get SSL, which is a type of encryption for your website. Google favours sites with SSL and will even give your site a slight boost if it has it.

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.

Select the free plan that Cloudflare offers.

Once you’ve done this, you will get a list of all of your DNS records for your review. You may see a few records on your list, e.g. you may have a blog on a subdomain like blog.yourdomain.com. Go through your list and if there is a domain record missing, you may add it here. 

Then click continue. 

You should see something similar to this:

Replacing your current nameservers with Cloudflare's nameservers.

Now you are going to transfer your data from your current host to Cloudflare’s hosts which are distributed globally. Most registrar’s will have some type of 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 where you will 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 are able to 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.

This is where you are going to 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. Once activated, you will be notified via email. 

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

Caching

Caching places information on your computer so that websites you visit load faster. There are three types of caching that I want to focus on here that will enable your website to load much faster. 

Browser caching allows people visiting your website to navigate pages more efficiently. It does this by storing website assets like images and logos, HTML, CSS and javascript on your computer’s hard drive. 

Object caching stores database queries so that the next time a request is made, it is served from the cache instead of making a query to the database. 

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 quite severely. Object caching will deliver queries to people much faster. 

Page caching saves the layout and the design elements of a page onto your hard drive, like browser caching does, so a static page is served from the person’s computer rather than the server itself. 

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 really straight forward.

If you have installed WP Rocket, then go to your dashboard, under “Getting Started”, view the second video: “Finding the Best Settings for Your Site” which will show you how to set this all up very easily. 

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

Watch the video on how to set up your WP Rocket plugin with your WordPress site. It's really easy. You'll be set up in no time.

I used standard settings for my configuration.

Configure Cloudflare to work with WP Rocket.

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

You cannot use the Cloudflare add-on and the WP Rocket add-on at the same time on your WordPress site. If you have the Cloudflare plug-in enabled, you will need to deactivate it first. 

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.

In the WP Rocket menu navigation, under add-ons, select Cloudflare.

Enter your API key, your 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, click on your profile at the top, right hand side of the page.

To find your your Cloudflare global API key, go to your Cloudflare dashboard and select your profile.

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 which you will find 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.

Your Cloudflare settings are now integrated with WP Rocket

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

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

Setting up W3 Total Cache plugin.

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 in your API key and your 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 and your website speed should be much faster now. 

Images can slow your website down a lot - here is an image compression technique that will make your page speed much faster.

I’m going to show you another web performance tool I use to see how efficiently my images are loading. It offers similar features to Google’s  PageSpeed Insights, but I find it gives me a more accurate diagnosis. It’s called GTmetrix

There are a few reasons why there are differences between these two performance tools. GTmetrix has modified Google’s original open source PageSpeed library from 20 to 27 metrics, as they feel this results in a more accurate score. 

If you are interested in learning more about this, then visit their blog which will give more detail 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 the average. I want it to be in the green. My YSlow, or Yahoo score is good, so I don’t need to worry about it. 

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

These were my Google PageSpeed performance scores measured by GTmetrix.

You can clearly 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 to use plugins that results in a lossless compression, meaning you won’t lose image quality. 

The first plugin I use is Smush. I’m using the free version, but you may also upgrade to the pro version which will compress your images even more. 

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

Search for Smush in your WordPress plugin directory.

Install your Smush plugin.

Go to your Smush dashboard and 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 the file size limit has been exceeded. 

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!

If you want to compress your images even further, then Compressor.io is another brilliant compression tool that you can use that’ll reduce your file sizes even further. 

Phew - we are almost there!

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

My new Google page speed score.

Desktop

My new Google Page Speed score for desktop.

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

Mobile

This is my new Google Page Speed score, which is 97/100

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

My website speed tested on Think with Google.

Website templates and website speed - a word of caution.

For awhile 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 you are trying to increase your website speed, your biggest challenge is going to be your CSS, scripts and your images. A lot of 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 decided to use Oxygen instead. It is an excellent page builder for WordPress sites, and it only loads CSS and scripts that you are actually using. 

It made 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 you are going to use, because it can slow your website down and hurt your sales!

Conclusion

I hope you found this article useful, but most importantly, it brings your more customers!

If you are struggling to implement some of these techniques, please get in touch with me and I will do my best to assist you. 

Good luck!

closechevron-leftbars