Preload and prefetch

Preload critical resources with <link rel="preload">.

What does preload do?

Some resources are critical for the first paint; a heading font or a hero image, for instance. <link rel="preload"> starts fetching them early, right at the top of the page.

Example: <link rel="preload" href="/fonts/text.woff2" as="font" type="font/woff2" crossorigin>. as tells the resource type, crossorigin the cross-origin permission. Fonts require crossorigin.

When is prefetch used?

<link rel="prefetch"> instead fetches a resource the user will need on the next step, in the background. The next page, for instance.

The difference: preload is critical for this page and needed right now. prefetch can wait for the next page. So use prefetch only for a link the user is likely to click.

Exercise Preload a critical font, prefetch the next page

Add two <link> tags inside head. The first uses rel="preload" to fetch a font early: it should hold href (e.g. /fonts/text.woff2), as="font" and crossorigin. The second uses rel="prefetch" to cache the next page: it should hold href (e.g. /story/2.html).

Show example solution

<head>
  <link rel="preload" href="/fonts/text.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="prefetch" href="/story/2.html">
</head>

Test yourself

Which rel value preloads a critical font early?
- rel="preload"
- rel="prefetch"
- rel="preconnect"
- rel="stylesheet"
Show answer

rel="preload" — Correct. preload fetches a critical resource for this page early.

Complete the preload link

<link rel="preload" href="/fonts/text.woff2" ____>

Show answer

<link rel="preload" href="/fonts/text.woff2" as="font" crossorigin>

Match each rel value to its meaning

rel="preload"

Critical for this page
rel="prefetch"

For the next page
as="font"

Resource type
crossorigin

Cross-origin permission
Which is the best use of prefetch?
- Add it to every link automatically
- Use it only for images
- Add it to a link likely to be clicked
- Never use it
Show answer

Add it to a link likely to be clicked — Correct. prefetch goes on a link likely to be clicked.

Next lesson: Summary - Performance gallery

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies