How to Optimize WooCommerce Speed

Is your WooCommerce store slow to load? Perhaps you have also checked your website on Google PageSpeed Insights & the results were less than flattering. 

A fast online store is no longer an advantage for the webmasters & website owners, it is what  your visitors & search engines expect. 

On the other hand failing to deliver a fast website would result in low conversion rates & lower search rankings.

Building a faster website is comparatively easier when you are just starting out.

You can compare among your favorite Woo-Commerce themes & choose the one that complies most with Core Web Vitals.

Select a fast hosting provider & maybe add a CDN as well, and that should give you a fast WooCommerce store that does very well on PageSpeed Insights & passes the Core Web Vital test.

But speeding up your active Woo-Commerce store with thousands of products & live traffic is a different ball game, and you would need to employ a different set of tools & techniques for it. 

In this article, we would guide you on how you can improve the performance of your active WooCommerce store, and demonstrate the optimization techniques you can follow to get a high performing, lightning fast website.

You would also see how RabbitLoader can help you implement those same optimization techniques just by installing a plugin. 

So, if you are just looking for a quick solution to improve the speed of your WooCommerce website I would suggest you to just install RabbitLoader Plugin on your WooCommerce Website.

Why Do I Need a Fast WooCommerece Website?

1. Conversion Rate: A faster loading ecommerce website is important to keep the conversion rate at an optimal level.

Improving conversion rate can improve the revenue of your online store, and a faster website just gives you the push in the right direction with your Conversion Rate Optimization (CRO) efforts.

2. User Experience: User experience is paramount for improving conversion rate, increasing returning users and as well as improving the organic SEO. 

Improving the speed of your ecommerce website is one way to take your website to a step higher on the user experience ladder.

3. Mitigating Bounce Rate: Bounce rate affects your website’s dwell time and conversion rate. 

You wouldn’t want to spend a fortune on promotions & digital marketing only for the visitors to leave your website without even looking at the offerings.

A short load time helps your website reduce the bounce rate and 

4. SEO/Ranking: Your website’s loading time is interrelated with its PageSpeed Performance, Core Veb Vitals and the Page Experience all of which are important ranking signals.

Improving your PageSpeed would give you the edge over your competition and help you rank higher.

How Can I Check My Website Speed?

The first step to improve your website’s speed is to measure the Speed first. 

It would not only give you a clear understanding of your website’s current performance status but also work as a benchmark to compare the future improvements made by implementing any performance optimization tools or techniques.

How to Use Google PageSpeed Insights?

Google PSI is by far the most used tool to perform a PageSpeed test. It tells you how a specific page is performing by assigning the page a numeric value from 0 & 100  & also suggests the improvement you must make in order to improve the test results.

Along with the page loading time, Google PSI also focuses on the interactivity & and visual stability of the page you were testing. 

PageSpeed Insights shows results based on both the Lab data and the real user data, which is useful for websites with some live traffic.

How to Use GTMetrix?

GTmetrix is another very popular performance testing tool, which Google PSI shows you both the lab data & the real user data, GTmetrix is only able to show the lab data.

On the other hand GTMetrix keeps the history of speed tests and allows you to test your website speed from different locations & using different browsers.

Both the Gtmetrix & PageSpeed Insights show you the issues you need to fix in order to improve the speed of your website.

Why Do WooCommerce Mobile Websites Need to be Faster?

If you check your Google Analytics report for the traffic distribution by device, the mobile device users would probably outnumber the desktop users by 2 to 1. 

The difference could be even more drastic for certain niches & demographics ( read Gen-Z). 

Moreover, mobile device users on an average tend to spend a lot less time on your website & browse a lesser number of pages when compared to the desktop users. 

Hence a slower WooCommerce website would spike your website’s bounce rate for the mobile users much worse than with the desktop users.

Optimizing your ecommerce store for the mobile version is of utmost importance to reduce the high bounce rate & to deliver a better user experience. 

These seemingly marginal  improvements would add up & help you increase the all important conversion rate.

Should You Optimize Your WooCommerce Store Manually or Using Plugins?

Should you optimize your Ecommerce website using plugins or do it manually? That’s a question you should try to answer before you start optimizing the website.

While manual optimization might look tempting and it might also give you a feeling of accomplishment (if you pull it off successfully), it might not be worth the hassle for everyone.

You should only attempt to optimize your WooCommerce store manually if you have prior experience in it or if you have a highly experienced developer team on retainer.

Using plugins is much more convenient when optimizing your website. You just have to make sure not to go overboard & end up using multiple plugins to do the same optimizations.

Multiple plugins or tools for the same task would create conflicts and this might end up slowing down your website.

What Should I Keep in Mind When Optimizing My WooCommerce Store?

