VP at ScientiaMobile
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.
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
. Then search for "ImageEngine" in the top right search box. Choose
the plugin. Next we need to configure the plugin.
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.
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
checkbox is ticked if your site is on https (which it probably is).
CDN HTTPS Support
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.
Disclosure: I am working for the company behind the Image CDN plugin and ImageEngine.
Level up your reading game by joining Hacker Noon now!