šŸŽ Checkout my Learn React by Making a Game course and get 1 month Free on Skillshare!

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

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.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


2 Replies

  • Hi Robert,
    Yeah … for me was the same when I first heard about it. Was expecting something like img.doLazyLoad().

    If you want to check more I’ve learned a lot from the book Image Optimization by Addy Osmani.

    Sorry, for the late reply but somehow I forgot to check the comments for the blog in the past few days.

Leave a Reply

Your email address will not be published. Required fields are marked *