Speed up your WordPress eCommerce website

Have you ever been waiting to purchase a product at a physical storefront, but the line was so long that you just left? Maybe you had somewhere important to be and the purchase was impulsive.

This mentality is not exclusive to physical retailers. Getting people to buy product is only as good as the process involved in making the sale. Don’t cause someone to leave your eCommerce website because it is too slow to load.

TABLE OF CONTENTS:

• Choose a host for eCommerce
• In-WordPress solution
• Set up WooCommerce for Speed
• WooCommerce Admin-AJAX
• Optimizing product images for website speed
• Choosing the right WordPress theme

Choose a WordPress host for your eCommerce website

The first step in speeding up your WordPress eCommerce website is choosing a host that can handle your WordPress website.

Above all of the GoDaddys and HostGators of the world are dedicated WordPress hosts that have servers devoted and built for WordPress websites and eCommerce.

Some of the most popular web hosts are WPEngine and Flywheel, though you can find a more detailed breakdown into choosing web hosts here.

Using an in-WordPress solution

We have seen many cases where WordPress users turn to external services to sell their product, rather than WordPress specific solutions.

The most common example of this practice is with an Amazon storefront on WordPress. As Amazon is one of the leaders in online commerce, you may be tempted to build an Amazon mini store and paste it into a WordPress page. If you’re selling on Amazon, you can also explore the convenience of FBA services. Discover the seamless FBA prep service offered for a hassle-free experience.

There are two glaring issues with this setup:

1. You are at the mercy of Amazon as they update their API and systems. This is true of their iframe embeds and 404 errors that they can create
2. Using an external service requires an external script to load on your page, which can significantly slow down page load speed for customers.

Use solutions like WooCommerce to ensure that your website loads more quickly and is designed to scale as WordPress upgrades and as functions of eCommerce websites upgrade to meet new standards.

Installing and Setting up WooCommerce

Even with a WooCommerce install, there is plenty of optimization to be done on these platforms. In fact, there are numerous frustrations that plague installs of WooCommerce. Keep reading below to discover how to speed up your WooCommerce install from “factory” settings.

WooCommerce Admin-AJAX to speed up site

The biggest complaint that we have seen when it comes to the speed of a WordPress eCommerce website is the slowing down of the admin-ajax.php file after install of WooCommerce.

The reason for this is that WooCommerce taps into the WordPress Heartbeat API, which makes calls to the admin-ajax file.

Confused? This is an issue which will slow down the speed of your website with WooCommerce but one that has a fairly simple fix.

Disable Heartbeat API with the Heartbeat Control plugin

There is a free plugin to disable this function called “Heartbeat Control“. You can find it by searching for “Heartbeat” in the plugin repository.

Once you have installed the plugin, you can find it under Settings > Heartbeat Control. Select the options to use it every 60 seconds and “Allow only on post edit pages” and you are all set.

Please note: At the time of this posting, the Heartbeat API does also handle a couple of other features in WordPress like:

• Auto-Saving of posts
• Post locking (only one person can edit a post at a time)
• Possible other features in the future

If you disable this API, you will lose these features as well as future options that use Heartbeat.

Image product sizes

The next big killer of page speed on an eCommerce website is image sizes. If you have read other articles about image optimization, you know that images are one of the largest assets that can cause serious speed issues. When you are displaying nice pictures of physical products, this can become all the more problematic.

With WooCommerce specifically, here are the individual steps to take to speed up the load of images.

Regenerate Thumbnails

The first recommendation is a recommendation from WooCommerce themselves. You will want to adjust the size of your product images on WordPress to be smaller than original upload size by going to Settings > Products within WooCommerce.

From here, there will be options to set the image sizes in the catalog, single product pages, and thumbnails on other archive pages. Leave the options the way they are or change them to:

• 150 x 150 for catalog images
• 300 x 300 for single product images
• 90 x 90 for product thumbnails

Now that you have changed your settings, you will want to regenerate any existing images you have on the site using the “Regenerate Thumbnails” plugin.

Once you have downloaded this plugin, you can find “Regenerate Thumbnails” under Tools. Simply click the button to regenerate all thumbnails and you are finished. That simple.

Optimize images before uploading them

For all images on the website, it is best to follow good practices with uploading images. This applies to both standard images on the site and also the product images that will continue to populate your site.

Logo and Background size

For the logo of your site, make sure that the logo is only as big as the pixel width for the container it is in. You can use free tools like Skitch to resize your logo on the fly.

Backgrounds are generally very large, but keep in mind that they are background images, served only to provide a bit of style to the main content, which people will be looking at.

With backgrounds, try one of these two options:

1. Pick a very small repeating pattern (10×10 or less) and repeat it when uploading a background
2. Reduce the quality of the image and keep it at 72 dpi for the resolution.

Product images

If you are having professional photography of your products taken, there is a good chance that these images are going to be massive.

When loading images on the web, you want to make sure that images are only as big as they have to be to fit their largest container. Otherwise, they will take a while to load and will hinder the use experience.

A general rule of thumb is to make sure most images are displayed at 72 dpi and are anywhere from 50 to 100kb in size. If any of your images are bigger, it is time to think about changing the quality.

Choose a clean theme for eCommerce

Finally you will want to select a theme that runs smoothly for eCommerce. There are plenty of WordPress themes built for eCommerce that will add unnecessary features to improve eCommerce options, like special light boxes and other requests.

You want your theme to be:

• Cleanly coded
• Not bulky, with extra features
• Responsive for mobile phones (Google likes this)

Shopping for a WordPress theme for the first time? Check out our themes, as they are clean, ready for WooCommerce (styled to fit their specifications and work out of the box with WooCommerce), and responsive for any device.