Telling the browser the future
Resource hints let you fetch assets before the browser would discover them on its own. The right hint depends on whether the asset is needed now or soon.
- preload: fetch a resource needed for the current page at high priority, such as a hero font or above the fold image.
- prefetch: fetch a resource likely needed for a future navigation at low priority, stored in the cache.
- preconnect: open the connection to a third party origin early so the handshake is done.
- dns prefetch: resolve a domain name ahead of time.
Using them well
Preload fixes late discovery, where a font is only found after CSS parses. It raises priority so the asset arrives sooner without changing the path.
- Preload only critical assets, since everything urgent means nothing is.
- Prefetch next likely routes during idle time.
- Add a matching type and crossorigin for fonts so the fetch is reused.
Misused preload wastes bandwidth and competes with truly critical bytes, so measure the effect rather than hinting blindly.
Key idea
preload what the current page needs now and prefetch what the next navigation will need, but only for genuinely important assets.