Preload Prefetch and Preconnect
Hint the browser to fetch critical resources early.
Preload Prefetch and Preconnect is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Resource Hints?
Modern browsers discover resources only as they parse HTML. Resource hints (link rel attributes in the <head>) let you tell the browser "I will need this soon" — so the network request starts earlier than discovery would normally allow.
preload Loads Now
<link rel="preload" as="..." href="..."> tells the browser to fetch the resource immediately with the priority appropriate for the as type. Use it for assets the page will definitely need: hero images, critical fonts, route-level JavaScript.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>The as Attribute
Always set as — it determines the request priority, the Accept header, and the CSP enforcement. Common values: "script", "style", "font", "image", "fetch". Without as, browsers ignore the preload and log a warning.
crossorigin for Fonts
Font preloads require crossorigin even when the font is same-origin. Without it the browser fetches the font in CORS mode for the actual use but anonymous mode for the preload, doubling the download — a subtle and common performance bug.
prefetch Loads Later
<link rel="prefetch" href="..."> hints that a resource will be needed for a future navigation. The browser fetches it at the lowest priority during idle time, then caches it so the next page paints instantly.
<link rel="prefetch" href="/next-page.html">preconnect Warms Connections
<link rel="preconnect" href="https://api.example.com"> tells the browser to perform DNS, TCP and TLS handshake to a third-party origin before the first request arrives. Use it for API hosts and CDNs that your page will hit.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch is the Lighter Cousin
<link rel="dns-prefetch"> performs only the DNS lookup — cheaper than preconnect. Use it for many third-party hosts where you cannot afford a full preconnect to each one; pair preconnect with the most-critical few origins.
Limit the Hints
Too many preloads compete for the same bandwidth and slow the page down. Preload only resources blocking the critical render path — usually one hero image and one or two critical fonts. Everything else can be discovered normally.
modulepreload for ES Modules
<link rel="modulepreload" href="/app.js"> preloads not only the module file but also its dependency tree. This avoids the cascading download waterfall typical of native ES modules, where each import waits for the previous to parse.
Measuring the Impact
Use the Network panel's Initiator column to confirm preloaded resources actually fetched early, and Lighthouse's "Preconnect to required origins" audit to detect missed opportunities. Removing a slow but unused preload often wins as much as adding a good one.
Quirks of Each Hint
preload triggers a console warning if the resource is not used within ~3 seconds. prefetch can be cancelled by the browser under network/memory pressure. preconnect connections close after ~10 seconds of inactivity — use it for resources that will be requested soon.
Knowledge Check
What does preconnect do that dns-prefetch does not?
Summary
preload fetches critical resources now (with as and crossorigin where needed). prefetch caches likely-next-navigation resources during idle time. preconnect (TCP+TLS) and dns-prefetch (DNS only) warm connections to third-party origins. modulepreload extends preload to the ES module dependency tree. Use sparingly and measure.
Frequently asked questions
Is the “Preload Prefetch and Preconnect” lesson free?
Yes — the full text of “Preload Prefetch and Preconnect” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Preload Prefetch and Preconnect”?
Hint the browser to fetch critical resources early. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Preload Prefetch and Preconnect” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The async and defer Attributes
- Preload Prefetch and Preconnect
- Lazy Loading Images loading=lazy
- Resource Hints modulepreload