Speed is money for an ecommerce site. The faster your site loads, the better the shopping experience. A better user experience translates to improved SEO, increased ROI, and happier customers. This ultimately leads to greater revenue and profits.

Shoppers today expect high-resolution images and videos, live chat, user reviews, real-time inventory, personalization, and a host of other dynamic tools.

Online shoppers have a short attention span. Hence, all the features they expect to have a faster and smoother buying experience are the same ones that slow down your ecommerce site if you don’t execute them properly.

WooCommerce is the most popular ecommerce platform in the world and is free to use and tweak as per your requirements.

WooCommerce leads the ecommerce pack (Image source: BuiltWith)

WooCommerce has been downloaded over 88 million times to date. As of now, it’s in use on over 5 million websites.

WooCommerce plugin downloads and usage stats

WooCommerce plugin downloads and usage stats

Unlike other popular shopping platforms, you don’t have to pay a percentage of your revenue to WooCommerce if you use it. There are some overhead costs associated with running a WooCommerce-powered store though.

But there’s a catch! Since WooCommerce is free with limited support, you’re responsible for maintaining it in tip-top shape. The good news is that it’s easy to take care of it if you know what you’re doing!

Want to learn how to speed up your WooCommerce site reliably?

This guide is for you!

Why Speed Matters for an Online Store

First impressions matter and speed is the first thing a user will notice about your site. In a study by Google, 53% of mobile users left a site if it took longer than 3 seconds to load.

Average Website Speed Index in the US by Google

3 seconds is best practice (Image source: Think with Google)

2 seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half second.
Maile Ohye, Tech Lead, Google

In another global study, 80% of users said that they find a slow loading website more frustrating than a temporarily down one. The same study also found that 73% of users would switch to a competitor site if a website is too slow to load.

Even a 100-millisecond delay in page response time can hurt the user experience and online revenue. As per Akamai, a 100-millisecond delay impacts conversion rates by 7%, while a 2-second delay hurts conversion rates by a whopping 103%.

If your site is generating $1000 in revenue daily, 100-millisecond delays in page load times might cost you $25,550 in lost sales annually.

The bigger the business, the greater the fall. For instance, Amazon projected a revenue loss of $1.6 billion annually if its page load time slowed by just one second.

Page load time versus bounce rate chart by Google

Page load time is vital (Image source: Think with Google)

The above data suggests that if your website takes 6 seconds or more to load, you’re losing twice as many users as you would if your site loaded in less than 3 seconds.

Apart from user experience, your site’s speed also impacts SEO. Website speed and performance play a major factor in Google’s site ranking algorithm.

Google has shifted to mobile-first indexing for over 50% of the pages shown in their search results. Despite this, data from HTTPArchive.org suggests that the average load time for mobile sites running WordPress has worsened in the last year.

WordPress sites performance stats from HTTPArchive.org

How top WordPress sites perform (Image source: HTTPArchive.org)

During peak traffic times such as Cyber Monday and Black Friday, it’s even more crucial to keep your site running as fast as possible. With the outburst of offers going around, ensuring that shoppers don’t abandon your site is critical to close sales.

Given these statistics, speeding up your WooCommerce Store can give you a significant edge over your competition.

Speed is everything: a 100-millisecond delay impacts conversion rates by 7%, while a 2-second delay hurts conversion rates by a whopping 103%. Check out how to speed up your WooCommerce store and sales! ??

Click to Tweet

Measuring the Speed of a WooCommerce Store

What you cannot measure, you cannot improve!

Now that you’ve understood why speed is important for your WooCommerce store, it’s time to learn how to measure it. It’s essential to know how to gauge the improvements when you’re trying to speed up your WordPress site.

A website speed test is a perfect tool to test the responsiveness of your WooCommerce store. But if you don’t do this properly, your site may seem slower to you after making a change, when it’s faster.

Pingdom Tools example speed test report

A website speed test report (Image source: Pingdom)

I recommend you receive started with one of these website speed testing tools: WebPagetest, Pingdom, Google PageSpeed Insights or GTMetrix.

You can also use the free WordPress plugin Query Monitor to pinpoint the themes, plugins, and functions that are performing poorly. It helps you debug inefficient database queries, bloated functions, PHP errors, HTTP API calls, etc.

No speed testing tool is perfect, but pick one and stick with it. You can work your way towards other options later.

A tweet by Gary Illyes, Webmaster Trends Analyst, Google

Gary Illyes, Webmaster Trends Analyst, Google

There’s a difference between actual performance and perceived performance. The user experience matters more than the technical wizardry powering the site.

Therefore, use the techniques mentioned below to enhance your site’s overall user experience, rather than just getting a high-speed score.

How to Speed up WooCommerce

A speed test report will give you an actionable plan to optimize your slow WooCommerce site. Excited? Let’s receive started!

1. Optimize WooCommerce Settings for Performance

Let’s start with the basics by optimizing WooCommerce settings.

First, change your login page URL. By default, every WordPress site’s login URL is domain.com/wp-admin/. While this is easy to remember, it poses a major problem: everyone knows about it too, including bots and hackers.

