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 for 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. Web developers must include and repeat the element with the attribute to fix it.

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

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.

Update : As of version 3.4, WP Rocket now supports native lazy-loading.

WP Rocket 3.4 Changelog
WP Rocket updated their plugin to support native lazy-loading

Related News

Jon Henshaw

Jon is the founder of Coywolf and the EIC and the primary author reporting for Coywolf News. He is an industry veteran with over 25 years of digital marketing and internet technologies experience. Follow @[email protected]