Web Performance

Preload

A resource hint telling the browser to fetch a critical file early, before it would discover it.

Preload is a resource hint — link rel="preload" — telling the browser to fetch a file it will definitely need, before it would otherwise discover it. It is used for fonts and the hero image, which are normally found late because they are referenced from inside CSS. Preloading too much is counterproductive: everything competing is nothing prioritised.

Definition

The browser discovers resources by parsing. A font referenced in a stylesheet is not known until the CSS has been downloaded and parsed, which is late. <link rel="preload"> starts the fetch immediately.

It requires the correct as attribute, and fonts additionally need crossorigin even when same-origin. A preload that goes unused within a few seconds produces a console warning — usually a sign the hint was wrong rather than merely early.

Why It Matters

Preloading the LCP image and the one or two above-the-fold fonts is among the cheapest Largest Contentful Paint improvements available, because it removes a round trip from the critical path.

Example

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

What to preload, and what not to

Preload the small number of resources that are both critical to the first render and discovered late: the LCP image when it comes from CSS or script, and the one or two font faces used above the fold.

Do not preload everything. Preload requests compete with each other and with the parser's own discoveries, so a page preloading a dozen files has effectively prioritised none of them — and each one is bandwidth spent before the browser knows whether it is needed.

Fonts need crossorigin on the preload even when served from the same origin, because font requests are made in CORS mode. Omitting it causes the file to be fetched twice, which is worse than not preloading at all.

How SlapMyWeb checks this

The audit reports which resources the browser discovered late relative to when it needed them — typically fonts referenced from CSS and hero images inserted by script — and whether a preload exists for them. It also flags preloads that go unused, because a hint for something the page never requests is wasted bandwidth and a sign the hint is wrong rather than merely early.