Chrome web browser now supports native lazy-loading

Lazy-loading is a common practice used to defer the display of images below the fold of a browser window and has always required JavaScript. The latest version of Chrome removes the requirement to use JavaScript.


Google engineers, Houssein Djirdeh, Addy Osmani, and Mathias Bynens, announced native browser support for lazy-loading images and iframes in Chrome 76. The native support means that JavaScript is no longer required for lazy-loading and it will work even if JavaScript is turned off for the browser.

Native lazy-loading is a welcome replacement to the current JavaScript solutions. It will allow web developers to remove code that is now unnecessary. It will also fix common issues associated with lazy-loading, like the use of data-src. The data-src attribute doesn't display images natively in a browser without JavaScript. To fix it, web developers have to include noscript and repeat the img element with the src attribute.

<img class="lazy" data-src="https://domain.com/image.png” alt="Image description">
<noscript>
    <img src="https://domain.com/image.png” alt="Image description">
</noscript>

With native lazy-loading, web developers only need to include the loading attribute and specify a value of either lazy or eager.

<img src="https://domain.com/image.png” loading="lazy" alt="Image description">

The 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

Since this feature only works on the latest version of Chrome, it won't work for visitors using older versions. It also won't work for visitors that are using Firefox or Safari. If the purpose of implementing lazy-loading is strictly for improving user experience, web developers may want to hold off on removing their JavaScript implementation until it's supported by the majority of browsers that visitors use to access their site. However, if the purpose has more to do with improving page load performance for Googlebot, then it might be a good option since Googlebot now uses evergreen Chromium.

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.