Native Lazy Loading in the Browser

When I heard about Native Lazy Loading in early 2019, I was stoked! Chrome was the first browser to support it.

Fast-forward to early 2020, and it’s supported by Edge, Firefox, Chrome, Opera, Android, and Android Chrome. Since that support is currently much better, I thought it was time to write about it.

In this article, I want to show you how simple it is to lazy-load images and iframes in the browser.

But first, we’ll dive into what lazy loading is, why you want to use it, how we did this before, and how you want to do it moving forward.

1. What Is Lazy Loading?

When an img or iframe tag is in the HTML and parsed by the browser, it will immediately load the sources. This blocks the whole page to finish loading.

This will cause a longer time to load the page, so it takes longer for the user to interact with the page. We want the user to interact with the page as fast as possible.

So smart people came up with lazy loading. This is a technique to show images and only load iframes when they’re visible to the user. This will make sure the user only downloads what is visible.

History

Back in the day, we did lazy loading via a scroll event listener. With every event, we checked the array with images and iframes if one of them was visible.

If they were visible, we had to change the attribute data-src=" source URL" to `src=“source URL”. This loads an image or page at that moment.

But a scroll event is very inefficient because it fires countless events in a very small timeframe.

We had to calculate if the element was visible with getBoundingClientRect(). The downside of this was that with every call, it forced the browser to lay out the whole page again.

For that time, it was not ideal. But it was better than loading in all the images by page load so that the user had to wait until the page was fully loaded.

Intersection Observer

In early 2016, the Intersection Observer was available in Chrome. Other browsers followed later.

The Mozilla Web Docs describe the Intersection Observer in a very clear way:

“The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.” — Mozilla Docs

The Intersection Observer observes what you tell it. It’s different than events. Events are constantly fired, even though you’re not doing anything with them.

2. Native Browser Lazy Loading

Native lazy loading is super simple! Add a loading attribute on your img or iframe tag. You can choose the values lazy, eager, and auto.

lazy: For using lazy loading.
eager: Load directly.
auto: The browser will choose to lazy-load or not.

This way of doing lazy loading is so simple that using it is a no-brainer.

3. How Does It Work?

If you want to use the lazy-loading functionality, add a loading attribute with the value lazy to your images or iframes:

“...”

With this attribute, you will tell the browser to only show the image when it becomes visible to the user. When it’s not visible, it won’t download the image or load the page for the iframe.

We need support across multiple browsers, but not all browsers support native lazy loading yet, so we need a polyfill.

4. Fallback With Intersection Observer

Because Safari (on macOS and iOs) doesn’t support native lazy loading yet but does support Intersection Observer, we can use a polyfill based on the Intersection Observer to make native lazy loading work.

Support

This polyfill supports most modern browsers.

Mac: Firefox, Safari 12, 11
iOS: Safari 12
Windows: Chrome, Edge, Internet Explorer 11

Plugins

There are also some plugins available for PHP and WordPress to use native lazy loading.

More support

If you need to support IE 11, you also need to load a polyfill for the Intersection Observer.

I’ve written an in-depth article about how to use the Intersection Observer to lazy-load your images.

Conclusion

It is super awesome that we finally have native lazy loading baked into the browser! With a polyfill added, we can make sure that all modern browsers can make use of it.

Are you already using the native lazy-loading functionality on your website or web app? Or are you interested in implementing it? Please let me know in the comments what you think and if you discovered some secrets around it.