why website speed matters

Why Website Speed Matters For Ecommerce Brands

AJ Saunders Profile Picture

Written by on 31 May 21

Filed under: SEO (Search Engine Optimization)

As a digital marketing and ecommerce coach, I see three common issues with websites: the first is speed, the second is keywords, and the third is links. If you don’t know why website speed matters to your ecommerce site, you’ll want to keep reading.

 

Imagine website speed as driving a motorbike vs taking a bus. Sure, public transport will get you there. However, on a motorbike, you can whizz in and out of traffic and get there in a fraction of the time.

 

Your users want the motorbike experience. They want your pages to load at lightning speed, allowing them to buy products or enjoy your latest blog. 

 

With our attention spans decreasing, we’re unwilling to wait for the bus let alone suffer through the journey.

 

There are plenty of reasons why website speed matters, but revenue is the most pressing. To be blunt, if your ecommerce website takes more than 3 seconds to load, you’re losing a ton of sales.

 

Don’t worry, I have a checklist for you that ensures your website is as fast as possible. So if you want to make more cash without working harder, this article is for you.

 

 

So, why website speed matters?

Here are a few reasons why website speed matters. First, think about speed in terms of website usability. Making potential customers wait for a page to load could lead them to consider if you care about their purchase or if you’re still in business.

 

According to Google, a 1-second delay on mobile can impact up to 20% of your conversions. You likely could be losing $100k plus in revenue per year without knowing it.

 

Considering the SEO impact, if a potential customer bounces back to Google, they might re-evaluate your position downwards within the search results.

 

Thankfully, the reverse is true as well. If you have a website that loads fast and has great content and a strong link profile, you’re likely to see a boost in rankings.

 

A recent consultancy client was ranking at position 4 for a business-critical keyword. However, analyzing their website using Google page speed insight revealed that they had a painfully slow, bloated website.

 

Diving into the HTML code showed even more issues. But that’s jumping ahead.

 

With this ecommerce store, if they moved one position (from 4 to 3), their traffic for this keyword would jump by a massive 50%! I believed we could achieve this improvement (and a respectable boost across all their ranking) by simply sorting out their issues with their website’s speed.

 

 

Where to start improving your website’s speed

Now you understand why website speed matters, we need to benchmark our current performance. But how?!

 

Note: To help you, each step is rated easy, medium, and expert. So, if you’re not techy start with the easy steps. Either block out an afternoon to try the more advanced steps or employ a professional web developer to help you.

 

Easy: Google Page Insights

I like how simple the Google Page Insights (free) tool is. Start by putting your URL into the search bar. After scanning your website, the tool gives you a score for mobile and desktop. It’ll also show actionable steps to improve your website’s speed.

 

If you’re using Website Auditor, you have access to Google Page Insights as it’s built into the tool, allowing you to quickly analyze your website’s speed.

 

The more issues you have, the lower the score.

 

google page insights

 

Using our website as a starting point, you can see we score 92 out of 100. That’s amazing! Yes, we practice what we preach!

 

Medium: GTmetrix

If you’re not put off by Page Insights, GTmetrix adds another level of data. This time you can see more data like actual page loading speed, size, and more.

 

I use Google Page Insights first to see the big picture. As I tick the big things off the list, I move to GTmetrix. It helps me refine my process and spot quick wins. Again looking at this website, we’re doing great!

 

GTmetrix

 

Medium: HTML Code

The third element I check is the page’s HTML code, which is simple to do. Below are the keyboard commands for viewing your webpage source code for both PC and Mac.

 

PC

 

Mac

 

 

At this point, don’t concern yourself with trying to understand the HTML code. Instead, look at the code as a whole.

 

Are there lines and lines of code? Or is it just a few? Does it look well-formatted or not?

 

html code

 

As our website was coded in-house, it looks tidy. However, here’s a random website, with messy code:

 

messy html code

 

While it looks fine, zoom in, and you’ll see elements within elements and styling inline. Remember, the more lines, the bigger the file size and the slower the page will load.

 

 

Easy speed wins

I’m going to assume to make it easier for us, that your code is a mess, and you scored low on Google Page Insights. So what are a few easy wins?

 

Start by working backwards. It’s easier to sort out your images (could be a massive win!) rather than optimizing your CMS or server performance (which could be a smaller win).

 

Easy: Hosting

If you’re hosting your website on a shared cheap hosting package, you probably started with some speed issues. So, it’s worth paying a little more for hosting.

 

A good package should cost around $12 per month and allow you to run Woocommerce or Adobe Commerce (formerly Magento). Shopify is a different beast as they offer very fast hosting as part of the package.

 

