How to Speed Up WooCommerce

There’s nothing more frustrating than waiting for a website to load. Nobody likes to wait for images to load, for items to show up in the cart, or worse to pay. In fact, according to a study done by Google, “53% of mobile users left the site if it took longer than 3 seconds to load.” (kinsta.com) Imagine how much money you are losing if more than half of your mobile customers are leaving the site before it even loads, simply because the loading time is too long.  If your WooCommerce store is slow, that means you are leaving money on the table.

Buyers want an enjoyable and easy shopping experience. A slow site does more than frustrate your customers, it can keep people from finding you in the first place. Page speed plays a key role in SEO ranking.

There are many components to ensuring your store runs smoothly. Your site can easily be bogged down by several things like large assets, unnecessary HTTP requests, layout shifts, etc. Luckily, LiteSpeed server software and the accompanying LiteSpeed Cache – WordPress plugin provide powerful tools to speed up your WooCommerce site. We’ve created this guide to show you the steps you need to take to make your store faster. Follow along to learn some of our best speed optimization tips.

Slow Store? How Do You Know?

Let’s start with measuring the speed of your site. Performing a website speed test is a great place to get started so you can find out exactly what you’re dealing with before jumping right into speed improvements.

Google PageSpeed Insights is a great speed audit tool to use to measure your WooCommerce performance. It will analyze your browser and mobile speed as well as give you suggestions on where you can optimize and improve the page. Google bases a lot of ranking influence on Core Web Vitals, so paying close attention to your Google PageSpeed Insights rankings is a great area to check if SEO is important to your website.  

GTMetrix is another speed audit tool you can use to measure your page performance. It offers more technical data than Google PageSpeed Insights like Waterfall reports, which may be overwhelming to some but crucial when you want to get technical results. It will also provide you with a list of optimization tips that can help to pinpoint exactly what is slowing you down. One pro tip is that you can actually create a GTMetrix account and get free weekly reports on your site’s speed.

Both Google PageSpeed Insights and GTMetrix are great places to start as they will provide you with a performance score and actionable suggestions. Your performance metrics may vary between the two giving you an arsenal of suggested speed improvements to improve load speed. 

New Relic One can be set up on your server (ask your hosting provider), this software will help you determine in depth metrics about how your site’s server is operating. Is the CPU maxing out? Or are memory limits being occasionally hit? New Relic can help you determine such issues. 

Query Monitor is a WordPress plugin that can provide you with insight about SQL queries that are running slow, as well as PHP errors.  If a certain page is slow, provided that Query Monitor is enabled and you are logged in, navigate to that page and see if there’s any slow queries or errors that appear in the Query Monitor tools.

How to Speed up WooCommerce

Now that we know what we are dealing with, we can get to work on fixing it. There are several areas to address that will speed up the site. Let’s get started.

Hosting

The hosting service you choose plays a large role in the well being of your website. A hosting service does just that, it hosts and stores all of your website content, data, and traffic. If you are using a low quality hosting service, you can expect long load times and poor performance of your WooCommerce site. Hosting is not the place to skimp. 

There are four main types of hosting: 

Shared Hosting – As the name suggests, this is a host shared by multiple businesses. It’s best for sites that are just starting out and/or are low-traffic sites. It is budget friendly, but doesn’t allow for much control or optimization.

Cloud Hosting – Instead of being hosted by a single server, a cloud host utilizes a network of servers that make up the cloud. You’ll have limited control, security, and privacy, but it is budget friendly and allows for WooCommerce scalability. 

Virtual Private Server- Gives you a dedicated server on a virtually shared host. It is a bit more expensive than cloud and shared, but it offers more security and control. It’s best for medium traffic sites. 

Dedicated Server- Is just like it sounds – a server dedicated to one site. This is a more expensive option, but allows for better control. It’s best for high-traffic sites.

When deciding on a hosting service, you’ll want to make sure it has the following qualities:

– Data servers around the world

– A server located in close proximity to your audience

– Quality cloud infrastructure

– SSD storage for faster loading times, NVM technology is even faster.

– Litespeed servers with memcached capabilities

– Flexibility to scale and adapt as you grow your WooCommerce Website

– Trusted support team available 24/7 

Theme Matters

