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.
How to Optimize Images in Woocommerce
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:
1. Install the ImageEngine Plugin
Like with any other plugin in Wordpress, log on to the dashboard, navigate to
. Then search for "ImageEngine" in the top right search box. Choose
the plugin. Next we need to configure the plugin.
2. Get your ImageEngine Account
When you navigate to the ImageEngine settings (
) 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:
. Copy this, and paste it into the
field in the plugin settings page.
More details on how to signup for an ImageEngine account can be found here
3. Enable, and Test
All details about the Image CDN plugin is well documented
, but the most important settings to pay attention to is the
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.
Enjoy the Speed
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%.
Is JetPack an Image CDN?
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.
Disclosure: I am working for the company behind the Image CDN plugin and ImageEngine.
Subscribe to get your daily round-up of top tech stories!