When it comes to content heavy sites, especially when content is placed below the fold, lazy loading of specific assets is a good practice to follow. It helps with only loading these assets at a time when the user needs them. As a result, it improves the overall performance and user experience of a website.

For some weeks, I have been working on a new project. This project is focused on displaying images and it needs to load a lot of them in certain circumstances. This is the perfect place to implement something like lazy loading to improve the overall performance.

At first, I thought about using some popular lazy loading libraries (e.g. lazyload or this other lazyload one) or building something myself with the Intersection Observer API.

After some research, I remembered a discussion about a new native way of handling lazy loading. I came across this post from Addy Osmani and started to play with the new loading attribute. You only need to add loading="lazy" to your <img> as shown in this example:

<img src="image.jpg" loading="lazy" alt="describe your image here" />

This couldn't be easier! It works with <picture>, srcset and also supports <iframe>.

To be honest, the simplicity was enough for me to use it in this project, regardless of the browser support. I knew, browsers would catch up at some point. For me, the beauty about this new loading attribute is the fact that browser support is really decent now — this was a positive surprise.

Chrome is supporting it since version 75 and Firefox recently shipped an update to also support it.

One interesting side note: Firefox seems to be more aggressive in terms of “being lazy”. To be honest, I like this approach, but we will see what works better in the future.

All in all, I think this is a great improvement for the web. From this point going forward, I will use this new loading attribute whenever I see fit. If browsers already support it, the web becomes a bit faster. If they don't support it yet, everything still works. All for free. No additional JavaScript needed.

This is awesome! 🚀