Resource Hint
A resource hint is an instruction in HTML that gives the browser additional information about resources or network connections that may be needed soon.
Resource hints can help important work begin earlier.
Common Resource Hints
Common examples include:
preloadpreconnectdns-prefetchprefetch
They do different jobs and should not be treated interchangeably.
For example, preconnect can prepare a connection to another origin, while preload can identify a specific resource that will be needed during the current page load.
How It Works
Browsers already make decisions about which resources to discover and prioritize.
Resource hints give the browser additional information when important dependencies would otherwise be discovered late.
They can be useful for things such as:
- Critical fonts
- Hero images
- Important external origins
- Resources hidden behind CSS or JavaScript dependencies
Why It Matters
Late discovery can delay an important resource even if the resource itself is small.
A resource hint can sometimes move that request earlier in the loading sequence and shorten the critical rendering path.
Common Problems
Common problems include:
- Preloading too many resources
- Preloading resources that are never used
- Competing with more important browser requests
- Using hints without measuring their effect
- Trying to compensate for poor page structure with large numbers of hints
- Preloading an asset that could simply be made directly discoverable
How to Improve
Use resource hints sparingly.
Identify genuinely important resources that are discovered later than they should be, then choose the hint appropriate to that specific problem.
Measure before and after implementation.
The browser usually does not need help prioritizing every resource.