Resource hints in HTML

Four rel values that change when the browser fetches something.

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.avif" as="image">

<link rel="prefetch" href="/tours/rust">
<link rel="modulepreload" href="/app.js">

How it works

preconnect opens the connection early to a host you will use.
preload fetches a resource this page definitely needs, at high priority.
prefetch is for the next page, at idle priority.

The run, in numbers

Lines: 9
Characters to type: 349
Tokens: 65
Three-star pace: 75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 52 seconds.

Type this snippet

Step 5 of 6 in Metadata, step 21 of 23 in Semantics & metadata.

← Previous Next →