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.
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.
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:
to natively lazy-load the above image, we just add the loading attribute with value “lazy”:
Same with the videos:
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:
This value makes the browser defer the loading of the resource until it comes within/into the viewport of the browser.
This indicates no lazy-loading of the resource.
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:
Wow! This is great. Less code and performance boost to worry about. :)
Browsers are moving to the next level, thanks to the Chromium team.