Code

Native Lazy Loading 💤 is coming to our browser

Chidume Nnamdi
August 26, 2021

What’s up with Lazy-loading❔

Lazy-loading is a concept introduced to delay the loading of resources in the browser until when they are needed. The resources can be HTML pages, audio files, video files, and images, etc.

Loading all the assets contained in a webpage will seriously slow the loading and the first contentful paint. It has been discovered that users typically abandon a website if it takes >3s to load.

So, the prospect of lazy-loading is to minimize the load of bundles (HTML, CSS, video, images, audio, etc files) that are loaded in the initial load time of a webpage.

Mostly images in <img> tag and video/audio in <video> tag and iframes are what considerably lowers the loading of a webpage </video>

With lazy-loading, these tags’ contents are not loaded until they are scrolled up to the viewport of the browser. This is famously used in Medium.

A Medium post page like above doesn’t load all the images on the page in the initial load. The images are replaced with a highly-blurred low memory stand-in images, we see above. When we scroll the images within view, Medium sends out a request and loads the real image, the blurred-out image will then be replaced with the real page.

This causes a serious performance boost to Medium. It lowers the Response Time, and reduces Resources Consumption.

Lately, we add lazy-loading to our web apps by using the Intersection Observer API, listening to the scroll event, or some other method out there.

This comes with a price:

Extra code to handle and refactor: Most devs write the logic or implement their lazy-loading technique. If we have a large codebase, this gives us another extra code to the already bloating codebase to handle. Sometimes we might even lose track of the code.

Extra library to handle: Some devs opt for a library that is dedicated to handling lazy-loading. This adds to our number of libraries our app depends on. The library might stop being maintained.

JavaScript-enabled: Either writing your lazy-loading or using a library it comes down to using JS. The browser must be JS-enabled for the lazy-loading to work. If the previous Medium post was opened in a JS-disabled browser, the lazy-loading of the images would not work.

Native lazy-loading is coming ✈

The Chromium team is coming with a new way to revolutionize lazy-loading in our browsers for good. Soonest with Chrome, we will be able to use native lazy-loading in our web apps.

What’s that? Lazy-loading will be supported by the browser. We just have to simply point out the elements we want its content lazy-loaded by using the “loading” attribute. :)

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

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

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

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

Same with the videos:

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


Also, with embedding web content using iframe:

The lazy-loading algorithm or implementation will be done natively by the browser. This seriously lifts lots of heavy work from the dev. There will be no more extra code to maintain, no extra library to thin of and no worrying about JS-disabled browser.

The loading attribute has different values we can choose from:

  1. lazy
    This value makes the browser defer the loading of the resource until it comes within/into the viewport of the browser.
  2. auto
    This indicates no lazy-loading of the resource.
  3. eager
    This loads the resource immediately without lazy-loading it.

Where is native lazy-loading supported?

Currently, we can use the native lazy-loading in Chrome 76. Firefox is coming hot with it.

Check out this to learn more on this:

Native lazy-loading for the web

Conclusion

Wow! This is great. Less code and performance boost to worry about. :)

Browsers are moving to the next level, thanks to the Chromium team.


Our latest news

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non eget pharetra nibh mi, neque, purus.

Ready to get started?

Get Started