Speed up Woocommerce with an Image CDN

Woocommerce is a popular ecommerce plugin for Wordpress. The plugin makes it very easy to set up a professional online store. 

However, even if Woocommerce is successfully deployed and people are browsing your online store, research and case studies shows that having a fast and lean online store ultimately generate more revenue and returning customers.

Product images are of course critical to show off your products. Investing some time and effort into optimizing images is considered a low hanging fruit because images account for the majority of requests and bytes downloaded by the browser. Because images are such an important part of the product presentation, it's worth spending some time to make sure they are displayed as quickly as possible, at the highest quality regardless of device, browser or network quality. If you have a high share of mobile users, this is especially important.

Aside from using clever CSS or JavaScript tricks to lazy load images and so forth, Google is suggesting the use of an Image CDNs. An Image CDN is basically a CDN dedicated to optmizing images on the fly. 

One of the Image CDNs mentioned by Google, is ImageEngine. ImageEngine has a free Wordpress plugin which also works seamlessly with Woocommerce product images. Here's how to set up ImageEngine for Woocommerce:

Like with any other plugin in Wordpress, log on to the dashboard, navigate to 

Plugins

->

Add new

. Then search for "ImageEngine" in the top right search box. Choose 

Install

, then 

Activate

 the plugin. Next we need to configure the plugin.

When you navigate to the ImageEngine settings (

Settings

 -> 

Image CDN

) you're presented with some simple settings. The most important setting is the actual CDN account. Simply follow the instructions and sign up for an account on https://imageengine.io/. Provide the url of your website at the start of the signup process. A minute later, you'll have a CDN hostname looking something like this: 

xxxyyyzzz.cdn.imgeng.in

. Copy this, and paste it into the 

CDN URL

 field in the plugin settings page.

More details on how to signup for an ImageEngine account can be found here.

All details about the Image CDN plugin is well documented, but the most important settings to pay attention to is the 

Enabled

 checkbox is ticked, and that the 

CDN HTTPS Support

 checkbox is ticked if your site is on https (which it probably is).

You can also test the configuration by tapping the "Test Configuration" button just to make sure that the plumbing is correct. Then, Save the configuration.

For the purpose of this article, I set up a Woocommerce site and loaded the included sample products.

I used webpagetest.org to compare the performance before and after enabling the Image CDN plugin. The diagram below shows the results (Blue is with the ImageEngine CDN enabled, red is the original Woocommerce site.

Almost all user centric metrics have improved! Isolating the metrics more to look at the core functionality of an image CDN, byte savings we see a reduction of bytes by about 60%.

If you've read this far, you might have been wondering if Jetpack, which recommended to you during the Woocommerce setup process will achieve same results. After all, a CDN to serve images is included in Jetpack.

Jetpack is definitely better than serving the original images, but as illustrated by the visual progress chart from webpagetest.org, the page is not rendered as fast as with the dedicated Image CDN. Also the byte savings are less.

Applying an Image CDN to your Woocommerce shop (or any Wordpress site) is a relatively easy task to implement, but with potentially huge gains in web site performance. Thanks to the plugin provided by ImageEngine, the installation process is smooth and results are immediate.