Improve Web Core Vitals Score by Lazy Loading Images

Impact of images on web core vitals

Images play a very important role for the website. They create a great user experience for the user. It is crucial to optimize the images for quick rendering on the website without making user to wait for long time.

To improve the Web Core Vitals score and for great user experience, we optimize the images. We also have to mention the dimensions of the image to avoid layout shifts. Width and height attributes should be present in the "img" tag. By doing so, certain space will be reserved for the image without causing the layout shift. For better accessibility, alt text should be given for the images.

What is lazy loading?

Lazy loading means the elementes which does not load until it is extremely necessary. In the same way lazy loading images means, images will not be fetched until it is necessary.

Why is it used?

We use lazy variables to avoid their initialization and calculation until necessary. This executes the program faster and consumes lesser memory. Which in turn improves the Web Core Vitals.

How to implement lazy loading?

Lazy Loading of images can be implemented by using two different methods.

Native lazy loading

This is the most simplest way to lazy load the images. The loading attribute consists of three values.

Auto:The “auto” value depends on the browser’s in-built capabilities. For example, Google Chrome automatically loads the images located deep down the viewport to save the bandwidth. If any other browser does not have that capability, the image will load immediately with the page.
Lazy: The “lazy” value tells the browser that this image needs to be loaded lazily in the browser.
Eager: The “eager” value is used to tell the browser to load the image immediately as the content is loaded. The “eager” value is opposite to the “lazy” value.

Since we need to load the image lazily, we will use the “lazy” value here.

As this is a Chromium-based update and, therefore, will be available to all Chromium-based browsers. This is not supported for Safari. So we go for the other method which is implementing lazy loading by using JavaScript.

Using javaScript

This is the conventional way which has been used for a long time to make an image lazy. This is compatible with all the browsers.

In order to apply lazy loading we need to add "data-src" and "data-class" attribute to the "img" tag. In order to prevent the automatic loading of the image, we make use of the data-src attribute instead of src.