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.
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 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
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.
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.
This is awesome! 🚀