Critical resource order

HTML course · Expert · Lesson 14/39

Order <head> resources and use preload.

Critical resource order

For a fast page load, the head uses three <link> techniques:

rel="preconnect": opens an early TCP/TLS connection to an origin.
rel="dns-prefetch": only resolves DNS ahead of time.
rel="preload": fetches a critical resource (e.g. the LCP image) early.

They prepare resources the browser will need later, lowering LCP time.

Order rel values correctly

In this project the CDN origin is https://cdn.fastnews.com. You'll add three <link> tags to head:

preconnect — early connection to the CDN.
dns-prefetch — fallback DNS resolution (for older browsers).
preload as="image" — the LCP image /cover/main-story-960.webp.

preconnect and dns-prefetch can point to the same origin; preload points to a specific file and uses the as attribute to declare its type.

Exercise Add critical resources to head, header to body

Take the empty skeleton from the previous lesson. Add three <link> tags to <head>: rel="preconnect" and rel="dns-prefetch" (href https://cdn.fastnews.com), rel="preload" as="image" (href https://cdn.fastnews.com/cover/main-story-960.webp). Add a <header> to <body>; inside put h1 (content Fast News) and p (content Your fast news source).

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fast News - Home</title>
    <link rel="preconnect" href="https://cdn.fastnews.com">
    <link rel="dns-prefetch" href="https://cdn.fastnews.com">
    <link rel="preload" as="image" href="https://cdn.fastnews.com/cover/main-story-960.webp">
  </head>
  <body>
    <header>
      <h1>Fast News</h1>
      <p>Your fast news source</p>
    </header>
  </body>
</html>

Test yourself

Which rel value only resolves DNS ahead of time, without opening a connection?
- rel="preload"
- rel="preconnect"
- rel="dns-prefetch"
- rel="stylesheet"
Show answer

rel="dns-prefetch" — Correct. dns-prefetch only resolves DNS ahead of time; it doesn't open a TCP/TLS connection.

Complete the preload link

<link rel="____" as="image" href="https://cdn.fastnews.com/cover/main-story-960.webp">

Show answer

<link rel="preload" as="image" href="https://cdn.fastnews.com/cover/main-story-960.webp">

Match each rel value to its role

preconnect

Early TCP/TLS connection
dns-prefetch

Resolve DNS ahead of time
preload

Fetch a critical resource early
stylesheet

Load a CSS file

Try it yourself

index.html

All lessons in Expert

Critical resource order