Chapter 56: Resource Hints & Preloading

Resource Hint Pitfalls & Double Download Disasters

**Part 12: Performance & Optimization** — Chapter 56: Resource Hints & Preloading

LEARNING OBJECTIVES ⌵
  • Diagnose and fix the catastrophic "Double Download" bug caused by mismatched as attributes or missing crossorigin.
  • Understand font preloading CORS requirements (<link rel="preload" as="font" crossorigin>).
  • Avoid over-preloading and network bandwidth starvation on mobile 3G/4G connections.
  • Configure Chrome DevTools Network panel to identify wasted preloads.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story

Imagine reserving a table at a restaurant for an important business dinner, but you put the reservation under your nickname instead of your legal name. When you arrive, the host doesn't recognize you, marks the first reservation as unused, and gives you a brand-new table—charging you twice!

This is exactly what happens with <link rel="preload"> when attributes don't match the actual consumer. If you preload a font without crossorigin="anonymous", or preload a script with as="fetch" instead of as="script", the browser downloads the entire file twice, throwing a warning in the console: "The resource was preloaded using link preload but not used within a few seconds."

Preload Tag: <link rel="preload" href="/font.woff2" as="font"> (NO crossorigin)
  ===> Browser fetches font with CORS mode: "no-cors"
Consumer CSS: @font-face { src: url('/font.woff2'); }
  ===> Browser spec REQUIRES fonts to use CORS mode: "cors"
Result: Browser cannot reuse the preloaded buffer ===> FETCHES FONT A SECOND TIME! ❌

Technical Deep Dive & Specifications

The Correct Font Preload Rule

Under the W3C Web Fonts specification, all font fetches must be anonymous CORS requests, even if loaded from the same origin:

<!-- Correct: MUST include crossorigin -->
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">

<!-- Wrong: Will trigger a double download -->
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2">
SYS: ACTIVE
HULL: 98%
CORE: STABLE
NET: ONLINE
HTML STARSHIP CODE TERMINAL example.html
root@STARSHIP-ALPHA:~/web-core# READY FOR COMPILATION █
LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C
INSPECTING DOM: VALID
TAGS: SCANNING...

📌 Key Takeaways

  • Always include crossorigin on <link rel="preload" as="font">, even for same-origin fonts.
  • Ensure the href and as attributes in <link rel="preload"> match the consuming tag exactly.
  • Limit preloading to top 2–3 critical above-the-fold assets (Hero LCP image, primary font, critical CSS).
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?

🏋️ Practice Exercise

Challenge: Modify the code example above to experiment with the concepts covered in this lesson. Try changing values, adding new elements, or combining techniques.

exercise.html
🌐 Exercise Preview