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.


Leave a Reply

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

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X