Google Chrome Native lazy-loading
It’s finally here! Google Chrome support native lazy loading by adding the loading attribute to an image and an iframe!
More info at https://web.dev/native-lazy-loading
What is lazy-loading?
“Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used. The opposite of lazy loading is eager loading.” -Wikipedia
Here is a sample code:
<img src="/theme/img/logo.png" title="Emre Rothzerg" width="50" height="50" loading="lazy" /><br><!-- or --><br><iframe src="https://example.com" loading="lazy"></iframe>
The loading attribute in img and iframe elements supports the following values:
- auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
- lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
- eager: Load the resource immediately, regardless of where it’s located on the page.