Preload is a resource hint that tells the browser to download a critical file early, before it would normally find that file while parsing the page. You add it with a link rel="preload" tag in the HTML head. The browser fetches and caches the file straight away, then uses it only when the page needs it.
How does preload work?
Normally a browser discovers resources step by step: it downloads the HTML, parses it, finds the , downloads that, and only then learns about a font referenced inside the CSS. Preload short-circuits that chain by flagging the file as high priority up front. Unlike , preload is not optional, so the browser downloads the resource regardless of network conditions. That makes it suitable only for genuinely critical files.
When should you use preload?
Preload helps most for critical resources the browser finds late.
| Resource | Why preload helps |
|---|---|
| Web fonts in CSS | Skips the HTML, then CSS, then font discovery chain |
| LCP hero image | Starts the largest visible image downloading sooner |
| Critical CSS loaded via JavaScript | Removes the wait for the script to run first |
Resources already in the initial HTML rarely need it, since the browser finds them quickly anyway.
How do you add a preload hint?
Put the hint in the document head with the file URL and an as attribute that tells the browser the resource type:
link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin
The as value sets the correct priority and caching behavior.
How does preload affect Core Web Vitals?
Preloading the LCP image or a critical font can lower , because the file starts downloading earlier. Used carelessly it backfires: preloading too many files competes for bandwidth and can delay more important downloads. Keep it to a few truly critical resources. For the wider set of fixes that move , see our ecommerce site speed best practices, and you can check your own scores with our ecommerce speed test.
