Copied....

Enhancing Web Performance - A case study of Image Optimization

Abhilash Antony ellips

Sep 10, 2024 ellips

5 min read

TABLE OF CONTENTS

Introduction

Core Web Vitals

Optimizations to Improve the Core Web Vitals:

Performance comparison:

Share this Article

As e-commerce continues to scale up globally, so does the demand for online stores to meet the ever-growing demand of customers. It is therefore equally important to ensure that your Adobe Commerce stores are fast to retain customers. Site speed depends on how quickly resources are downloaded through the network, and this can change with the onset of time.

From the HTTP Archive, the median transfer size of all resources requested by the webpage during December 2023 is around 2497.5 KB for desktops and 2216.1 KB for mobile devices respectively. Out of this, the median size of images transferred is around 1027.8 KB for desktop and 862.4 KB for mobile respectively. That constitutes about 34 to 41 % of the total page weight. There are even sites that have significantly more size of images being transferred, for example, the landing pages of e-commerce sites. That is significant when compared to the entire page size.

One method would be to minimize the number of images loaded on the page. In practice, there would be client requirements that prevent cutting down on these static assets. The next step would then be to ensure efficient loading of whatever images are there on the webpage. Without context, “performance” and “speed” are subjective. We’ll therefore go over the essential quantifiable performance metrics that define site performance. We’ll also explore the strategies we used to optimize a test Adobe Commerce site and compare the metrics. A comparison of a test site before and after implementing the optimizations is then illustrated to compare the performance.

Core Web Vitals

Web vitals are standardized quantifiable performance metrics for a website introduced by Google. The core web vitals form a specific subset of these metrics, each representing a distinct aspect of the user experience. In the context of image optimization, we’re concerned with the following metrics:

Last Contentful Paint (LCP):
The measure of loading performance. This represents the point in the timeline of page load at which the entire content has loaded. For images, this represents the rendering time for the largest image visible on the viewport, relative to the user’s initial navigation to the page. For a good user experience, the value of LCP should be less than 2.5 seconds for at least 75% of page visits.
First Input Delay (FID):
This is the measure of interactivity. It represents the time from when a user first interacts with a page to when the browser begins to respond to the user interaction. The value of FID should be less than 100 milliseconds for at least 75% of page visits. When testing with browser tools, this is replaced with an alternate parameter known as Total Blocking Time (TBT) since these tools cannot simulate user clicks.
Cumulative Layout Shift (CLS):
This is the measure of stability. CLS is a measure of how much the layout of a webpage unexpectedly shifts during a page’s lifespan. A layout shift occurs whenever a page element’s position changes from one rendered frame to another. A value of 0.1 or less ensures a good user experience.

Optimizations to Improve the Core Web Vitals:

The most common way to reduce the LCP value is by reducing the size of images. Ideally, we want images to be less than 500 KB in size. For best practices, maintain the optimal size of the images no more than 200 KB. Large images such as hero images contribute to the LCP value. Some common ways to ensure lower image sizes are:

Image compression - Compressing the image to reduce the size of the image, while maintaining quality for lower payloads. We could also include an image element with the “srcset” and “sizes” attributes. These attributes allow the browser to automatically render different images using the URLs specified in the “srcset” attribute.
Using lighter formats - Using formats such as WebP and AVIF renders the same image in a lighter format. Images in these formats allow a reduction of sizes of around 30%. Whenever possible, include vector images alongside PNG and JPG images.

Lazy loading is a strategy that defers the loading of non-critical images. They are only loaded later at a point of need. The most optimal strategy to implement lazy loading is to use browser-native lazy loading using the “lazy” HTML attribute. This strategy supports deferring offscreen images to be loaded only when the user scrolls to that particular section of the page. This strategy also improves the FID scores. As a best practice, avoid the lazy loading of large images, such as the hero banner images to avoid adding to the LCP value.

To prevent significant shifts in the image layout, the width and height attributes allow the image to resize based on the viewport size and the size of the rendered image during loading time. These attributes prevent layout shifts by loading a wireframe of the image of the required size, even before the image has been downloaded.

Performance comparison:

The strategies highlighted in this article were implemented on the landing page of a test Adobe Commerce site. In this test, almost 72% of the total page size constitutes images, meaning that proper optimisation is necessary to ensure optimal page performance. Below is a comparison of the test page before and after integrating image compression, browser lazy loading and dimension attributes.

As seen above, simple changes based on image optimization allowed for an improvement of the core web vitals of the Adobe Commerce landing page significantly. This is considering just image optimization, without taking into consideration other resources such as JavaScript, CSS, fonts etc. Adopting these simple strategies can significantly improve the performance of a site’s landing page which is content-heavy with images.