TaskAdd three resource hints: preconnect 'https://cdn.example.com' (crossorigin), preload '/hero.webp' as='image' fetchpriority='high', preload '/inter.woff2' as='font' type='font/woff2' crossorigin.
preload + preconnect for critical resources
100 XP7 min
Theory
You saw this in A1 β now apply it in context
<head> <meta charset="utf-8" /> <!-- 1. tell the browser about origins we'll fetch from --> <link rel="preconnect" href="https://cdn.example.com" crossorigin /> <link rel="dns-prefetch" href="https://api.stripe.com" /> <!-- 2. high-priority fetch the LCP image --> <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> <!-- 3. preload the hero font (so text doesn't FOUT) --> <link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin /> <!-- 4. let the parser proceed --> <link rel="stylesheet" href="/critical.css" /> <script src="/app.js" defer></script> </head>
When each is worth it
- `preconnect` β when you'll fetch β₯1 thing from that origin within 5 seconds. Saves DNS + TCP + TLS handshake (~50-150ms on first request).
- `dns-prefetch` β same idea, less expensive (DNS only), less reliable. Use when you MIGHT fetch from there.
- `preload` β when a critical resource (LCP image, hero font, blocking JS module) is late-discovered. Lifts it to "highest priority" download queue.
Don't overdo preload
Every preload competes with your critical-path requests. Preload only the resource that's BLOCKING your LCP. Lighthouse warns: "Unused preload" if your preloaded thing isn't used within 3 seconds.
fetchpriority
A relatively new attribute. fetchpriority="high" on <link rel="preload"> AND on <img> lets you hint priority within the same resource type. Use on the hero image. Use low on offscreen images.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.