×

html · level 3 · unit 2 · lesson 3

  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

rel="preconnect" gets another server ready early.

Pages often use files from other servers, like maps, videos or pictures. Each server has a , its name in the URL, like example.com. Before the first file can travel, the browser must find the server and set up a .

Finding the server uses , the internet's address book. Then a few messages go back and forth to make the connection safe. All of that takes time, and nothing downloads until it is done.

<link rel="preconnect"> does the work early, while the browser is busy with your page. rel="dns-prefetch" is a lighter hint that only does the DNS lookup. Preconnect to the one or two domains that matter most.

<!doctype html>
<html lang="en">
  <head>
    <title>Find our shop</title>
    <link rel="preconnect" href="https://example.com">
    <link rel="dns-prefetch" href="https://example.com">
  </head>
  <body>
    <h1>Find our shop</h1>
    <p>Our map comes from another server, so the browser connects early.</p>
  </body>
</html>

Press show my page to see it here.

Writing both for one domain is a common habit: browsers that skip preconnect still do the lookup.