Changing your login URL to something unique will protect you against brute force attacks from nefarious actors. It’ll also help you combat rate-limiting HTTP errors like 429 Too Many Requests.

Free plugins such as WPS Hide Login and Rename wp-login.php make this task super easy.

If your ecommerce site hosts a blog too, you can limit the number of posts on your blog feed. WordPress sets this limit to 10 posts by default, but you can set a lower limit.

While this may seem trivial, performance savings add up if you run a high-traffic blog (here’s how to drive traffic to your website). You can find this option under WordPress Dashboard → Settings → Reading.

WordPress settings to limit the number of post revisions

Limit the number of posts in your blog feed

Next, disable pingbacks on your website. They usually generate worthless spam. The fewer queries your site generates, the better.

Optimizing the WordPress discussion settings

Optimize the discussion settings

If you have a lot of user comments on your posts or pages, then WordPress also gives you an option to break them into smaller chunks. The same setting holds true for breaking down reviews on your product pages.

Keep this number between 10 and 20 to optimize your product page load time.

You can disable product reviews under WooCommerce → Settings if you don’t like having them on your store. This will help speed up your site as it eliminates loading a few scripts and widgets.

Disabling product reviews in WooCommerce settings

Disable product reviews if you don’t need them

Finally, remove any unnecessary/outdated themes and plugins from your site. The fewer themes and plugins you’ve installed, the easier it is to maintain them and troubleshoot performance issues.

2. Get a Fast WooCommerce Theme

Using the right WooCommerce theme matters. There are hundreds of thousands of themes out there, so deciding on the one that’s perfect for you is always a challenge.

Featured themes on WordPress.org

Featured themes on WordPress.org

A beautiful theme with amazing built-in features can sound great on paper, but it may flop in actual usage. For an ecommerce site, you need to ensure that it’s fully compatible with WooCommerce.

Using filters to search smartly for themes on wp.org

Filter down your ecommerce theme search

WP Rocket tested a bunch of popular WooCommerce themes for speed and came up with the following results.

WooCommerce themes size and requests report by WP Rocket

Opt for a fast WooCommerce theme (Image source: WP Rocket)

Astra, OceanWP, and GeneratePress are also Kinsta’s favorites as suggested in the WordPress speed up article. They’re ultra-fast, lightweight WordPress themes.

When paired with a page builder such as Elementor or Beaver Builder, they can help you create almost any site.

Opt for a fast WooCommerce theme (Image source: WP Rocket)

Storefront is WooCommerce’s official theme

Storefront is a free theme offered by WooCommerce, whereas Shoptimizer, Divi, and WoondrShop are premium themes. Since these themes are built for running an ecommerce site, there’s no need to install third-party plugins to receive all the features you want.

If you’re short on budget, it’s perfectly fine to start with a free theme and upgrade later to a premium solution.

I recommend leaving page builders behind to reduce bloat. Instead, go for a theme that supports WordPress’ block editor Gutenberg.

To decide on a theme, I suggest you list down all the features you need in your online store. Then go for a theme that covers most of your feature requirements. This will help you cut down dependency on bloated multi-purpose themes and third-party plugins.

This brings us to the next suggestion.

3. Go Easy on Plugins and WooCommerce Extensions

WordPress has 54,000+ free plugins in its repository. There are even more premium plugins out in the wild. Thus, it’s easy to receive carried away and install dozens of them.

A screenshot of plugins available on wp.org

There’s a plugin for almost anything

Many popular plugins, especially performance and security related ones, don’t work well in certain hosting environments.

If you find it hard to decide which plugin to install, go through Kinsta’s hand-picked list of the best WordPress plugins for various uses. From SEO to image compression, you’re bound to find some gems in there.

WooCommerce functionality can be expanded with its wide range of free and premium WooCommerce extensions. They work the same way as plugins.

WooCommerce Extensions Store page

WooCommerce extensions enhance your store’s functionality

Contrary to popular perception, the number of plugins you install doesn’t always cause performance issues. But this holds true only as long as the plugins are built with the best coding practices.

Vetting every plugin you install for quality becomes a hassle when there are too many of them. And that’s considering you have the skills and expertise to vet them thoroughly.

A few plugins even create conflicts with other plugins. When you have dozens of plugins on your site, the probability of a plugin conflict occurring shoots up exponentially.

Hence, be smart about the type of plugins and WooCommerce extensions you install.

4. Increase WordPress Memory Limit

WordPress allocates 32 MB memory for PHP by default. If it runs into any crunches, it’ll automatically try to increase this limit to 40 MB (for a single site) or 64 MB (for a multisite).

In most cases, this memory limit won’t be enough for a WooCommerce site. You may even receive an error message on your dashboard such as:

Allowed memory size of xxxxxx bytes exhausted”

It’s recommended to increase this limit to 256 MB. Always do a backup of any file before you edit it. In case something goes wrong, you can replace the edited file with the original one.

All plans at Kinsta set a default memory limit of 256 MB. If your site is hosted with us, you shouldn’t experience any memory-related problems. Learn more about our free migrations.

5. Compress Images and Optimize Delivery

Images make up the bulk of any website’s page size, more so for an ecommerce site. WooCommerce sites are loaded with product images and banners.

