×

html · level 3 · unit 1 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

loading="lazy" makes far-off pictures wait their turn.

Professionals care about : how fast a page loads and how smoothly it reacts. Every picture is a , and big pictures are slow ones. A page with twenty photos makes the browser fetch all twenty, even the ones nobody scrolls down to see.

The is the part of the page you can see right now. Add loading="lazy" to an <img> and the browser waits until that picture comes close to the viewport. This is : pictures arrive when people need them.

Never make the first big picture lazy. It is in the viewport from the start, so telling it to wait only slows the page down.

<h1>Bake Street Bakery</h1>
<img src="cake.svg" alt="Our famous lemon drizzle cake">
<h2>Birthday cakes</h2>
<p>Made to order, with your name in icing.</p>
<img src="cake.svg" alt="A birthday cake with five candles" loading="lazy">
<h2>Our garden café</h2>
<img src="tree.svg" alt="The apple tree in our café garden" loading="lazy">

Press show my page to see it here.

Pictures with no loading attribute download straight away. That is right for the first one.