Stop 16 · PerformanceTopics · 13/13

Preloading

In short

Some files are hidden deep, like a font inside a CSS file or a hero image set as a background. Preloading tells the browser to fetch them right away instead of finding them late.

Telling the browser to fetch a critical resource (a font, a hero image, a key script) as early as possible in the current page's load, ahead of when it's discovered normally.

The jaadu talks on a phone while walking to a medical shop where the chemist already packs a bag.

Think of it like this

Calling ahead before reaching the shop

Instead of reaching the medical store and then waiting while they find your medicine, you call ahead. When you arrive, it's packed and ready. Preload is that phone call for files the browser would otherwise discover late.

Watch it happen

Finding the font early

Browser

Your server

Font CDN

GET /

1/5The browser downloads the HTML and starts reading the head.

The big ideas

What you need to know

For the current page

rel="preload" says 'this page needs this file soon, fetch it with high priority now'.

Fonts need crossorigin

Preloaded fonts must include crossorigin, even from your own domain, or the browser downloads them twice.

preconnect warms up a domain

rel="preconnect" does the DNS lookup and connection setup early for a third-party domain like a font CDN.

Don't preload everything

Every preload competes for bandwidth. Preload only one or two files you're sure are needed early.

See it in code

Walk through the code

html

1<head>2  <!-- Start connecting to the font host early -->3  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />4 5  <!-- Self-hosted font used above the fold -->6  <link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />7 8  <!-- Hero image set in CSS, so the browser would find it late -->9  <link rel="preload" href="/images/hero.webp" as="image" fetchpriority="high" />10 11  <link rel="stylesheet" href="/styles.css" />12</head>

1/3preconnect does the DNS, TCP and TLS setup for a third-party host early.

The as attribute is required. It sets the right priority and lets the browser reuse the file when the page asks for it.

Save yourself the pain

Common mistakes

Oops

Preloading a file the page never uses.

Do this instead

Chrome warns in the console when a preloaded file isn't used soon. Remove any preload that triggers it.

Oops

Leaving out as or crossorigin on a font preload.

Do this instead

Use as="font", type and crossorigin. Without them, the preload is wasted and the font downloads again.

Your mission

Stop the font flash

~20 min

Quick check

You preload a font but the Network tab shows it downloading twice. What's the likely mistake?

Go deeper

1Add `<link rel="preload">` for a critical font or above-the-fold image.
2Compare page load timing before and after preloading a critical resource.
3Learn the difference between `preload` (needed now) and `prefetch` (needed later).