Native Lazy Loading

Last week Google introduced native lazy loading to Chrome browser version 76. If you are wondering what lazy loading is, and how to implement it, then read on.

What is Lazy Loading?

Lazy loading is used to improve the performance of the website by loading resources like images only when they are required by user.

For instance, when a visitor to a website lands on your page it’ll load images that comes into the viewport, rather than loading all the images when the page is initially loaded.

How do you Implement Native Lazy Loading?

Native lazy loading can be implemented by simply adding the loading attribute with the value of “lazy”.

What browsers support Native Lazy Loading ?

Currently only Chrome browser version 76 supports native lazy loading, fallback JavaScript or polyfill solution needs to be implemented for it to be support by other browsers.

Browsers that support native lazy loading can be found here: https://caniuse.com/#feat=loading-lazy-attr

Leave a Reply

Your email address will not be published. Required fields are marked *