If you’re unsure how your hosting is performing, use GTmetrix. It will tell you the current server response time. If this is over 2 seconds, you have a massive problem. You’re likely losing sales due to a slow website speed.

 

 

Medium: Images

In my experience, one of the quickest wins is image sizes, regardless of whether you’re using Shopify, Magento, or Woocommerce.

 

If the space is small, but you’re loading a massive image, your server is working overtime. And this is likely to slow your website down.

 

Start by using either GIMP (free) or Photoshop (Paid) to resize and crop images to the ideal size for that space. If you’re stuck, there are tons of videos on YouTube showing you how to use these programs.

 

Ensure you export images as .jpg unless it’s a tiny image, then .png is fine. Remember .jpg files will always be smaller in size over .bmp or .png files.

 

You can also use an online image compressor such as Compressor.io and Compress PNG. Try to reduce all of your images to under 100kb in size.

 

Start by exporting images at 75%. You won’t be able to notice a difference, but the file size will be smaller.

 

Pro Tip: Watch the input size. Simply put, there’s no way you’ll be able to resize and compress a 6MB image into one under 100kb!

 

If you’re using WordPress, you can set it to resize and load the correct size for each space. Also, if you’re using a few small images or icons consider combining them into an icon sprite.

 

These small changes could help knock off a few hundred milliseconds!

 

Medium: CSS/JS

Going back to the page you’re trying to optimize. Search the HTML (control F) for “.CSS” and “.JS” files. Ideally, you’d have one of each file. However, if you’re using WordPress, you’ll probably have several.

 

The goal is to reduce the number of JS and CSS files to one or two of each. (Take a look at our source code, you’ll see we have one of each!)

 

If you’re using WordPress, you can install a cache plug-in like WP Cloudflare Super Page Cache or Autoptimize (which we use). Either will combine multiple files into one master file.

 

Magento, for example, has a built-in combiner under the advanced options. So, you’ll need to ensure that box is ticked. Shopify does this automatically.

 

If you’re working with a custom HTML-coded website, you’ll need to copy and paste all your files into one CSS file and one JS file. Having externally hosted JS files might be easier to work with when developing.

 

However, you should consider adding these files to your master files as this will reduce the amount of work you serve has to do.

 

 

Advanced wins

If you don’t know what you’re doing with HTML code and .htaccess files, you’ll need to study the topic or hire someone else. Consider yourself warned!

 

Easy: Check compression

Start by either checking you have the below copied into your .htaccess file or use this free HTTP Compression Test which will do it for you in a second.

 

Medium: CDN

A Content Delivery Network (CDN) is our secret weapon! Using a CDN means your website is copied onto servers all over the world.

 

So when a customer in Australia browsers your website, they’re seeing a local version that’s hosted in Australia. This means your website loads quickly and you can convert more traffic into customers.

 

Popular CDNs include Amazon CloudFront, CloudFlare, and Akamai.

 

Expert: .htaccess file

Editing this file can cause website outage, so please take care.

 

If you have a lot of resources to call to load your page, you’ll want to try and cache them so that they can be easily recalled.

 

Firstly, GZIP compresses files and therefore speeds up your HTML code. This should be copied and pasted into your .htaccess file.

 

## GZIP ##
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

 

Another useful bit of code is expires caching. Again you can copy and paste this into your .htaccess file.

 

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

 

Expert: Html

As this could open a can of worms, you want to get someone who knows what they’re doing.

 

If you decide to have a go, make sure you save your website in a folder offline and either edit it on your browser or copy your website onto a subdomain. Doing either of these will ensure you don’t cause replaceable damage to your website.

 

Depending on your website, you’re aim is to get your page size down to a few kb without images and under 500kb with. Again if you’re using WordPress you can minify your HTML with a cache plug-in.

 

Doing this will reduce your page size further, but you should try and edit your HTML first.

 

 

Finally, run a speed test

There are two ways to do this, you can run a page speed test at each step to analyze any improvements or you could leave it to the end. If you haven’t, test as you go and keep a note of what you’ve done.

 

So now that your ecommerce website loads in under 2 seconds, it’s time for a cup of tea or coffee! Always remember why website speed matters, both to you and your website’s visitors.

Last month Izabela saw her search traffic from Google increase by 400% using 3 SEO tips we taught her.

Want the same results? Let's Chat

Want To Drive A Ton Of New Ecommerce Sales?

Join our weekly email for the latest ecommerce digital marketing strategies, tips, and information.