Back to Blog

Native Lazy Loading 💤 is coming to our browser

Chidume Nnamdi

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:

<iframe
	src="https://gist.github.com/philipszdavido/uyww77w7ewgew.js" 
  loading="lazy">
</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.



More from the Blog

Native FileSystem API is coming to our browser 😍

Accessing the filesystem is a common feature of apps, but coming to the browser it’s an all-out battle with the filesystem. But Chrome is changing all that with the coming of the Native Filesystem API. 

Read Story

Become a JavaScript-on-Mobile Pro with PWA’s

Responsive design took over the internet back in 2012, however the tech had been brewing since 2007, when Steve Jobs introduced the idea of web-apps to the world at the launch of the first iPhone.

Read Story

Understanding Typeof in JavaScript

Knowing the type of data you are working on is often found crucial. In this post, we will look into the typeof keyword in JS.

Read Story

Stay in the Loop.

Gitstart runs a monthly email newsletter for developers, engineering leaders and CEOs, covering latest tips and trends.
We will never share your email address with third parties.