Native Lazy Loading

Native Lazy Loading: A Game Changer for Web Performance

While IntersectionObserver has simplified lazy loading, truly effective implementation requires manually removing src attributes—a cumbersome process. The ideal scenario, a simple <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174528469576234.jpg" class="lazy" alt="Native Lazy Loading ">, is still not fully realized.

As Addy Osmani noted (Chrome 75 announcement), the loading attribute allows browsers to defer loading of offscreen images and iframes until they're near the viewport. It offers three values:

• lazy: Ideal for lazy loading.
• eager: Loads immediately; not suitable for lazy loading.
• auto: The browser decides whether to lazy load.

Many developers, myself included, are likely creating custom solutions (like WordPress filters) to add this attribute to every image. Broader browser support is eagerly awaited.

Lazy loading images will significantly improve overall site performance, but lazy loading iframes will revolutionize individual site performance, particularly impacting ad technology. (See Laurie Voss's tweet: https://www.php.cn/link/86ee781072256cc909e4d0ec7cdcf8d8)

This development hopefully encourages native aspect ratio support, mitigating content reflow issues caused by delayed loading. Workarounds exist, but native solutions are preferable.

For immediate implementation of lazy loading, incorporating the loading attribute is recommended. However, as of July 2019, stable browser support remains limited. Consider these resources for more robust solutions:

• A Native Lazy Load for the Web
• The Complete Guide to Lazy Loading Images
• Tips for rolling your own lazy loading
• Lozad.js: Performant Lazy Loading of Images

Browser support details are available on caniuse. A number indicates support from that version onwards.

Desktop Browser Support

Browser	Support
Chrome
Firefox
IE
Edge
Safari

Mobile/Tablet Browser Support

Browser	Support
Android Chrome
Android Firefox
Android
iOS Safari

The above is the detailed content of Native Lazy Loading. For more information, please follow other related articles on the PHP Chinese website!