If you don’t optimize images for size and delivery, they can bring your website to a crawl ?

HTTPArchive tracks the size and quantity of many popular web pages. Here’s a visual representation of their state of WordPress sites in 2020:

The median WordPress page weight in 2020 as per HTTPArchive.org

Images are a heavy resource

While videos are a heavier resource than images, they’re loaded on demand in most cases. Hence, they don’t affect the perceived page load speed as much as images do.

According to HTTP Archive’s State of the Images report, you can save 545 KB per page by lazy-loading hidden and offscreen images.

By setting your JPEG compression levels to 85 or lower, you can further save 40.3 KB per page. This metric comes straight from Lighthouse, Google’s speed test tool for mobile websites.

Follow these 5 rules to optimize images for your WooCommerce store (and the web in general):

  1. Choose the right format for your images (JPEG, PNG, SVG, WebP).
  2. Compress the images efficiently using the right tools.
  3. Use responsive images to optimize delivery for various devices.
  4. Lazy-load offscreen and hidden images.
  5. Offload image delivery to fast CDNs.

WooCommerce 3.3 introduced image size improvements such as on-the-fly thumbnail resizing, blurry image fix, and background thumbnail resizing. All these features make using a plugin such as Regenerate Thumbnails for WooCommerce-related images redundant.

Customizing WooCommerce's Product Images through the WordPress Customizer

Customizing WooCommerce’s Product Images (Image source: WooCommerce)

If you’re starting with a fresh install, you can compress your images before you upload them to your site. Here are some of the top online image compression recommendations:

Compressing images losslessly on Compressor.io

Compress images with minimal loss in quality (Image source: Compressor.io)

Do you have many images already up on your site? Then you can use a WordPress plugin to automate image optimization. Here are the ones that consistently performed the best in my experience:

Most of these plugins also enable lazy-loading for images. The WordPress core team is planning to add lazy-loading images as an inbuilt feature. This will utilize the new loading HTML attribute for tags.

One last thing on image optimization, though. Avoid using image compression plugins as much as possible, particularly the ones that use your server’s resources to compress the images.

Instead, use a service that offloads the image compression task to an external server. Or better yet, resize and compress your images before uploading them to your website.

For an in-depth tutorial, Kinsta’s article on image optimization for web and performance is a great resource to receive started.

6. Deliver Static Resources via CDN

A Content Delivery Network (CDN) is a group of servers located strategically around the world. These server locations are known as Points of Presence (PoPs).

A CDN’s primary function is to cache and deliver static resources such as images, JavaScript, CSS, etc. More powerful CDNs can also host and deliver dynamic content such as audio and video.

Even if your site runs on the fastest server on the planet, it’s still limited by its geographical location. A WordPress CDN will decrease the distance between the individual user and the site’s resources, reducing both network latency and time to first byte (TTFB).

Kinsta CDN

Kinsta CDN with its POPs highlighted

Depending on where the request is coming from, it automatically assigns the nearest CDN PoP to deliver the cached resources. The result is a faster website and a better user experience.

For instance, if your WooCommerce store is hosted at a server in the USA, and a user from India tries to open your website, the CDN will serve the website’s assets from the nearest PoP. Here it would be from Bengaluru (India).

An infographic showing how CDNs help with serving static content faster

CDNs are perfect for delivering static content (Image source: Seobility)

As a general rule, the higher the number of PoPs and the wider their global spread, the faster your website will be for your users.

Kinsta put its CDN to the test and the results speak for themselves. For users in geographical locations that are considerably farther from the hosting server, using a CDN decreased site load time by over 50%.

Apart from caching, many CDNs include other performance-enhancing features such as superior on-the-fly image compression, HTTP/2 support, hotlink protection, and additional security.

For a faster WooCommerce store, we recommend that you receive a fast CDN. Some popular CDNs you can check out are:

7. Strip Unused Scripts and Stylesheets

Most WordPress themes and plugins load scripts and stylesheets on all your site’s pages. They load these assets even when they’re not used on the page.

As an example, Contact Form 7 loads its scripts and stylesheets on every page. Its forms may only be used on the contact page, but the assets load on all the pages. Quite unnecessary!

Stripping these unused assets from pages will help you reduce bloat and speed up page load times. WooCommerce and its extensions (e.g., Smart Coupons and Follow-Ups) are susceptible to this issue.

For instance, it’s unnecessary to load scripts related to payment gateways on your store’s homepage or shop page. You can restrict such scripts to load only on the checkout and order confirmation pages. Likewise, eliminate scripts and styles for sliders and carousels from your checkout page.

If you want to know which assets to eliminate, look at the waterfall chart in your website speed test report. It’ll give you an idea about the unnecessary assets that are being loaded.

An example of GTMetrix's Waterfall Chart

GTMetrix’s Waterfall Chart

The Network tab under Chrome browser’s DevTools is also a good place to receive started. It’ll give you a comprehensive view of how and what a web page loads.

The Network tab under Google Chrome's DevTools

Use the Network tab in Google Chrome DevTools

Strip the scripts and styles that aren’t necessary for the functioning of the page. Start by optimizing your homepage and landing pages, since these are the first points of entry for most of your users.

You can use wp_dequeue_script and wp_dequeue_style functions to remove scripts and styles you don’t need. An easy way to achieve the same is through a plugin called Asset CleanUp: Page Speed Booster.

Clean up your WordPress assets with Asset CleanUp plugin

Clean up your WordPress assets

Asset CleanUp scans for all scripts and stylesheets that will be loaded onto a page. You can disable the ones that aren’t used on the page. Test the page for proper design and functionality once you finish making the changes.

Unloading the Stripe payment gateway script from loading on a page with Asset CleanUp plugin

Unloading Stripe payment gateway script with Asset Cleanup

The pro version of the plugin allows you to set async or defer attributes to the assets. Applying this setting removes JavaScript from the page’s critical rendering path. It should help with improving your site’s perceived page load time.

Another advantage of eliminating unnecessary CSS and JS assets is that your website will make fewer HTTP requests.

For a free alternative, you can use the combination of Autoptimize and Async JavaScript plugins to receive the same results.

8. HTTP/2 is Extremely Essential

If we were writing this article a few years ago, we would’ve titled this section “Reduce the Number of HTTP Requests.” Thanks to substantial improvements in how browsers communicate with websites (and vice-versa), the need for this optimization is now obsolete.

HTTP 1.1 was the first major update to the HTTP protocol, and it was finalized way back in 1997. That’s before social media, streaming services, smartphone apps, and even WordPress. The web has grown exponentially since then.

HTTP/2 improved upon the HTTP 1.1 protocol and made its entry in 2015 to keep up with the growing demands of the internet. It brought with it amazing improvements in speed, efficiency, and security.

HTTP 1.1. versus HTTP/2 major benefits

HTTP 1.1 vs HTTP/2 (Image source: Cloudflare)

The performance increase with HTTP/2 is due to multiple reasons:

  • Better multiplexing and parallelism over a single TCP connection.
  • HPACK compression for headers with Huffman encoding algorithm.
  • ALPN extension for faster encryption.
  • Proactive server pushes instead of waiting for requests.

All that jazz amounts to one crucial advantage: making websites load faster, even when they host various types of resources.

Typically, WooCommerce stores serve a lot of resource-heavy assets such as images, stylesheets, and scripts. Sites like these will benefit greatly by switching to HTTP/2.

You can use the HTTP/2 test tool by KeyCDN to check whether your site is configured to work with HTTP/2. As of now, every major browser supports HTTP/2. There’s no reason you shouldn’t be taking advantage of its massive performance benefits.

If your hosting provider doesn’t support HTTP/2 yet, start looking for a new one. Kinsta supports HTTP/2 and TLS 1.3 on all of its servers and CDN.

Furthermore, HTTP/3 is just around the corner and is set to make websites load even faster.

9. Cache WooCommerce to Speed It Up

Caching is temporarily storing resources (cache) from one request so that subsequent requests can be executed quickly. The cache can be stored either on the server or on the user’s device.

It’s one of the easiest ways to speed up your WooCommerce store. And it’s also the most important one.

An infographic of how web caching works

How web caching works

  1. The user makes a request through their browser for a website. For example, they type in www.kinsta.com in their browser.
  2. The browser then makes a request for a webpage (HTML document) to display to the user. A DNS server handles this request, which results in revealing the hosting server’s IP.
  3. Returning the webpage is handled by an application (e.g. WordPress, Joomla, etc.) hosted on a web server. With static websites, an application may not even be necessary.
  4. The application runs the scripts (e.g. PHP, JavaScript,etc.) and (5) queries the database (e.g. MySQL, MongoDB, etc.) to build a webpage. It then returns the webpage to the browser, which renders it and shows it to the user.

If everything works smoothly, all the above steps should take a few seconds at max to execute.

But that’s just one request from a single user. What if there are multiple requests from thousands of users at the same time? That will put an enormous load on the server, eventually leading to a slower website.

This is where caching comes to the rescue. It reduces the amount of work required to generate a pageview, thus reducing WordPress’ dependency on PHP and a database. Caching makes WordPress perform almost as fast as static websites, if not the same.

There are 2 major types of web caching, each with their own subsets:

Server-Side Caching

Client-Side Caching

Caching not only makes the website load faster, but it also reduces load on the server. Kinsta’s in-depth article on WordPress cache is a great resource for a detailed explanation.

If your WooCommerce store is hosted with Kinsta, caching is taken care of at the server-level. Hence, you need not use a caching plugin.

Kinsta configures cache rules to work seamlessly with WooCommerce. This ensures that your users have a smooth checkout experience with no hiccups.

An example of improvement in WordPress load times after migrating to Kinsta

WordPress load times after migrating to Kinsta’s new servers

If your hosting provider doesn’t handle caching at the server-level, then you need to depend on third-party caching plugins to do the work for you. While they aren’t an ideal solution, something is always better than nothing.

Here are my top WordPress caching plugin recommendations:

For more options, check out Kinsta’s post on WordPress caching plugins.

10. Clean Up Your WooCommerce Database

A database is an organized collection of all your website’s data. In a WooCommerce store, it includes:

  • Site content such as product pages, categories, tags, user data, reviews, site-wide settings, theme, plugins, etc.
  • Transaction data such as order details, payments, inventory, etc.

