5 effective ways to speed up your WooCommerce store

May 26, 2020

Instant gratification is the norm nowadays. It’s a no-brainer to have a speedy WooCommerce store if you want to offer your customers a great experience on your website. Store performance and speed is one of the most important factors that determine the failure or success of your business. A slow WooCommerce store would most probably result in cart abandonment, a noticeable dip in customer loyalty and even SERP visibility. 

In this article, we will shed light on 5 guaranteed ways to speed up your WooCommerce store.

Let’s take a look at some statistics by Google to better understand how big an impact a slow website delivers on your business. 

  • The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds.
  • As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.

https://storage.googleapis.com/twg-content/original_images/mobile-page-speed-new-industry-benchmarks-01-01-download.jpg

More than 81% of Americans own a smartphone with an average American spending over 4 hours scrolling, snapping and shopping. Moreover, 4 out 5 Americans do online shopping with more than 50% of these having already made a purchase on their smartphone. These numbers would definitely grow globally as smartphones become easily accessible to everyone. Coupled with the rise of eCommerce, it is certain that m-commerce is the future. 

Best practices that Google recommends

Assuming that your focus is on building mobile-first experiences for your customers, following metrics and best practices by Google are of vital importance.

FINAL SPEED COVER

Source: Think With Google

FINAL SPEED TO BYTE COVER

Source: Think With Google

Measuring your WooCommerce speed

Now that you have an idea how critical your WooCommerce speed is, let’s focus on how you can measure it.  

While there are a wide variety of tools available online to measure your website loading time, we recommend the following 2 to start with, as these give you multiple performance metrics. Also, measuring your website speed with multiple tools would help you get the full picture. 

GTMetrix

With more than 570 million pages analyzed on this platform, you can kick off your speed analysis campaign here for free. Comprehensive and powerful, GTMetrix would give you detailed stats about everything that has to do with your website. Among other advanced options, you also have the option to select different server locations to run the test from.

Google PageSpeed Insights

As another option to compare the results, you can use the PageSpeed Insights by Google which provides detailed feedback and advice on what to fix. Take these results with a pinch of salt and compare the results with GTMetrix or Pingdom. Don’t let the results get on your nerves because all these tools provide results that are 100% accurate and consistent. To simplify things, go old school and test your WooCommerce site speed by loading it yourself. If it takes longer than 1 or 2 seconds, you can stick to recommendations and possible fixes suggested by GTMetrix and Pingdom. Besides that, there are a lot of effective ways to speed up your WooCommerce store, which brings us to our next section. 

1. Improve efficiency with Cloud Hosting 

It’s perfectly fine to start humble if you are just launching your business. Start with a limited set of resources with the ability to upgrade as your business and customer base grow. One of the biggest advantages of Cloud hosting is providing faster data access even for resource-intensive data. For example, modern cloud hosting services detect which server is closest to the customer and answer requests in the fastest possible way.

The ease of scalability that Cloud hosting offers is not achievable with other solutions. The ability to quickly increase or decrease the resources and features you need gives your business incredible speed and flexibility. Focus on growing your business and forget about stuff like server security, page load time and disaster recovery etc. 

2. Make good use of Image Optimization 

Images put life into your website, don’t they? And they also make up a whopping 51% of all web content. Every image is an HTTP request; meaning more time your customers have to wait for the page to load. This is precisely why you should optimize and compress images that can reduce your page load size by up to 80%. You can start with the following ways to optimize your images for web: 

  • Adobe Photoshop provides a great solution for image optimization: Save for Web feature. Running all your images through this feature of Photoshop would already save you a lot on the image file size trouble. 
  • Image resizing works best for a faster page load time. For example, you need to put an image of dimensions 3500×4500 px as a product’s display image of size 250×250 px. So, rather than setting its height and width attributes in HTML code, a better way would be to resize it before it is sent to the browser by the server. It would drastically reduce the time it takes for your page to load. 
  • Minimize the white space around images and use CSS to provide padding, if needed. 
  • Changing image quality from 100% to 10% or 20% would not have a visible effect on the quality of the image but will reduce the image size to a great extent so that it loads way faster. 
  • Lossy vs Lossless is a concept that is most commonly misunderstood by people. Lossy is the kind of compression that happens when a compressed image loses its data. The result won’t be noticed by the user but the image size would be significantly reduced. This is ideal for JPEG file formats. 

On the other hand, Lossless compression is where an image is compressed, all its info remains untouched, so that it can be retrieved upon decompression. The quality of an image is not damaged here either but it needs to be decompressed before rendering. 

There are dozens of free image optimization tools that you can use to optimize images for a better, faster performance. Some of the most notable ones are: JPEG Optimizer, Kraken.io, Trimage. If you’d like to skip all that trouble, you could install a WordPress plugin called Imsanity that automatically resizes images to acceptable dimensions. 

3. Reduce your Time to First Byte (TTFB)

A screenshot of the Lighthouse Server response times are low (TTFB) audit

Simply put, it is the time that your customers’ browser needs to wait before retrieving data from the server. There are basically 3 elements that make up your TTFB:

  • HTTP request 
  • Process request 
  • Response time

Ideally, you should aim for TTFB less than 200ms. WebPageTest is a good resource to keep track of your TTFB as you keep on making changes. Alternatively, you can also use Google DevTools to check your TTFB and compare results with WebPageTest. If it exceeds 200ms, you’d have to take steps to keep it low. 

Some common ways of optimizing TTFB are:

  • Using a CDN (Content Delivery Network) especially if your customers are from different parts of the world. CDN is a worldwide spread network of servers that allows users to download data from websites using the ‘closest network node’. The result is a better, faster experience for the customers on your website. 
  • Reducing HTTP requests by optimizing images and it is a good practice to make JavaScript asynchronous and combine CSS files together. 
  • Using a premium DNS provider also helps in reducing TTFB and delivering faster experiences to your customers. 

 4. Use Server and Browser Cache

An easy and affordable way to speed up your WooCommerce store. The content that has been seen once is served to the browser faster rather than retrieving it the standard way. Therefore, you get to minimize the amount of data that is sent between the customer’s browser, WP database and web server. This translates to faster page loading times. 

Tip: When using caching for faster page loading times, make sure to exclude Cart, My Account and Checkout pages from the cache. Of course, these pages need to remain dynamic as they display customer specific information.

Making use of browser cache is also a great way to speed up your store, especially for those customers who visit your website regularly. Since the browser stores specific items like CSS files, images and logos for a certain amount of time, this allows these saved items to be served immediately when the user visits your website the next time. 

You can use the all-in-one site acceleration plugin Litespeed with great features including image optimization, minifying CSS, HTML and JavaScript files, enabling browser cache and more.

5. Choose a light theme

Last but not the least, and the most obvious factor is choosing a lightweight theme. In most of the cases, the aesthetic side of a website is a designer’s responsibility that doesn’t usually take page load times into account. What happens is that the aesthetics of the front-end take over the page load time. 

It is strongly recommended to pick a theme that loads fast and is optimized for performance. In addition to that, it should have a clean codebase that puts speed over aesthetics. 

While there are thousands of themes, both premium and free to choose from, we recommend Shoptimizer. This theme, unlike most of the others, is built specifically for WooCommerce to be lightning fast. It comes with a bundle of advanced features to help you boost your conversions as well.