Before starting your optimization it is advisable to check the resources you at your disposal. You should know the budget you are working with, your hosting limitations & you should also have a good understanding of the plugin & tools which ar currently active on your WooCommerce store.

Store size: The biggest factor in the optimization both in terms of time required & the budget needed would be the store size. Typically each product listed on your ecommerce site is a different page & it might also have multiple images and other resources per page. 

If your store has thousands of products that’s going to increase your optimization budget as most free plugins would reach their limits when installed on a big WooCommerce store. 

Resource: If you are working with plugins or third party API’s that use JavaScript, you need to pay attention when optimizing your website.

Make sure your optimization doesn’t stop the functionality of the pages or break their design.

Budget: As mentioned earlier if you have a bigger ecommerce site chances are you would need to spend both your time and money on optimizing it.

Most image optimizer CDNs have a limit on their free tier & and a big website with traffic would reach that in no time.

Make sure you are aware of the approximate usage before you spend your time testing out tools or plugins to make sure to not spend your valuable time on something that might look too expensive later on.

How Do I Optimize My New WooCommerce Store?

If you are just starting to build a new website you should start with picking up the right theme, hosting & the right set of plugins you need for your store. 

How to Choose a Fast WooCommerce Theme?

Most popular WooCommerce themes would allow you to check the demo of their themes on their website and more often than not nowadays they mention the page speed of the theme along with its features. 

If you are still not sure you can always check the PageSpeed of a fully functioning demo on Google PageSpeed Insights or both mobile & desktop versions just to be sure.

How to Choose a Hosting for WooCommerce?

Pricing of the shared hosting plans might make it look very tempting but they might not be the best solution for you. There are multiple hosting options available from VPS, managed hosting  to WordPress hosting if you can stretch the budget a little bit. 

If that’s not an option for now, you should look into using your shared hosting along with a CDN network. 

The CDN network would mostly cover the performance drawbacks of your shared hosting and make your website load faster.

Here are a few economical shared hosting you can use along with RabbitLoader plugin for CDN. 

Choose the Right Plugins

The WordPress ecosystem is built on the back of its amazing plugins. They allow flexibility and functionally to WordPress & WooCommerce. 

But similar to other good things in life, even plugins should be used in moderation. Using too many plugins, especially when they try to access the same resources might cause conflict and slow down your WooCommerce store.

Avoid poorly coded plugins, as they might consume more resources than necessary.

The above mentioned tips are only valid if you are building a new website, but for most of us that ship has sailed. 

We have to work with the theme we have, migrating from the hosting provider might be too hectic, the plugins & APIs used in the websites are must haves. How do we optimize the live WooCommerce store?

Lets see below, but if you just want a quick solution & do not want to go to the nitty-gritty of it, we just recommend you to install RabbitLoader.

How To Optimize WooCommerce Speed​?

To optimize a WooCommerce store, you would need to optimize different resources & elements in the website. 

If you consider the size of a WooCommerce page as the weight of the page, different resources on the page have different weightage. For example images are the biggest assets on your pages by size.

Hence optimizing images would have by far the biggest impact on your page size.

We have done each optimization mentioned here on our test website jumbolists.com and checked the PageSpeed Scores with and without each optimization on Google PageSpeed Insights to showcase what impacts each of the optimization PageSpeed.

After installing the RabbitLoader plugin & activating all the optimization features on our test website jumbolists.com, we were able to achieve a whooping score of 99 out of 100 for desktop & 95 for the mobile version of the website from a measly desktop score of 40 & mobile score of 30.

We have listed all the different optimizations and their effect on PageSpeed here, this should help you implement the same optimizations on your own WooCommerce store, with the help of this guide you can optimize your website both manually and with the help of RabbitLoader optimization Plugins. 

• How to Optimize Images for WooCommerce?

Images are the biggest resource on a page by size, for e-commerce websites it is more noticeable as they tend to have multiple high quality images. 

Converting your images into WebP format reduces the size of the images without losing the quality, the process is also known as lossless compression.

To convert your images into the next gen WebP or the AVIF formats you can use an image optimizer like Imagify or RabitLoader.

Just the image optimization itself has reduced the page size by 50%.

• How Does Lazy Loading Work?

Another aspect of optimizing images is to load them in the correct sequence. 

Think of it this way, your whole page might have 10 images in them at different depths of the pages. But as a visitor you only see only 2 of them unless you scroll down. 

The images you can see without scrolling down are called critical images. Lazy Loading refers to the technique where the critical images are loaded to the visitors browser with prodigy & the other images are loaded when needed.

Lazy Loading images has a huge impact on mobile devices, when we only implemented the lazy loading using RabbitLoader plugin on the test ecommerce website we achieved a PageSpeed score of 76.