Every time a user visits your store, they’re requesting your site content, which is mostly static and doesn’t change much. But when they’re placing an order, they’re making a dynamic request.

If you don’t optimize your store’s database, it may take too long to process these requests. Ultimately, a slow server response time leads to a slow website. Hence, you must clean up and optimize the database by removing unnecessary junk.

Here are 6 ways to speed up and fine-tune your WooCommerce database.

Delete Old Revisions

If your WooCommerce store has been up for quite a while, its pages, posts, and products will be filled with old revisions. It’s time to clean these up.

The easiest way to do it is through plugins such as WP-Sweep or WP Rocket.

Deleting old post revisions with WP Rocket

Deleting old revisions with WP Rocket

If you’re handy with WP-CLI, then you can also connect to your server via SSH and run a few simple commands to do the same. Here’s how you can do it.

Limit the Number of Revisions Stored

You can avoid having numerous old revisions by limiting the number of revisions for posts and pages. If you’re prone to updating your site content often, this will help you keep revisions from going out of hand.

An easy way to set the limit is by adding the below code snippet below to your wp-config.php file. Make sure to add it before the line where ABSPATH is defined.

define(‘WP_POST_REVISIONS’, 15);

I’ve set the limit as 15 in the code above. You can change it to any number of revisions you want, but try to keep it below 15.

Alternatively, you can use a free plugin such as WP Revisions Control to do the same.

Using the WP Revisions Control plugin to limit the number of post revisions

Set the number of revisions with WP Revisions Control

Disable Revisions Altogether (If They’re Unnecessary)

You can disable revisions from your site altogether. All you need to do is add the following code to your wp-config.php file. As before, ensure that you add this snippet above the line where ABSPATH is defined.

define(‘WP_POST_REVISIONS’, false);

Or you can use a free plugin such as Disable Post Revision to do the same with a single click.

Before disabling revisions, I suggest you delete all the old revisions that are still present. This way, your site’s database will be completely free of revisions going forward.

Clean up Expired Transients

Transients are cached data stored with a custom name and an expiration period. They’re usually stored in the WordPress database under the wp_options table.

Transients are similar to Options, except they have an added property of expiration time. They are useful to store temporary data such as responses from a remote API or large queries.

The WordPress Transients API defines how to handle transients and delete expired transients automatically. However, things don’t always go as planned.

Sometimes, a corrupt transient cache can create almost a million junk entries with no end in sight. Customer sessions can rack up over time, creating thousands of unnecessary rows in your database tables. In such cases, a bloated database can bring your site to its knees.

The free Delete Expired Transients plugin is an easy way to receive rid of all expired transients.

Delete Expired Transients plugin panel screen

Deleted all your expired transients easily

Clean up Your Database Tables

Your WooCommerce database stores everything that’s needed to run your ecommerce store. As data gets added, removed, and moved around the tables in your database, it becomes inefficient and ends up storing many things that aren’t important to run your store.

You need to clear out this unnecessary data by cleaning up your database tables. The wp_options table, in particular, is prone to getting bloated and hurting database performance.

The wp_options table in WordPress database under phpMyAdmin

The wp_options table in WordPress database

Database housekeeping is key to keeping your WordPress site running as swiftly as possible.

Optimizing your database manually is a time-consuming process. You can use the free WP-Optimize plugin to check which database tables have unnecessary data and delete those wasted spaces. It can also retrieve storage space lost to data fragmentation.

You can schedule WP-Optimize to clean up and optimize your database regularly.

Disable Non-Critical Features That Tax the Database

WooCommerce themes and plugins come with a lot of cool features that seem great from the outset but end up crumbling the database.

One such example is using “Popular Products” and “Related Products” plugins. These features can cause enormous sitewide queries, especially if you have many products. If you need these features, try to insert them manually into your pages. Plugins such as Advanced Custom Fields can help here immensely.

Kinsta's

Kinsta inserts its ‘Related Content’ posts manually

Another example is image optimization plugins that compress images on the same server where the site is hosted, rather than do it externally. This ends up using a lot of your server’s resources.

Social Warfare plugin is known to be taxing on your server

Social Warfare plugin can tax the server resources

Also, stay away from plugins that add counters to your site. For example, adding the number of views/posts/comments beside a username. A lengthy discussion with multiple users involved will stress your database to crunch these numbers.

This advice holds true for using social counters too. Minimize the use of auto-generated counters to maximize database performance.

Like housekeeping, fine-tuning your WordPress database is an ongoing process.

Keeping this in mind, Kinsta has implemented an automated system to combat database performance issues. Based on your site’s needs, the automated system scans and fine-tunes your MySQL database once per week to ensure peak database performance. If the system detects something out of the ordinary that can’t be fixed automatically, it notifies the sysadmin team to take immediate action.

If your site is hosted somewhere else, here are a few database optimization plugins to make your job easier:

Reminder: Always take a backup before editing your database or WordPress core files.

11. Optimize Your Store for Mobile-First Experience

As of January 2020, there are over 4 billion internet users in the world. There are almost as many mobile internet users. It’s expected to grow to 5+ billion by 2024.

Total number of Internet users in the world

