noscript and repeat the
img element with the
<img class="lazy" data-src="https://domain.com/image.png” alt="Image description">
<img src="https://domain.com/image.png” alt="Image description">
With native lazy-loading, web developers only need to include the
loading attribute and specify a value of either
<img src="https://domain.com/image.png” loading="lazy" alt="Image description">
lazy value tells the browser that you want to defer the image or iframe until it reaches a certain distance from the viewable portion of the browser window. Whereas the
eager value specifies that you want the asset to display immediately, even if it appears below the fold.
Native lazy-loading caveats
Another reason to hold off on implementing the new native lazy-load attribute might be the technology stack that's used. For example, Cloudflare will likely include a new option for it with their Speed tools. Additionally, WordPress may add it to its Core, and WP Rocket may support it in a future version of their caching plugin.
Update : As of version 3.4, WP Rocket now supports native lazy-loading.
Never miss an important story – Subscribe to Newsletter