Google added support for a new HTML
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!
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.
loading="lazy" and the Chrome does the rest.
Let’s look at an example. I added this image below including the above mentioned attribute.
Load me, lazy please
This image should be lazy-loaded.
Load me immediately
This image is not 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.
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.
It is a large step ahead for the web. Websites will get, or at least feel, faster and they will consume less energy.
This page is loaded in about 32 kb.