How did we improve the performance of an E-commerce site using Next-Gen image formats?
E-Commerce is a growing industry that offers convenience to shop online. According to research, visual content is the best way to give users the same experience online as they get it in-store. However, the better the visual content, the larger the page size is going to be and this, in turn, affects the website’s load time. This decrease in website performance could result in losing out on a lot of potential shoppers. So how can we ensure high-resolution image delivery without hurting the performance of the website? Read on to know more.
How to serve images without compromising the site performance?
With the advancement in web technologies, we now have a few Next-Gen image formats that have better compression and quality characteristics compared to their older JPEG and PNG counterparts. Serving your images in these formats will load websites faster and consume less bandwidth. Here is the list of next-gen image formats currently available:
- WebP
- JPEG 2000
- JPEG XR
Why did we choose WebP?
WebP is a new format that was developed by Google in 2010 to provide improved lossless and lossy compression for images. A major benefit of using WebP images is their reduced size and according to Google on average WebP images are 30% smaller in size compared to PNGs and JPEGs. If you look at the total payload of web pages, the images on most sites account for over half of that payload. So by using WebP images with up to 30% size reduction in images, you will see a noticeable impact on your site’s performance metrics.
Restraint we faced while implementing WebP
One of the major facts you need to be aware of WebP images is cross-browser support. Although about 79% of the global users surf using a browser that supports WebP, we still needed to serve JPG images to iOS and Mac users with Safari browser.
Now that you see the problem just as we did, you do not need to brainstorm ideas to find the apt solution. Here are two techniques I have discovered to overcome the problem -
- Make changes on the user-facing platform by using a tag to serve multiple versions of the same images.
- Use/Develop a service that optimizes and serves WebP images from a CDN cache, on-the-fly by detecting the user’s browser.
I would recommend using the second option as there no changes required on the application. Now, if you are interested in learning more about the service (AWS Lambda Function and CloudFront to serve WebP images) we developed, check our technical guide here.
Why did we do it this way?
There are a lot of services that offer image optimization on the fly but important things we had to keep in mind are:
- Storage : Most of the image optimization services out there require you to store the images in their databases and serve it from there. Since we already had over 20,000 high-resolution images in our AWS S3 bucket, we didn’t want to take the hassle of migrating it elsewhere.
- Modifications : We wanted to implement a solution that had the least alterations to our frontend and backend systems which means the existing code in both UI and API will continue to work.
- Recurrent Costs : With hundreds of visitors on the site every day, the price to pay for the bandwidth consumed from any optimization service is significantly higher. So we used our own function on AWS lambda@Edge and S3 to optimize the images at almost no additional costs.
- Processing: Converting the whole library of images into WebP format is again an arduous task and could take a lot of time. So, we only convert images into WebP on their first request. As an added bonus we also process and store different dimensions of the images in the cache to achieve instant delivery from edge locations.
- Modularity : Our solution can be easily deployed to any of our other platforms without the need for remodeling.
Our results:
With, WebP efficiently compressing the images and preserving the quality and our edge functions caching the images we didn’t have to tradeoff between image quality or the number of images to serve to achieve faster load speed.
Google has indicated that site speed is one of the signals used by its algorithm torank pages higher. With the above techniques and improved performance, we were also able to obtain higher scores in page audits.
By serving the images from AWS Lambda@Edge, we were able to load Gehna’s homepage in under 5 seconds.
The below graph shows the improvement in page speed provided by GTmetrix.
Wrapping up:
Next-gen image formats like WebP offer an incredible saving in file size with relatively little to zero compromises in image quality and when coupled with AWS Lambda@Edge, it provides great value in boosting the performance of a website. WebP definitely seems to be a promising image format for the web with anticipation of Apple’s Safari supporting WebP images in the near future.
Also, do check out the awesome E-commerce website Gehna we built at Commutatus using Next.JS.
If you find this article useful in improving the performance of your web site, give an 👏 and leave a comment on — What other techniques can make your page load faster? I’d love to hear any thoughts on this topic 😋
Top comments (1)
Hi Chandu,
I'm trying to set up a similar approach by converting s3 images to webp by using Lambda, do you have a blog or maybe step by step you did to achieve this? It would really be helpful !