Wednesday, December 23, 2020

High-End Fashion eCommerce in South Asia

• 99% cache hit rate
• 2X resolution enhancement
• 70% reduction in payload, or 1.5TB saved per month
• 74% WebP savings – for Android
• 54% JPEG 2000 savings – for iPhones

Download Case Study PDF

MASARISHOP.COM is a 24/7 style destination, providing high-end, curated fashion with over 100 emerging and established designers from around the world. With customers in Indonesia, Singapore, and Malaysia (including a same-day delivery option to Jakarta), not keeping their customers waiting is crucial in keeping their glamorous reputation online and at home.

Adding 50-100 new SKUs a week, MASARISHOP.COM had two main concerns in improving their website speed. First, high-end fashion often means high quality photo resolution. Large images present a challenge to page loading speed and tends to make them lag. Second, many visitors are on mobile and sometimes their network is unreliable or slow. This is a considerable challenge that many e-commerce websites face, especially in Asia.

Herein lies the problem. How can a high-end fashion website deliver high-resolution images on an image-heavy e-commerce platform for mobile shoppers? They took our ImageEngine product and tested it to the max, to ensure that our image compression, high content delivery network (CDN) standards, and mobile optimization across all devices was flawless.

Here’s what they found…

“92% of our customers purchased from a mobile device so it’s important to improve our site’s speed because they are probably on a slow network. ImageEngine helped us speed up our site from 13 seconds to 4. 5 seconds. Plus, they’ve been really helpful since the beginning and are very committed to our problem and in getting faster speed and support. In terms of conversions everything improved. The positive impact is more interactions and more engagement from our audience; more visitors reviewing the products without lag.”
E-Commerce Manager, MASARISHOP.COM

The Problem

A key metric impacting sales was page load-time. At the outset, MASARISHOP.COM was taking an average of 13 seconds to load. And since 53% of mobile users will abandon a page if it takes more than 3 seconds to load and many of MASARISHOP.COM’s customers were mobile, it was important to improve site speed.

A large reason for slow page loading were the high resolution fashion images. The photographer would try to compress these images which would result in poor, blurry image quality and still, the site remained slow. In general, the images were higher resolution and heavier than they needed to be, particularly with mobile devices. However, they needed to maintain a uniform high-quality appearance across all of their images to match their high fashion experience.

To improve their website user experience, MASARISHOP.COM engaged in a trial of ImageEngine, a device-aware image CDN (Content Delivery Network). They sought a solution that would accelerate their site, maintain image quality, and improve bounce rate, pages visited, total time on site, all while keeping future CDN costs low.

The ImageEngine Solution

MASARISHOP.COM selected ImageEngine for many reasons, one of which was it’s effectiveness through a combination of three services into one.

First, ImageEngine leverages ScientiaMobile’s WURFL device detection to identify the devices coming to MASARIHOP.COM’s website. Once requesting devices are detected by the network’s edge servers, ImageEngine uses intelligence about the device to drive image resizing and compression. For example, ImageEngine detects screen and viewport dimensions, screen resolution (PPI ratio), operating system, and image file types supported. It proactively detects device information without using slow, cumbersome javascript.

Second, ImageEngine leverages this device information to automatically resize, compress, and convert images to next-gen image formats (WebP, JPEG 2000) in real-time. It optimizes only when images are requested. ImageEngine also caches images, so there is no need to resize them for subsequent requests from identical devices.

Third, ImageEngine uses its global image CDN with device-aware edge servers. This means that ImageEngine’s logic is pushed to the edge of its global network. Images are cached as close to customers as possible.

The Deployment

Integration involved creating an ImageEngine account and designating a domain as the origin for the primary images. Using a CNAME, ImageEngine provides a simple integration that serves all images from the delivery address.

As part of the account set up process, MASARISHOP.COM pointed ImageEngine at the source directory of the images. With one small change, ImageEngine started optimizing and delivering images. In the case of a high-end fashion site like MASARISHOP.COM, high-resolution images were then custom tailored to display perfectly across all devices with the coordination of the ImageEngine team at no additional cost.

Since ImageEngine will take the primary image and dynamically reduce image payload by up to 80%, MASARISHOP.COM stopped using low quality pre-compressed images and improved the resolution by 2X, delivering cleaner, high quality images. The net result was that the final image delivered to users was both higher visual quality, without pixelation, and dramatically smaller payload.

The Results

MASARISHOP.COM sped up their site by reducing their total image payload, This also improved performance and lowered CDN costs. A majority of MASARISHOP.COM’s customers are using mobile devices. 92% of customers purchased items on MASARISHOP.COM through mobile and of these 90% purchase items from an Apple mobile device. Therefore, ImageEngine’s ability to optimize specifically for mobile is critical and especially next-gen image formats like JPEG 2000.

Likewise, ImageEngine was able to deliver images from its edge server cache 99% of the time. This means no delays caused by going back to the origin source and re-optimizing images. By serving optimized images from the cache of its edge servers, MASARISHOP.COM was able to reduce page load-time by 8.5 whole seconds, decrease image bytes by 1.5TB per month. All of these improvements helped increase revenue for MASARISHOP.COM.

ImageEngine’s simplicity and ScientiaMobile’s 24/7 support made this roll-out quick and streamlined. ScientiaMobile’s support team also helped ensure a smooth transition during implementation.