Preload important resources carefully

preload is a hint. It tells the browser about a resource the page will need soon, before the browser would discover it on its own:

<link rel="preload" href="/hero.webp" as="image">

The as attribute matters. It tells the browser what kind of resource this is, which decides the request priority, the headers sent, and the policy checks applied. Without it, the browser may download the file twice: once for the preload and once for the real use.

Fonts and some cross-origin resources also need crossorigin, otherwise the same double download happens:

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

When preload helps

Preload is useful when normal discovery is late. The classic case is a font. The browser finds the font URL only inside a CSS file, so it can’t start the download until the stylesheet has arrived and been parsed. A preload moves that download to the start.

Another case is an image referenced from CSS as a background-image, or a resource hidden behind a script.

Preload does not make a big file cheap. It does not fix a slow server. It only changes when the browser learns about the resource.

When preload hurts

Preload only what the current page will use soon. Every preload competes for bandwidth with other work. Preload ten things and you’ve slowed down the ones that mattered.

A preloaded resource the page never uses is pure waste. Chrome warns you about it in the Console a few seconds after load: “The resource was preloaded using link preload but not used within a few seconds from the window’s load event”. Treat that warning as a reason to remove the hint.

Measure first

Before adding a hint, open the Network panel and look at the request order. Is the resource really discovered late? Then add one preload, reload with the same throttling, and compare the start time of that resource and what the visitor sees.

Often a change in markup is the better fix. If the hero image is inserted by JavaScript, writing it in the HTML makes the parser discover it early, no hint needed.

Try this on your own project: find one late-discovered critical resource and explain why changing the markup might beat adding a preload.