Frontend is a free bonus on CodeMentor AI β the main product is Python. Register to save your progress and unlock all 290 Frontend lessons + 1,000+ Python lessons.Sign up β free
TaskIn the head, add three resource hints: preconnect to https://api.stripe.com (with crossorigin), preload the font /fonts/inter.woff2 (type='font/woff2', crossorigin, as='font'), and dns-prefetch to https://cdn.jsdelivr.net.
preload and prefetch: telling the browser what you need
100 XP9 minFREE
Theory
The browser is conservative β sometimes too much
When the parser hits <link rel="stylesheet" href="β¦">, it pauses page rendering until that file downloads. If your hero font is loaded via CSS, the page renders, *then* discovers the font, *then* downloads it β you see a flash of unstyled text for 200-800ms.
You can hint earlier:
<!-- load this NOW, in parallel with the HTML β high priority --> <link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin /> <!-- I'll probably need this on the next page β fetch when idle --> <link rel="prefetch" href="/dashboard.html" /> <!-- this origin will get requests soon β open the TCP socket now --> <link rel="preconnect" href="https://api.stripe.com" crossorigin /> <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
Which one when
| Hint | When | Cost |
preconnect | You'll fetch from an origin in <5s | TCP handshake (~50ms) |
dns-prefetch | Same, lower priority (cheaper, less reliable) | DNS only (~10ms) |
preload | A resource on THIS page that's currently late-discovered | Full download |
prefetch | A resource for the LIKELY-NEXT page | Full download (low priority) |
modulepreload | An ES module on this page | Full download + parse |
Don't overdo it
Every preload competes with critical-path resources. Preload only what's actually causing a noticeable flash. Lighthouse will warn you ("Unused preload: never used within 3s").
Live preview