Using the HTML img lazy attribute and link preload image to improve page performance

DanielMay 7, 2021May 9, 20212 Comments

Two things that we can easily do improve to improve the image performance on our web pages:
1. lazy load the images: Basically, lazy loading an image means to make the request for that img only when we need to show it in the view.
Let's take an example where we have a long list of vertical images:

<img src="cat1.png" />
<img src="cat2.png" />
<!-- many cats here -->
<img src="cat25.png" />

By default, the page will request for all of them, even if just the first one is in the initial view. This will make our page slower to load.

But if we add loading="lazy" the browser will ask for an img only when the user scrolls down to that specific image. We are loading the images only when we need them.

<img src="cat1.png" loading="lazy"/>
<img src="cat2.png" loading="lazy"/>
<!-- many cats here -->
<img src="cat25.png" loading="lazy"/>

The second accepted value for the loading attribute is loading="eager". But is the same as the default; as not having the loading attribute declared.

2. preload the critical big hero images: We can use the link rel=preload to request in advance the big images:

<link rel="preload" as="image" href="donut.jpg">

This will help with the Largest Contentful Paint metric. More details in this fantastic article from Smashing Magazine.