There are billions of us (Image source: Statista)

Mobile devices overtook desktops in global website traffic in 2019, generating 52.6% of the total pageviews. In some countries such as India and Nigeria, mobile phones account for 70%+ of web page views.

Kinsta's mobile versus desktop traffic in Google Analytics

Mobile traffic from Google Analytics

According to a study involving 500+ million online shoppers across 37 countries, smartphones accounted for 65% of site visits and 46% of ecommerce orders.

A bar chart graph of conversion rate by devices

Mobile shopping has massive growth potential (Image source: Statista)

Surprisingly, the conversion rate for mobile phones is less than half that of desktops. There’s phenomenal room for growth here.

58% smartphone users are more likely to buy from mobile-optimized websites

Speed counts a lot for mobile shoppers (Image source: Think with Google)

You can start by making your WooCommerce store mobile-friendly. You can use Google’s Mobile Friendly Test tool to check whether your site passes the minimum mobile usability standards.

Google's Mobile Friendly Test tool

Google’s Mobile Friendly Test

The test will show you a snapshot of how your website looks on a mobile device. It’ll also list any mobile usability issues if it finds any.

The easiest way to make your WordPress website mobile-friendly is to use a responsive theme. All the themes mentioned earlier in this post are responsive out of the box and look great on mobile devices.

Mobile shoppers don’t enjoy scrolling endlessly. Hence, keep your store pages as lean as possible. Don’t overcrowd them with too much content.

If you have loads of products listed on your store, make it easier for your mobile shoppers to find them through search. You can install the WooCommerce Product Search plugin to help your customers find products swiftly with live product filters.

WooCommerce Product Search plugin screenshot

Simplify product search with filters (Image source: WooCommerce)

Finally, streamline the checkout experience for your online shoppers. The fewer the steps to place an order, the better the shopping experience. Here are a few WooCommerce extensions that can help you with this:

  • WooCommerce Social Login — Eliminates the need for time-consuming account creation or login process. Let your users log in with their social accounts such as Facebook, Twitter, Google, etc.
  • Variation Swatches and Photos — Say goodbye to annoying dropdown menus to select product variations. Instead, give your users easy-to-tap buttons for all your product options.
  • One Page Checkout — Don’t let your customers abandon your site that easily. Allow them to purchase what they want instantly with no extra steps. If you think guest checkout is a great fit for your store, then you can look into enabling it.
  • Checkout Field Editor — Add, remove or change fields from your checkout page. For instance, if you only sell digital products, you do not need to collect shipping addresses.
  • Bolt / Stripe / Amazon Pay / PayPal — Payments are the bane of mobile shopping experience. You can choose from different WooCommerce payment gateway extensions to make it easier to collect payments.

Bolt payment gateway extension for WooCommerce

Easy mobile checkouts with Bolt

Ultimately, mobile shopping is more than just about making a purchase. Many users use it primarily to look up product information and check/compare prices. Make your online store experience great for your users on their mobile devices.

12. Disable Get Refreshed Fragments AJAX Request

When a user makes any changes to their shopping cart, WooCommerce uses the Get Refreshed Fragments AJAX request to update the shopping cart contents dynamically. Refreshing the cart page without reloading it seems great from a user experience perspective.

But most times it slows down websites, mainly those hosted on shared servers. Plus, a lot of sites don’t end up using this feature.

Just to verify, I tested an up-to-date WooCommerce store on Pingdom Tools and here are the results:

Load time chart for WooCommerce's Get Refreshed Fragments Ajax request

That’s a lot of wait time for one request

Despite being just 1.1 KB in size, the wc-ajax=get_refreshed_fragments request takes 0.76 seconds to execute. If your site takes 3 seconds or less to load, that’s over 25% of the page load time. This test site is hosted on a cloud VPS, so you can imagine the load times on a cheaper hosting plan.

This post by WebNots covers the issue in greater detail. You can use the free Disable Cart Fragments or Disable Cart Fragments by Optimocha plugins to disable this taxing request.

If you disable this request, then it’s recommended enabling the option ‘Redirect to the cart page after successful addition’ in your WooCommerce → Products settings panel.

WooCommerce Product settings panel to enable Redirect to Cart behavior

Remember to enable this setting afterward

Enabling this behavior will ensure that the user is redirected to the Cart page after adding a product to their cart.

Optimizing WooCommerce Admin Panel

Speed isn’t an important factor for only your store’s frontend. A snappy backend is just as crucial to manage your store with ease and make quick changes whenever needed.

Working efficiently on your WooCommerce admin panel is the key to being productive. It also frees up your time to do more essential stuff for your WooCommerce store’s success, like online marketing.

Below are a few ways to fix a slow WooCommerce dashboard.

Frontend Optimizations First, Backend Optimizations Second

Does the problem only occur with the WordPress admin dashboard and not the whole website? If it’s the latter, then apply all the optimizations listed earlier first.

Why? Because in most cases, making your WooCommerce store load faster on the frontend will optimize the backend too. We can attribute this to freeing up resources on your server.

If your admin dashboard lags even after optimizing the frontend, then carry on to the following suggestions.

13. Remove Bloat and Update Everything Regularly

