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
<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
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! 🚀