eCommerce Page Speed Optimizations - 3 Things You Should Be Doing

The shorter the time between link click and fully loaded page, the more money your site makes, the data is in on that one. Much like Formula 1, shaving off a millisecond here and there can accumulate into massive gains. With that in mind, let’s have a look at things you can do to rack up your Google PageSpeed Insights performance score and decrease your bounce rates while increasing your conversion rates and average order values. Winning!

Host your eCommerce site with a good hosting service

Hosting can make a huge difference to the page load speed. First of all, you need to look at which type of hosting you are going to use, I have actually written an article about the four main types of web hosting (link) to help you get a better understanding. The more powerful your hosting choice, the quicker your online store will load for prospective customers. Of course, greater power means greater expenses, so you have to find that balance.

Another thing most overlook is the location of your hosting. For example, if you run boutique store specialising in the sale of psychedelic crochet doilies to a cult following throughout Scotland and the rest of the United Kingdom then it doesn’t make sense to host your website with a company in Sydney. This is due to the delays caused by data having to pinball it’s way around data centers across the world every time a request is made… and loading a website can take hundreds of requests. All these delays compound into an horrendous experience for your visitors. Better to have your online store hosted in Glasgow, negating the need for your servers communications to have to merge into the busy traffic of the international backbone, with it’s bottlenecks along the way.

Use caching on your online shop

Caching is basically the saving of certain website resources for later so your visitors browsers don’t need to keep requesting, downloading or generating the same things every time. Sound a bit confusing? It is. It doesn’t help that the term ‘caching’ encompaases a whole host of tricks and methods to use memory to boost future loading of a sites pages.

Here’s a simple one to give you an idea. Take your store's ever present logo in the sitewide header for example. Normally when a user’s browser requests a website, the page code is sent to the browser and in that code will be links to other files that it needs to download as it reads through it, like the image file ‘/images/my-store-logo-transparent.png’, so that it can be shown on your screen.

Obviously it would be ridiculous for the visitors browser to download your logo’s image file over and over every time they visit a new page or hit reload. So what the browser will do is know that it is a common file and just keep a copy saved on the visitors device. Then, when it sees that file referenced in page code again, it can save time and bandwidth by loading the local copy of the logo file instead of downloading it all over again.

This is a simple example of a very basic form of caching just to give you a quick idea of how it works. There are dozens of tricks and optimisations that proper caching can utilize to make a huge difference on your page load speed. Make sure you are taking advantage of it!

If you are using WooCommerce then check out our recent article - Best Caching Plugins to Speed Up a WooCommerce Store in 2021

Optimize Your Product Images

Optimize all your images really, but for many eCommerce stores, product images will account for the majority of the payload being delivered to devices of visitors. With this in mind, you want to try and make sure that all eyes on your site are adequately aesthetically gratified, as instantly as possible, with the perfect balance of quality and file size.

First thing to look at is picking the right filetype for the job, I recommend checking out the latest web optimized file types available right now to pick the best one for you.

Another thing to look at is image size. Is your site using the right image size for the right situation? Using a super high resolution version of your logo that was sized for filling HD televisions doesn’t make much sense if the visitors browser is just going to shrink it down to display in the top corner of somebody’s phone screen.

Your site should be loading small, resized preview versions of product images on listing pages while offering up a way to see the full size images on the product page. This is something your CMS should handle. It’s up to you to decide on the image dimensions you upload to balance your visitors ability to zoom in and inspect the product against their devices ability to load it snappily enough. I suggest picking image dimensions that you are happy enough gives the visitor the ability to zoom in enough and then look at compressing it down for there.

Remember, more than 50% of an eCommerce web page’s download size is the images that go with it. The text and style code is barely anything in comparison, so optimizing images is critical when it comes to revving up your eComm store.