×

html · level 3 · unit 2 · lesson 4

  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

fetchpriority="high" puts the first in the queue.

The hero is the big picture at the top of a page. How fast it appears decides how fast the whole page feels. Browsers guess which downloads matter most, but they cannot know which picture is your hero.

fetchpriority gives a download its . fetchpriority="high" on the hero moves it up the queue, and fetchpriority="low" on a small picture moves it down. Leave everything else alone.

The hero must never be lazy: lazy means wait, and high means hurry. Lazy and low suit the pictures further down.

<h1>Sunny Side Café</h1>
<img src="cake.svg" alt="Our famous lemon drizzle cake"
     width="800" height="500" fetchpriority="high">
<h2>Find us</h2>
<img src="logo.svg" alt="The Sunny Side Café sign"
     width="100" height="100" fetchpriority="low">
<h2>Our garden</h2>
<img src="tree.svg" alt="Tables under the apple tree"
     width="800" height="500" loading="lazy">

Press show my page to see it here.

Use high on one picture only. If everything is important, nothing is.