Lazily load below-the-fold images and iframes
source link: https://ma.ttias.be/lazily-load-below-the-fold-images-and-iframes/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Lazily load below-the-fold images and iframes
Mattias Geniar, April 08, 2019
Follow me on Twitter as @mattiasgeniar
A pretty cool feature has landed in Chromium that allows you to easily lazy-load images and iframes.
Here’s some info directly from the mailing list:
Support deferring the load of below-the-fold images and iframes on the page until the user scrolls near them.
This is to reduce data usage, memory usage, and speed up above-the-fold content.
Web pages can use the “loading” attribute on and elements to control and interact with the default lazy loading behavior, with possible values “lazy”, “eager”, and “auto” (which is equivalent to leaving the “loading” attribute unset).
Source: Intent to Ship: Lazily load below-the-fold images and iframes – Google Groups
Which leads to some pretty powerful optimizations for page loading and bandwidth savings, especially on image-heavy sites (like news sites, photo blogs, …).
It works simply as follows:
<img src="example.jpg" loading="lazy" alt="example" /> <iframe src="example.html" loading="lazy"></iframe>
Some more technical readings: Native Lazy Loading for img and frame is Coming to the Web.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK