Ideal page loading speed for eCommerce websites

According to an Akamai study, 47% of customers expect a page to load in 2 seconds or less and 40% of customers wait no more than 3 seconds to load before they abandoning the website.

So, 2 seconds is a generally accepted page loading speed in the eCommerce field. It is not that easy to get a web page load in under 2 seconds, especially on eCommerce websites. So, generally, most eCommerce websites go for a 3 seconds threshold.

Web page speed test

The first step to improving the page loading speed of your WooCommerce website is identifying the current speed and find out what makes your website load slowly.

Many tools will help you with running these tests. We use the following three tools.

  • Google Pagespeed Insights
  • GT metrix
  • WebPageTest

You can enter the URL of a web page and they will provide page loading analysis. The analysis will contain various metrics related to page loading speed. They will also provide a diagnostic report with recommendations to improve the page loading speed.

Tips to speed up a WooCommerce website

Website speed optimization is not that complex. All you need to do is follow the recommended practices while you developing the website. It is not something you do after you launch your website. It is something you need to think about from the website planning stage itself.

Get quality hosting

If you are concerned about the page loading speed, one thing you can’t compromise is the quality of hosting. A quality hosting is the foundation of speed optimization. Without it, none of the following tips are going to help you.

In web hosting, you get what you pay for. So, don’t go for cheap hosting plans unless you can’t afford to pay for quality hosting.

Update to the latest version of PHP

Some WordPress hosting service providers still use an older version of PHP like PHP 5.4. Please ensure that your server has the latest stable version of PHP.

PHP 5.x is not acceptable. You must upgrade it to PHP a 7.x version. Some hosting providers allow you to choose the version while some others. You need to think about this while you picking up the hosting service provider.

Optimize the images

Image contributes to the bulk of total page size on a typical web page. The proportion would be much higher in eCommerce websites because they are generally image-rich. So, there is a huge opportunity to increase the page loading speed by optimizing the images.

Image optimization is all about reducing the file size to the maximum

.

Ideally, an image on your website shouldn’t be larger than 100 KB.

You can check this in-depth article about image optimization to learn more about it, get the best tools, and learn the best strategies. So, here we cover the main points in a nutshell.

Use appropriate image dimension

You shouldn’t use an image that is larger than it has to be. Sometimes, web designers use high-resolution images to be displayed in small areas. You need to check for if your website contains images like that. As the size of the image increases, the file size also increases.So, you need to reduce the image file size to the maximum by resizing the images appropriately.

Pagespeed Insights and GT metrix report will help you to identify such images on your website.

Choose image formats appropriately

Choose between JPEG, SVG, PNG, WebP, and GIF image formats by considering which is the best option in a given situation.

Compress images

Compressing the image helps you to reduce the file size significantly. There are many ways you can do this.

You can either upload the image after compressing them or compress the images from WordPress.
Here are a few tools that we recommend to compress the images before uploading them to the WordPress

You can also use WordPress plugins to compress the images within WordPress. These tools also help you to identify the non-optimized images on the website. Most of the good WordPress image compression plugins are freemium tools. They will give limited and basic features in the free version. But if you want to get the advanced features offered by them, you will need to subscribe to a plan.

Complete image optimization guide for WordPress websites

Lazy load images

Lazy loading of images is a great technique to improve the performance of a website greatly. The lazy loading is the practice of not loading the image until the visitor scroll down to that area. This way, you can reduce the initial page loading time.

You can set this up manually or use a WordPress plugin. Fortunately, WordPress caching plugins like WP Rocket allows you to set up lazy loading with a simple click.

Responsive images

You may want to use high-resolution images on the computers but delivering the image with the same size for smartphones is overkill. The responsive image is a technique of delivering appropriate images based on the width of the device. It helps you to improve the page loading speed on small devices significantly. The responsive image is an advanced website performance optimization tactic, so you may need to hire a web developer to set up this.

Reduce the number of HTTP requests

The number of HTTP requests for a web page affects the page loading speed. Some WordPress plugins unnecessarily load resources in all pages.

You need to analyze each HTTP requests on a page and check if they are necessary for the page. If not, you need to get rid of them from the page. This is a very time-consuming process and requires a little bit of technical knowledge. So, it is advised to hire a WooCommerce or WordPress optimization expert to do this.

Get rid of render-blocking scripts

CSS and Javascript file block the rendering of the web page. So, ideally, you should load them after the main document is loaded completely. You can also implement the async or defer method for Javascript and CSS documents to avoid render blocking.

There are many plugins that will help you to implement this. Most of the popular WordPress caching plugins offer this feature. All you need to do is check a checkbox to eliminate render-blocking scripts.

Try Critical CSS

If you defer the loading of CSS documents, the web page layout will change during the page load. At first, the web page is displayed based on the browser default CSS and then the layout is changed when the CSS is loaded later. This layout change created a poor user experience.

This can be avoided by adding the scripts and CSS code for above the fold area of the web page as inline in the main document. This way, you load the CSS code for only above the fold content initially so the layout will not change as the page is loaded. The CSS code for the remaining part of the page is loaded at the end. It is not a problem if the layout is changed in this area during the page load because visitors may not see it. They will only see the above the fold area.

Implement server and browser cache

Server and browser cashing can significantly improve the page loading speed. Fortunately, there are many free WordPress plugins that will help you with this.

WP Rocket, W3 Total Cache, WP Super Cache and WP Fastest Cache are some of the popular WordPress caching plugins. You can use any of these plugins. Apart from the server and browser caching, these tools also help you to optimize a WordPress website in many different ways.

Please remember that caching is the last thing you should do after implementing all other speed optimization techniques.

Minify and compress documents

Minifying and compressing CSS and Javascript documents are helpful to reduce the total page size and it reduces the page load time. Most of the popular caching plugins also offer these features. All you need to do is check the checkboxes for minification and compression.

Clean WordPress

Remove inactive plugins

The excessive number of plugins will affect the performance of your website. If you have more than 10 plugins installed on your WordPress, you need to do a house cleaning.

Identify the plugins that are crucial and try to get rid of the remaining ones. Most of the cases, you can get PHP code snippets that you can add to the functions.php file of your instead of using a plugin.

Clean database

If you are using your website for a long time, there is a good chance that the database is cluttered with unnecessary data. It increases the size of the database and affects the performance. Doing regular database cleanups will help to reduce the database and improve the performance to an extent.

Control post revision

Post revision is a great feature because it allows you to revert to the previous version of a post. However, it increases the database size which affects the performance of the website.
So, it is a better idea to reduce the number of post revisions or disable it and increase the autosave interval.

Limit post revision

define ('WP_POST_REVISIONS', 3);

Disable post revision

define ('WP_POST_REVISIONS', false);

Increase autosave interval

define('AUTOSAVE_INTERVAL', 300 ); // seconds

Use CDN

Using a CDN (Content Delivery Network) service for your WooCommerce website has multiple benefits including improvement in the page load speed. So, it is always better to use a CDN on WooCommerce websites, especially if you are selling globally.

If you have CDN enabled, the CDN takes care of delivering stating resources on the web page from a server that is close to the website visitor. Apart from that, CDNs have state of the art infrastructure and help you to deliver the resources to the visitor as quickly as possible.

Learn more about the CDN and how to integrate Cloudflare CDN with a WordPress website.

Summary

We believe that the above tips and techniques will help you to get your WooCommerce website load under 3 seconds. Now you know these, it is time to optimize your website and improve sales on your WooCommerce store.