Make sure to update WordPress, WooCommerce, plugins, extensions, and the theme frequently. If a theme or plugin is no longer supported by its developers, then it’s time to consider ditching them.

Likewise, if a theme/plugin adds unnecessary bloat to your dashboard, start looking for better alternatives. For instance, you might want to consider alternatives to plugins that serve aggressive ads in your dashboard.

Yoast SEO plugin Big Banner Animated Ad inside the WordPress dashboard

Example of banner in WordPress admin

This issue is so prevalent that there are plugins solely dedicated to removing bloat from some of the most popular WordPress plugins.

14. Disable Object and Database Cache

Caching plugins are a great way to speed up your WordPress site. However, if not configured properly, they can lead to unexpected results. That includes slowing down your backend.

For instance, W3 Total Cache is one of the most popular caching plugins for WordPress. It’s free, supports plenty of caching options, does JS and CSS minification, integrates with a CDN, and is used by 1+ million websites.

WordPress W3 Total Cache General Settings Panel

Cache options in W3 Total Cache

W3 Total Cache features the following cache options:

  • Page Cache.
  • Opcode Cache.
  • Database Cache.
  • Object Cache.
  • Browser Cache.
  • Fragment Cache.

Having a lot of options is confusing, especially to beginners who don’t understand what each type of caching does.

Object and database caching speed up the website by reducing the number of database queries, but they do so at the cost of offloading the work to the server’s memory.

Ideally, this shouldn’t pose a problem if your hosting server is smart or powerful enough. For instance, if your WordPress site is hosted with Kinsta, you don’t need to worry about caching as it’s already implemented at the server level.

Unfortunately, that’s not the case with every hosting provider.

In that scenario, you need to depend on a third-party caching plugin such as W3 Total Cache. Its simple settings make it super easy to enable all types of cache with just a single click.

In the W3 Total Cache → General Settings panel, disable object cache and/or database cache. Then check whether you see any improvements in your admin panel’s responsiveness.

W3 Total Cache Disable Database and Object Cache

Disable Database and Object Cache

Experimenting with the cache isn’t as simple as ticking or unpicking options in your plugin settings. You should also check whether your site works properly after making the changes and flushing your old cache.

15. Remove Plugins with High Resource Usage

Some WordPress plugins are a great resource hog on your web server. They end up using most of your server’s CPU and RAM.

You can use the free Query Monitor plugin to find the troublesome plugins. It’ll show you all the scripts, styles, and HTTP API calls that are being loaded by your website, along with their size and loading time. Look out for the ones that have the most number of requests and the slowest load times.

On the test site below, the Classic Editor plugin loads the slowest on the admin side. Other plugins like Loginizer, All-in-One WP Migration, and WP Bakery (formerly Visual Composer) also show up as potential bloat.

Query Monitor plugin dashboard to find the slowest plugins

Query Monitor helps you troubleshoot performance issues

I found that the migration and Classic Editor plugins are unnecessary. Removing these two plugins fixed the admin speed considerably.

WooCommerce stores with an international audience use translation plugins like WPML to serve the site dynamically in multiple languages. It’s a great plugin with a lot of features, but it can also slow down your admin backend considerably.

You can gain some performance advantage by switching to a lean translation plugin such as Polylang. It doesn’t have as many features but works great for most use cases.

Plugins that have a lot of ongoing processes/scans will slow your WordPress backend. Some examples include sitemap generators, analytics graphs and charts, page builders, and chat plugins.

If you install Query Monitor, remember to uninstall it when done as it uses a lot of server resources to perform the scans.

16. Use Proper CDN Settings for WordPress

CDN helps to serve your WooCommerce store at lightning speed to users all around the world. It does this by saving a snapshot of your site’s resources and delivering them from the nearest server to the user.

Most CDNs disable caching on the WordPress backend by default. But some CDNs don’t, and this can slow down your store’s admin panel drastically. In such a case, you need to exclude your admin dashboard from the CDN’s cache to improve its performance.