There are tons of themes to choose from when building your WooCommerce site, but all are not equal when it comes to speed. Make sure you select a theme that is compatible with WooCommerce and won’t slow your site down.  A complex or heavy theme means more code added to your site, which will likely affect loading time. Many themes have the option to turn off features you don’t need, and there are always plugins you can add to get the features you want.   You can run a speed test on a few of your favorites before you make your decision. Here is a list of a few of the fastest themes, tested by WP-Rocket (https://wp-rocket.me/blog/speed-up-slow-woocommerce/#fast-woocommerce-theme)

-Botiga

-Blocksy

-The Page Builder Framework

-Neve

-Astra

Choosing a theme requires balancing many aspects including performance. We have fallen in love with the Kadence theme because of its performance and overall feature set.

Increase WordPress Memory Limit

WordPress gives you 32 MB of memory by default. In most cases, this is not nearly enough to run a WooCommerce site, and sooner rather than later you’ll get the dreaded fatal error message. It is recommended that you have at least 256 MBs. You can configure this yourself, or you can contact your hosting company to do it for you. 

Images

Product images are crucial to selling products on the internet, however, they can take up a lot of space, significantly slowing down your loading times. You’ll want to make your images as small as possible, without sacrificing image quality. You can do this by making sure you are uploading the image in the correct format. JPEG images are usually smaller, so unless you have a specific need for something else, use JPEG. JPEG files work on any browser but more modern browsers can use the WebP format which is more performant.

LiteSpeed Cache’s image optimization feature can handle both, but you need to enable this in the settings. “There are a few settings you may want to adjust before you request image optimization. For instance, by default we only optimize your JPG/PNG images. We do not create WebP versions of each image, unless you enable that behavior. You may choose to only create WebPs and forgo the JPG optimization.” – LSCache documentation

You’ll also want to make sure you are using the correct image size. Select only as many pixels as you need. Don’t pick a large pixel image to fill a smaller pixel space. To check this you can inspect the image in your favorite browser and check the information it provides regarding pixel size.

Image optimization and compression are other key ways to decrease loading time without sacrificing image quality. You can do this by using the image compression tools that the LiteSpeed Cache plugin provides. It will require you to create a QUIC.cloud account, once set up the plugin will go through all your images and optimize them. Alternatively, If you’re using a Mac, you can run your images through ImageOptim before you upload them. You can save 40.3 KB per page just by setting your JPEG compression levels to 85 or lower. (Kinsta)

Another feature that LiteSpeed Cache has is the ability for lazy loading images. This defers the loading of images until the user scrolls down to where the image would appear, allowing the shopper to quickly load what they are looking at, instead of having to wait for all images to be loaded. HTTP Archive’s State of the Images report states that you can save 545 KB per page by utilizing lazy loading.

Optimize Settings 

You’ll want to make sure your settings are optimized for maximum speed. The WooCommerce wizard helps to configure your shop when you first set it up, but it doesn’t necessarily configure your shop for the best loading speed. 

One setting you’ll definitely have to configure manually is how many products display on your site at a time. Displaying too many can really slow things down, however, displaying too few can frustrate your customers. No one wants to have to constantly click or scroll just to see what’s available. 

Plugins and Extensions

Plugins are one of the best parts of WordPress because they offer endless customization. However, you do need to be careful with adding too many or unnecessary plugins and extensions, as they can really slow down your site.  Oftentimes a few lines of custom code can replace the functionality that you were going to use a plugin for.

Although it takes a bit more time to write the code, you can create only the functionality you need, dramatically improving your site’s performance. Plugins are written so that a large number of people with different needs can use them and edit settings with a fancy graphical user interface (GUI). This often means a whole lot more bloat, if you are just working with some lines of code then you can just change settings directly, or if a GUI is needed it can be simple and to the point rather than having every option under the sun.

Even if it is a simple plugin, the wrong plugin can negatively affect your speed just as much as adding too many, so do your research before adding and installing each one. You also want to make sure you keep your plugins up to date. You can turn on auto-updates if you aren’t good about checking in regularly. Always make sure to delete the ones you aren’t using. 

Set up a Content Delivery Network (CDN)

A CDN is a network of servers that will store your static files, such as image files and CSS files, on networks around the world and deliver them based on the customer’s geographic location. Allowing your customers to download your page from a location near them can greatly reduce loading times. This is especially useful if your customer base is spread out around the world. 

Cloudflare is a great CDN and has many additional security options, fortunately you can integrate it with the LiteSpeed cache plugin. Additionally, Cloudflare also has its own plugin for WordPress that offers additional advantages such as its Automatic Platform Optimization although that comes at a monthly cost.

CSS Optimization

Your WooCommerce site uses CSS for formatting and presentation. These CSS files load on every page regardless if they are necessary, which can really slow your loading speed. You’ll want to make sure to optimize the CSS by leveraging “critical css” files for the main pages, as well as minifying css files. Here again the LiteSpeed Cache plugin as well as many others can help optimize your CSS and remove unnecessary files to speed up loading times. 

Caching

Caching allows your WooCommerce site to load faster by taking a snapshot of the most viewed pages and displaying them to the user in an optimized way. It is important to test the settings ideally in a testing site as certain types of caching can create conflicts, that being said once your caching settings are dialed in this can really speed up loading times.

There are three types of caching that you’ll want to pay attention to:

Server Caching – allows the server to remember what your webpage looks like so it doesn’t have to generate each time a user tries to load your site. 

Browser Caching – saves your site data to the user’s browser so it doesn’t have to ask the server for files each time the page is loaded. Static files can be stored on the browser from multiple pages, so it can really speed up loading time. 

Object Caching – saves common database queries to cache enabling your site to load faster. Your product page, for example, is a query of your products stored in the database, but that query will usually be exactly the same. LiteSpeed Cache can save those queries as a snapshot using Memcached on the server, which delivers significant improvements on pages with heavier queries. Be sure to exclude your cart, checkout pages, and my account pages from the plugin, as these pages are specific to each customer. 

Conclusion

As you can see, the speed of your WooCommerce store is an important, multifaceted issue. There are so many factors that can be slowing your site down, both on the front end and the back end. It can be challenging and overwhelming to figure out where to start. Hiring a woocommerce agency to handle it can take the pressure off you and get you results faster. 

At Fountain City, we strive to be experts in WooCommerce. We bring an innovative approach to creating high converting websites. Whether you need help building your WooCommerce shop, or you’re struggling with slow load times, we can help. Contact us today for a complimentary speed score consultation!

Hopefully, this guide has provided you with some actionable steps so you can easily get started on speeding up your WooCommerce shop. Leave a comment below and let us know how it goes!