Preload

ELI5 — The Vibe Check

Telling the browser 'hey, you're gonna need this file SOON, start downloading it NOW.' Unlike prefetch (which is for future pages), preload is for stuff the CURRENT page needs urgently — like a font or a hero image. It's moving critical resources to the front of the download queue.

Real Talk

Preloading instructs the browser to fetch a resource with high priority for the current page, before it would naturally be discovered during HTML parsing. It's specified via <link rel='preload'> with the as attribute indicating resource type. It's critical for fonts, above-the-fold images, and critical scripts.

Show Me The Code

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">
<link rel="preload" href="/critical.css" as="style">

When You'll Hear This

"Preload the web font to avoid FOUT." / "Don't confuse preload (this page) with prefetch (next page)."