If you’re using Cloudflare, you can set up a Page Rule to disable Cloudflare features on WordPress admin pages. Here’s how to do that:

  1. Go to the Page Rules section under your Cloudflare dashboard.
  2. Add *example.com/wp-admin/* in the URL field.
  3. In the settings fields, choose Cache Level and Bypass options.
  4. You can also add extra settings such as Disable Performance and Disable Security (not recommended). These settings are optional.
  5. Then click Save and Deploy.

Cloudflare Page Rules section for disabling cache on admin panel WordPress

Cloudflare Page Rules to bypass WordPress admin

It should take around 3 minutes for the settings to take effect.

If you’re using KeyCDN, then you can use their WordPress Cache Enabler Plugin to do the same. For other CDNs, please reach out to their support to sort this out.

17. Streamline WordPress Heartbeat API

The WordPress Heartbeat API enables near-real-time updates by maintaining a regular connection between your browser and your server. The API sends requests to the server every 15-60 seconds and then triggers events (or callbacks) upon receiving data.

It allows some amazing features such as autosaving posts, locking posts, and login expiration warnings. However, when you’re logged in as an admin, sending a few requests to the server every minute can slow down your admin panel.

WP Rocket’s free Heartbeat Control plugin allows you to manage the frequency of these API requests on the dashboard, frontend, and post editor. It even gives you the option to disable the API altogether.

WordPress Heartbeat Control plugin panel

Modify or disable WordPress Heartbeat API

Start by increasing the frequency of time. If that doesn’t fix your WooCommerce backend’s speed issues, consider disabling the heartbeat API.

If applying all the above optimizations still doesn’t fix your WooCommerce store’s speed issues, then…

WooCommerce Speed Starts with Quality Hosting

Just like running a car with flat tires, no matter how many optimizations you make, your site won’t receive any faster if it’s hosted on a lousy server. A significant portion of your site’s performance depends on the quality of your hosting.

There are different types of hosting for WordPress sites which fall under two main category: Managed and Unmanaged. The first is perfect for most users, as the hosting provider handles all the server optimizations for WordPress. The latter is better suited for technically proficient users who can tweak and manage the server on their own.

For a WooCommerce website, go for Managed WordPress Hosting. Keep in mind that managed hosting tends to be more expensive than unmanaged hosting.

You can choose from 4 major types of Managed WordPress Hosting. Each comes with its own pros and cons, so select the one that aligns with your budget and goals. I’ve compared them in the infographic below for various features.

An infographic of 4 main types of Managed WordPress hosting

4 main types of Managed WordPress Hosting

Each type of hosting can be offered under multiple plans at different price points. So, when scouting for a hosting within your budget, look at the features offered to decide whether it fulfills your requirements.

WooCommerce sites are incredibly dynamic by nature. They generate a lot of data and requests that cannot be cached.

For instance, the checkout page is unique for each user and cannot be served from a cache. As a result, the server needs to be robust enough to run your site smoothly, even if your site attracts low traffic.

The recommended features you should look out for when deciding on a WooCommerce hosting plan are:

  • Server-level caching with WooCommerce-specific cache rules in place.
  • 2 to 4 PHP workers to handle WooCommerce’s uncached requests without timing them out.
  • WordPress memory limit of 128 MB or more.
  • Auto-scaling infrastructure to handle surges in traffic and load.
  • Automatic daily backups (hourly preferred) to ensure that your ecommerce data is safe and secure.
  • A fully secure hosting platform with security features such as regular malware scans, GeoIP and abusive IPs blocking, free SSL, SFTP, SSH, HTTP/2, and TLS 1.3.
  • Nginx or LiteSpeed web server software.
  • Support for developer-friendly features: PHP 7.4, LDX containers, WP-CLI, GitHub, MariaDB, Staging environments, etc.
  • High uptime with data centers spread all across the world. Go for the one that has servers close to where your target audience is.
  • Support for external CDNs such as Cloudflare and Amazon CloudFront.
  • A reliable 24/7 support team to resolve any issues quickly.
  • Great user reviews and a stellar track record.

With these requirements in mind, you can safely eliminate Shared Hosting.

A Virtual Private Server (VPS) is like shared hosting, except you have a virtual space in a shared server dedicated solely to you. If you’re on a strict budget, you can receive started with a mid-range VPS plan. However, if your site attracts more traffic, then you’ll have to upgrade soon.

This leaves us with Cloud Hosting and Dedicated Server options. Both are great for WooCommerce sites if they fulfill your requirements.

The prices for dedicated server plans are towards the higher side as compared to cloud hosting plans, which can range from ~$50/month to thousands of dollars per month.

Kinsta’s business cloud hosting plans check off all the recommended WooCommerce requirements. Its container-based hosting is perfect for WooCommerce as it scales automatically to handle sudden traffic and load surges.

If you want to extend the features further, Kinsta offers add-ons such as Cloudflare Railgun, Elasticsearch, Redis, Extra backups, Nginx reverse proxy, and more.

Below is an example of performance gains after Kinsta migrated an ecommerce site to Google Cloud Platform’s new Compute-Optimized VMs (C2).

Performance increase chart after Kinsta upgraded an ecommerce site to GCP's new C2 platform

Massive performance benefits after migration

From ~665 ms to ~500 ms, that’s a whopping ~25% increase in performance!

If you’re spending a considerable amount of money on marketing, you’re pushing away all your leads if your site is slow.

Ultimately, you’re better off spending a few extra dollars every month on quality hosting, rather than spending hours pulling out your hair and wondering why your site still has a high bounce rate.

If your site is generating $1k/day, a 100-millisecond delay might cost you $25k in lost sales annually. Scary, uh??? Stop losing money and read this guide on speeding up WooCommerce!

Click to Tweet

Summary

Time is literally money for an ecommerce site. A fast WooCommerce store boosts user experience, SEO, revenue, and ROI.

While you don’t have to follow all the speed optimization tips listed in this post, I recommend you to go through all of them. This will help you identify any bottlenecks in your site. No one likes to wait for a site to load. Let’s speed up WooCommerce!


If you enjoyed this article, then you’ll love Kinsta’s WordPress hosting platform. Turbocharge your website and receive 24/7 support from our veteran WordPress team. Our Google Cloud powered infrastructure focuses on auto-scaling, performance, and security. Let us show you the Kinsta difference! Check out our plans





Source link