Why Should You Care About Page Load Speed?

Page load speed is an important factor that directly affects various KPIs of your business. Despite it being one of the most important elements for visitors, some business owners still underestimate its role and impact on user experience. Your page load speed can affect your eCommerce business in various ways:

  Better page load speed can increase your conversion rate.

  A boost to your page load speed can affect your SEO.

  Good page load speed can delight your visitors.

There are plenty of studies on page load speed and it’s well established that an optimal speed for loading a page is around 2 seconds. There are various tools, which can help you analyze your site's speediness, the two most prominent ones are Pingdom Tools and Google’s PageSpeed Insights. 

For Magento eCommerce store owners, page load speed is even more important due to the incredible amount of competition and available vendors online. If you’re not selling a unique product or offer a unique price that can’t be matched by your competitors then making your visitors’ online experience as smooth as possible should become one of your goals. Modern visitor’s attention span is short and you better not waste the screen time that you have in front of your customers on loading your website’s page. Otherwise they will be off checking out your competition.

Why Images Play an Important Role in Page Load Speed?

First of all, images take about ⅔ of your average web page. While the proportions stayed virtually the same, the actual size of images has been dramatically increasing over the years: 

That’s a threefold increase and there are no signs of stopping. Images are key drivers for customer engagement - a beautiful, well chosen image can be one of the best tools to connect with your customer and get them to click that ‘checkout’ button.  With this in mind, you have to accept the fact that images will be one of your most consuming assets on a website. Since they take up a lot of space, they play a huge role in page load performance.

How Magento Manages Images

Magento isn’t doing much with the images that you upload to your website. It usually resizes the images to 3 standard sets of dimensions. In some cases, Magento strips some of the color data off the images, which can make them look faded and bleak when compared to the original image. This is pretty important when you think about all the eCommerce businesses that rely on the quality of product photos.

Currently Image processing is still fairly new, so we will demonstrate what performance improvements can be achieved using the Cloudinary.com extension, which adds image processing capabilities to Magento in a matter of minutes.  

Part 1 of Magento Image Optimization: Installing Cloudinary Extension 

  Installation takes a couple of minutes - check out this video for more details: 

You can download the extension at Magento Connect.

  After installation Cloudinary takes over the image processing for Magento

  Magento admins still use the same method for uploading, so there are no changes to the usual image handling process. The only noticeable change should be the boost to the page load speed.

Part 2 of Magento Image Optimization: How Cloudinary Works

  The extension will automatically provide the most appropriate image version, depending on the visitor’s browsing data. For example, for Chrome and Android devices, Cloudinary will ‘losslessly’ convert and display images in WebP image format, which was developed by Google, instead of the standard JPEG format. This decreases the image size by roughly 60% and doesn’t lead to any image quality loss. 

  Internet Explorer visitors will see images in JPEGXR format, instead of the same JPEG. This conversion provides a roughly 40% decrease in image size. 

  Cloudinary will automatically cache the images and boost the speed even further, using a CDN called Akamai.

  Another technology, used by this extension is multi-domain sharding, which splits resources across multiple domains and lets browsers download data simultaneously from them.

  Cloudinary removes any unused metadata from the images, thus increasing the load speed even further.

  In addition, the extension will automatically backup Magento images. If the admin accidentally deletes any of them, the retrieval process should only take seconds.

Implementation Results Through MageCloud.net

Before Cloudinary - image size: 38 Kb.

After Cloudinary - image size: 7.91 Kb.

Result: 80% reduction in size

Before Cloudinary - image size: 200.42 Kb.

After Cloudinary - image size: 41.12 Kb.

Result: 79% reduction in size

Before Cloudinary - page load speed: 1.78s.

After Cloudinary - page load speed: 1.01s.

Conclusion

Modern Internet shoppers don’t like to waste their time. That’s why slow page load time can dramatically decrease your conversions and revenue. Page load time depends on various factors. One of the most important of them is the page size, which directly affects the load speed.

Images take up most of the page’s size. That’s why it’s important to optimize your images in order to decrease the page load time.

Cloudinary’s extension for Magento provides a unique set of tools and technologies, which allows to boost your page load speed by over 50%, using various image formats, compression tools, CDN tools, etc.

Useful Links

The Cloudinary Extension for Magento can be downloaded from the Magento Connect store.

MageCloud.net - all tests and benchmarks above were performed on Magento websites, built and hosted with MageCloud.

About the authors

This case study has been detailed and recorded by MageCloud.net and Grant Kemp. Grant is an avid tech writer and blogger at ConnectedWindow.com, with years of experience in mobile web, analytics and mobile apps. Connect with Grant on LinkedIn.