Native lazy loading of images and iframes
Web pages often have images or embedded content like ads out of view near the bottom of the page, and users don’t always end up scrolling all the way down. This means that if a web browser can avoid loading this content that the user never sees, then it could help speed up more important content near the top of the page, reduce network data usage, and reduce memory usage.
LazyLoad is one such solution, which works by waiting to load images and iframes that are out of view until the user scrolls near them. Some JavaScript libraries exist that let pages lazily load images or other kinds of content in various ways, but by having native support for lazy loading in the browser itself, this will make it easier for websites to take advantage of lazy loading. This also opens up the possibility for browsers to automatically find and lazily load content that’s well suited to being lazily loaded, without requiring the web page’s developers to do anything, which could help a very large number of users.
Websites can use a “loading” attribute on <img> and <iframe> elements to control and interact with the browser’s default lazy loading behavior. When the user scrolls, deferred frames and images that will be visible soon start loading, such that they’re typically finished loading by the time the user scrolls all the way down to them.
Ways the loading attribute can be used:
Set loading="lazy" on an image/iframe
E.g. <img src="cat.jpg" loading="lazy" />
Signals to the browser that the image/iframe is a good candidate for lazy loading.
Set loading="eager" on an image/iframe
E.g. <img src="cat.jpg" loading="eager" />
Signals to the browser that the image/iframe is not a good candidate for lazy loading, and should be loaded right away instead of being lazily loaded. If an element was already deferred, and the attribute is then later set to loading="eager", then the element should start loading.
Set loading="auto" or leave the attribute unset on an image/iframe
E.g. <img src="cat.jpg" loading="auto" /> or just <img src="cat.jpg" />
The browser will determine on its own whether or not to lazily load the image/iframe. Leaving the loading attribute unset is the same as setting loading="auto". If the browser decides to lazily load this content, it should be careful to avoid breaking pages or negatively impact user experience.
Examples
The loading attribute works on <img> (including with srcset and inside <picture>) as well as on <iframe>:
Try today:
Go to chrome://flags and turn on both the “Enable lazy frame loading” and “Enable lazy image loading” flags then restart Chrome. Chrome Developers are updating the implementation from the old attribute name load to loading over the coming weeks.
Spec
Spec change pull request: https://github.com/whatwg/html/pull/3752
Tag review: https://github.com/w3ctag/design-reviews/issues/361 (started recently, since we initially didn’t think one was necessary, but better late than never).
References
Like to learn?
Follow me on twitter where I post all about the latest and greatest AI, DevOps, VR/AR, Technology, and Science! Connect with me on LinkedIn too!
Like to learn?
Follow me on twitter where I post all about the latest and greatest AI, DevOps, VR/AR, Technology, and Science! Connect with me on LinkedIn too!
