When building websites, we’re always conscious of page weight, in terms of how much data the browser needs to load in order to display a page to the user.
The heaviest elements on a page are usually images, for example if you had 10 1mb images on your page, the browser would need to download 10 x 1mb (10mb) of data. Even if the user never even scrolls to the part of the part where these images are, the browser will still download them all.
This is an issue from a performance perspective, and also for users browsing your site on 3G / 4G connections, you’re burning up their data unnecessarily and slowing down their experience.
In the example above, you can see the 3 images loading as we scroll down, as represented by the green markers on the timeline, rather than everything coming in at the same time at the point of page load.
This is simply done by adding
loading="lazy" to your image element.
<img src="img/imagename.jpg" loading="lazy" alt="I'm a lazy loading image" />
This is currently enabled using a flag, however hopefully it’ll be a default feature very soon. Currently we can turn it on via
Although normal users won’t currently benefit due to this behind hidden behind a flag in Google Chrome, we hope it’ll come into production very soon and do away with the overly complex methods currently being used throughout the web, further streamlining website code and meaning even less data download and bandwidth usage. The is good news for everyone. 😁