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, shows that having a fast and lean online store ultimately generate more revenue and returning customers. research and case studies 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 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. images account for the majority of requests and bytes How to Optimize Images in Woocommerce Aside from using clever CSS or JavaScript tricks to lazy load images and so forth, Google is . An is basically a CDN dedicated to optmizing images on the fly. suggesting the use of an Image CDNs Image CDN One of the Image CDNs mentioned by Google, is ImageEngine. ImageEngine has a which also works seamlessly with Woocommerce product images. Here's how to set up ImageEngine for Woocommerce: free Wordpress plugin 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 , then the plugin. Next we need to configure the plugin. Plugins Add new Install Activate 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 . 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. Settings Image CDN https://imageengine.io/ xxxyyyzzz.cdn.imgeng.in CDN URL 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 , 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). well documented Enabled 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. Enjoy the Speed For the purpose of this article, I set up a Woocommerce site and loaded the . included sample products I used 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. webpagetest.org Almost all 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%. user centric metrics 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. Conclusion 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.

Google

How to Integrate an Image CDN in Your React Application

My other place

Nominated for 2022 - HackerNoon Contributor of the Year - Django

Too Long; Didn't Read

Make resilience your competitive advantage

Speed up Woocommerce with an Image CDN

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Make Your App or Site Carbon Neutral in 3 Steps

10 Underrated Skills That Will Make You an E-commerce Rockstar

10 WordPress Pricing Table Plugins that Rock

10 Best Practices to Streamline The Checkout Process on Your Website

11 Reasons To Build Your Next E-Commerce Websites On Shopify

Make Your App or Site Carbon Neutral in 3 Steps

10 Underrated Skills That Will Make You an E-commerce Rockstar

10 WordPress Pricing Table Plugins that Rock

10 Best Practices to Streamline The Checkout Process on Your Website

11 Reasons To Build Your Next E-Commerce Websites On Shopify

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps