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.