Why loading attribute is not working in chrome?

user_3854365 0
Viewed 2495

I have replaced lazy loading with native chrome loading="lazy" attribute but it seems to be not working. I am using Chrome 76 latest version.

I checked my page speed in https://developers.google.com/speed/pagespeed/insights and it still shows to Defer offscreen images!

Not sure what exactly I have missed?

<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
google-chrome lazy-loading html
1 Answers

I answered a related question some time ago:

After some research I found that I was missing something on my images. Images should include dimension attributes

As mentioned here: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes

While it's not necessary, it is desired or expected to specify the dimension attributes on your images because without dimensions specified, layout shifts can occur. Resulting in unexpected behavior.

The browser needs to know the dimensions of your images to reserve sufficient space on a page for them.

Related question: https://stackoverflow.com/a/64330480/10757314

user_107573140
Related