• How to add Lazy Loading in HTML?

<img src="https://jumbolists.com/wp-content/uploads/2021/10/placeholder-image.jpg" 

    data-src="https://i0.wp.com/jumbolists.com/wp-content/uploads/2021/10/sweets-bakery-cyan-cake.jpg?fit=580%2C693&ssl=1" 

    alt="Cyan Cake from Sweets Bakery" 

    width="580" 

    height="693" 

    loading="lazy"

>

• Do I need a CDN for my Website?

A Content Delivery Network helps deliver the static resources like images & JavaScript & CSS files to the visitors of your website from a nearest node server.

This helps the assets to load faster on your visitor’s browser, improving the load time and the user experience.

There are a number of free and paid CDN plugins available which you can install on your WooCommerce site to speed up your store without much hassle.

When selecting a CDN service for your website make sure it has a high PoP (point of presence) and check the bandwidth limitations. 

Installing the RabbitLoader plugin enables a high quality integrated CDN service on your website with unlimited CDN bandwidth and 300+ PoPs. 

• Can Browser Caching Speed up a Website?

Browser caching is a technique where a user’s browser would save strategic assets like images, Javascript, CSS and Even HTML files in the browser memory when a visitor loads your website.

On the second visit the browser would load the Static assets and the HTML from the browser memory instead of your server.

This process makes the user feel your website opens instantly without any real delay.

While browser caching is very effective, it only delivers a better user experience to the returning visitors and not the first time visitors. 

Browser caching can be implemented both manually and using a plugin like RabbitLoader. 

<IfModule mod_expires.c>

    ExpiresActive On

    ExpiresByType image/webp "access plus 15 days"

    ExpiresByType font/ttf "access plus 15 days"

</IfModule>

<IfModule mod_deflate.c>

    AddOutputFilterByType DEFLATE image/webp

    AddOutputFilterByType DEFLATE font/ttf

</IfModule>

• What is Critical CSS ?

Critical CSS is the part of your CSS code that exists in the instantly viewable area of your website. The area is also known as a viewport.

When loading the website, the user can only observe this portion of your website without scrolling down.

Adding critical CSS on your website is crucial if you want to see the PageSpeed score in the Green zone by scoring 90+ in the PageSpeed Insights.

• How to Generate Critical CSS

CSS is responsible for the aesthetics of your website, usually websites need a lot of CSS code with multiple files. 

Loading all those files causes your website page size to increase, which interns results in a slower loading website.

The Critical CSS file is generated by only collecting the CSS codes essential for the visible area when a user loads a website. 

This file is loaded before any other CSS file, hence the user does not observe any delay in loading the website.

To generate a CSS file you can use a CSS file generator like ….

When we used RabbitLoader Loader plugin on our test website jumbolists.com, the critical CSS generated by RabbitLoader was 95% smaller than the optimized CSS files, it reduced the CSS size from 2 MB to just 50KB.

Which resulted in a reduction of CSS rendering time from 3 seconds to just 390 milliseconds.

Critical CSS also had a huge impact on the PageSpeed scores, the desktop score website from previous 40 to a whopping 84 with the help of the critical CSS.

• How to Defer JavaScript Loading?

Deferring JavaScript is delaying its execution. It can be done manually by identifying the script that is not needed immediately when the webpage is loaded and adding a defer tag to the script.

JavaScript is very resource intensive, the more JS files you have on your website the slower it would load. 

When using Rabbit Loader on jumbolists.com for optimizing it the JavaScript deferring had a massively positive impact on the mobile PageSpeed score.

Using a plugin like RabbitLoader allows you to implement deferring JavaScript without adding the defer tags manually.

<script src="path/to/java-script.js" defer></script>

• What is Minification?

Minification is the process of reducing the size of HTML, CSS & JavaScript with the website, by reducing the unnecessary spaces in the code.

There are multiple minifier plugins available which helps you minify the code. 

The advantage of using RabbitLoader would be to use one plugin that takes care of everything, this also eliminates any possibility of conflicts among plugins. 

Other than the minification RabbitLoader also takes care of compression, which is essential to reduce the page size and the loading time.

Why Should You Use RabbitLoader to Optimize WooCommerce?

The check-list to optimize your WooCommerce website is quite extensive. To optimize your WooCommerce store for the best loading time & PageSpeed score is time consuming and tedious.

Using RabbitLoader makes it easy & quick. RabbitLoader replaces 5 -6 plugins.

Just install it & each page on your website is optimized. Depending on the number of pages on your WooCommerce store it might take anywhere from 5 minutes to a couple of hours to optimize all the pages on your website.