Resource hints are HTML elements or HTTP headers that help the browser prioritize and download assets earlier than it normally would. These instructions reduce the time browsers spend waiting for critical assets like fonts, CSS, or key images. By informing the browser about what is needed next, you can significantly improve Core Web Vitals and perceived page speed.
What are Resource Hints?
Resource hints are advanced loading instructions, typically placed in the <head> of a document or sent via HTTP Link headers. They allow developers to override the browser’s default speculative optimization rules. While browsers have built-in "preload scanners" to find obvious assets, they often miss resources hidden within external CSS files or JavaScript.
Hints assist the browser by resolving domain names, establishing server connections, or fetching files before the browser naturally discovers them in the HTML.
Why Resource Hints matter
Resource hints help you overcome sequential loading delays, where one file must be fully processed before the browser even knows it needs the next one. This is especially true for assets called via @import rules in CSS. Using these hints can lead to major metric gains:
- Faster Rendering: Preloading critical CSS or fonts directly impacts First Contentful Paint (FCP).
- Improved LCP: By preloading the Largest Contentful Paint image, the hero element displays sooner.
- Instant Navigations: Speculative prefetching makes subsequent pages feel like they load immediately.
- Reduced Latency: Preconnecting to third-party domains removes the millisecond-long handshakes required for DNS, TCP, and TLS negotiation.
- Measurable Gains: In some cases, preloading CSS files that were previously chained [can show content much earlier and improve First Contentful Paint by 1.5 seconds] (DebugBear).
Types of Resource Hints
Modern browsers support several types of hints, each serving a different stage of the connection and fetch process.
| Hint | Purpose | When to Use |
|---|---|---|
dns-prefetch |
Resolves a domain IP address. | For non-critical third-party domains or links highly likely to be clicked. |
preconnect |
Performs DNS, TCP, and TLS handshake. | For critical third-party origins like font CDNs or analytics. |
preload |
Forces early fetch for the current page. | For "late-discovered" critical assets like fonts, LCP images, or imported CSS. |
prefetch |
Fetches assets for the next page. | When you have high confidence a user will navigate to a specific subsequent page. |
prerender |
Fetches and executes a future page. | For the most likely next navigation (e.g., a "Next" button in a flow). |
How Resource Hints work
Most hints are implemented as <link> tags with a rel attribute specifying the hint type.
- Declaration: You add a tag like
<link rel="preload" href="font.woff2" as="font">to your HTML. - Discovery: The browser’s preload scanner sees this early in the document before it even starts parsing the rest of the code.
- Action: The browser initiates the request immediately, even if it hasn't found a CSS rule or script that uses the file yet.
- Priority: Each hint carries a different default priority.
preloadis high priority, whileprefetchuses idle time to minimize impact on the current page.
The Fetch Priority API
You can further control loading with the fetchpriority attribute on <img>, <link>, and <script> tags. This tells the browser whether a specific resource is high or low priority relative to others of the same type. For example, setting fetchpriority="high" on an LCP image ensures the browser downloads it during the first phase of loading rather than waiting for a layout check.
Best practices
Limit preloads to critical assets. Only preload resources that are necessary for the initial rendering of the page. Overusing high-priority hints can cause "contention," where the browser spends bandwidth on less important files while delaying the critical ones.
Use dns-prefetch as a fallback. Because DNS lookups are inexpensive and [only send a few hundred bytes over the network] (Luis Vieira), they are a safe alternative when you have too many third-party origins to preconnect to at once.
Always use the as attribute for preloads. This helps the browser prioritize the request correctly and sends appropriate Accept headers. If the as value does not match the actual resource type, the browser will likely download the file twice.
Manage CORS correctly. For resources that use Cross-Origin Resource Sharing (CORS)—most notably web fonts—you must include the crossorigin attribute in your hint. Failing to do so for fonts will cause a double download.
Common mistakes
Mistake: Preloading everything.
Fix: Only use preload for late-discovered resources that appear above the fold. Downloading every asset early starvates the main thread and stalls rendering.
Mistake: Using preload for resources needed later.
Fix: If you preload a file that isn't used within a few seconds, [Chrome issues a warning] (DebugBear) in the console that the resource was preloaded but not used. Use prefetch for these cases instead.
Mistake: Forgetting Safari's limitations. Fix: Note that as of the corpus date, [Safari does not support the prefetch hint] (DebugBear). Ensure your site functions correctly without the hint as a baseline.
Mistake: Preloading resources with sequential @import.
Fix: Do not rely on @import within CSS files. Browsers cannot see these imports until the parent CSS is downloaded. Preload these nested CSS files in the HTML to load them in parallel.
Preload vs. Prefetch
| Feature | Preload | Prefetch |
|---|---|---|
| Priority | High | Low (Speculative) |
| Scope | Current Page | Future Navigation |
| Goal | Improve FCP/LCP | Speed up the next click |
| Mandatory? | Mandatory fetch | Optional/Speculative |
FAQ
What does the preconnect resource hint do?
It opens a connection to a cross-origin server. This includes the DNS lookup, TCP handshake, and TLS negotiation. It allows the browser to perform these steps ahead of time so the connection is already "warm" when the actual resource request is made.
When should you use the prefetch hint?
Use it when you have high confidence that a user will need a resource or page in the near future. Examples include the next page in a paginated gallery or the dashboard code for a user on a login page.
What is the pr attribute in resource hints?
It stands for hint probability. It allows you to indicate a value between 0.0 and 1.0 representing how likely it is the resource will be needed. Browsers on resource-constrained devices may use this to decide whether or not to execute the hint.
How does prerender differ from prefetch?
While prefetch just downloads a resource and stores it in the cache, prerender actually fetches the page and executes its scripts in a hidden background tab. This provides an "instant" experience but uses significantly more CPU and memory.
Can I inject resource hints with JavaScript?
Yes. You can create a <link> element via document.createElement, set the rel and href attributes, and append it to the <head>. This is useful for "reactive prefetching," such as prefetching a page when a user hovers over a link.
