Preload

Preload is a resource hint that tells the browser to fetch a specific file early and with high priority, before the browser would naturally discover it.

It is declared with a link tag using rel="preload" and is meant for resources the browser needs soon but would otherwise find late, such as a font referenced only inside CSS, the image that forms the largest element on screen, or a critical script. By moving that fetch forward, preload shortens the time until the resource is ready, which can improve loading performance and, for the right asset, the Largest Contentful Paint metric.

<link rel="preload" href="/hero.webp" as="image">
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>

The as attribute is required and tells the browser the resource type so it sets the correct priority and applies the right policy. Fonts also need the crossorigin attribute even when same-origin, or the file is fetched twice. The discipline with preload is restraint: it is a directive, not a hint the browser can ignore, so preloading too many things forces them to compete for early bandwidth and can delay the very resources you cared about.

Preload differs from prefetch and preconnect. Preload fetches a resource the current page needs now; prefetch fetches something the next page might need; preconnect only opens an early connection to another origin. All three belong to the wider family of resource hints used to tune how a page loads.

Related: Resource Hints, Render Blocking, LCP complete guide