What is native lazy loading in browsers?

Lazy loading was introduced to delay the loading of resources in the browser until they are needed. The resources can be HTML pages, audio files, video files, images, etc.

Automatically loading all the assets contained in a webpage seriously slows down the loading and first contentful painta measure of how long the browser takes to begin rendering DOM content on a webpage once a user navigates to the webpage of a webpage. Users typically abandon a website if it takes a long time to loade.g., 3 minutes.

So, the purpose of lazy loading is to minimize the load of bundlesHTML, CSS, video, images, audio, etc. that are loaded in the initial load time of a webpage.

Usage

Lazy loading is primarily used with media content such as images, videos, and iframes. Its option is included in the tag of the respective elements.

With lazy loading, the content of these tags is not loaded until they are scrolled to the viewport of the browser.

Example

A Medium post page does not load all the images on the page in the initial load. The images are replaced with highly-blurred, low memory, stand-in images. When we scroll the images within view, Medium sends out a request and loads the real image, replacing the blurred-out image.

This causes a serious performance boost to Medium, lowering the response time and resource consumption.

How to add lazy loading

The loading attribute has different options that you can choose from:

• lazy: This enables lazy loading of content.
• eager: This causes the content to be loaded directly.
• auto: This enables the browser to decide whether to load the content directly or have lazy loading.

For example, we have an image to be rendered on the img tag:

<img src="./big-image.jpg" />

To natively lazy load the image above, we just add the loading attribute with the value “lazy”:

<img src="./big-image.jpg" loading="lazy" />

Same with the videos:

<video src="./big-video-file.mp4" loading="lazy"></video>

And to embed web content with iframe:

<iframe src="https://gist.github.com/philipszdavido/uyww77w7ewgew.js" loading="lazy"></iframe>