Load that image when you need it

Google added support for a new HTML loading attribute to its browser Chrome to lazy-load images. We do that with JavaScript, but that will change. Native lazy-loading is now possible by setting this attribute’s value to ‘lazy’.

Great, but wait, what is lazy-loading and why is that a good thing?

What is lazy-loading?

Lazy-loading is the practice of delaying load or initialisation of resources or objects until they’re actually needed. The goal is to improve performance and save system resources.

Ok, let’s take a step back and explain it simply. An example might help.

Let’s say that you have a web page that contains an image. This image is somewhere further down the page, so it is not visible on your screen when the page is loaded. It makes sense then to load it just before you scroll down far enough for it to appear. Lazy-loading is used to achieve that.

Lazy-loading saves resources and thus energy, because not everyone will scroll down your page and for those visitors, it won’t be loaded at all. Nice!

Native lazy-loading

So there is now something called native lazy-loading. Google has added this feature to its browser Google Chrome. And hopefully, other browsers will follow.

Native means that it is handled by the browser. So, we won’t need JavaScript anymore. You add the loading attribute with the value “lazy”, like this loading="lazy" and the Chrome does the rest.

Example

Let’s look at an example. I added this image below including the above mentioned attribute.

Load me immediately

non-lazy-loaded image

This image is not lazy-loaded.

Load me, lazy please

Lazy-loading image

This image should be lazy-loaded.

So I hope you don’t see any difference? That’s the idea. In principle, you can see in the console how the second image is loaded later. Unless of course you are using another browser than Chrome (for the moment).

It is possible (or even probable) that both images were loaded immediately in your browser. The distance from the top of the web page determines when an object is lazy-loaded and the limit for that distance depends on these things:

  • type of object to be loaded
  • type of connection
  • if data saving is activated

For example, the threshold to load an image on a 4G connection is 3000 px: it is loaded when the scroll distance is equal or less than 3000 px. The threshold increases to 8000 px on a slow 2G connection. This means that the browser starts downloading an image quicker on a slow connection so that it is visible by the time you scroll to it.

You can read more about the technical details here.

More than nice to have

You can use this native lazy-loading attribute already. If the browser does not support it, nothing happens.

That is the beauty of the web.

A feature that degrades without causing problems for older browsers or having the need to add support for it. Lazy-loading is also a great example of how something is invented, written in JavaScript, used by millions of sites and then implemented by the browser. Now let’s hope that the standards and other browsers will follow.

It is a large step ahead for the web. Websites will get, or at least feel, faster and they will consume less energy.

Update: native lazy-loading of images is the default in WordPress 5.4 WordPress 5.5, since August 2020!

This page is loaded in about 47 kb.