Image Lazy Loading is a web performance optimization technique that makes the browser load only the images that are currently or about to be displayed on the screen. This improves performance because the browser will only download and display images when necessary instead of downloading all at once.
Mozilla Firefox supports Chrome's Lazy Loading feature
Traditionally, developers would add Lazy Loading feature to a website through third-party JavaScript libraries, but with the release of Chrome 76, Google has added it as a native feature to its browser. To use this feature, developers simply need to add the loading='lazy' attribute to HTML IMG tags as shown below:
Lazy Loading feature in Firefox Nightly
The Lazy Loading feature is now available in the latest Firefox Nightly version, and users can download and install it via the shared link below:
- Download the latest Firefox Nightly here: Download Firefox Nightly
In the current Firefox 75 Nightly build, Mozilla has added a new about:config option called 'dom.image-lazy-loading.enabled', allowing you to enable Lazy Loading feature in the browser.
To test this feature, simply open Firefox's developer tool, click on the Network tab, and then access the lazy loading demo page.
When you first load the page, you'll see that Firefox only downloads the necessary resources and images to display the visible images in the browser. As you scroll down, the developer console will show that Firefox is downloading more images because they are almost visible in the browser.
With the two largest browser developers supporting Lazy Loading feature directly in the browser, a JavaScript library needed to maintain and download from websites will be eliminated.
