How to get WooCommerce Website to load in under 3 seconds
How to get WooCommerce Website to load in under 3 seconds
Speed is money for an eCommerce website because it is a crucial factor in the shopping experience of your customers.
Customers expect to load a web page within 3 seconds. Good loading speed makes shopping a seamless experience for the customers. It increases the page views and reduces the chance of customers leaving the website before making a purchase. Ultimately, an eCommerce website with quick loading pages helps you to sell more and increase your profit. In this blog, we have put together the essential things you need to do to get a WooCommerce website load in less than 3 seconds.
Table of Contents
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
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.
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.
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
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
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.
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
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.
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.