Resource Hint
Problem
Browsers wait until they parse HTML to discover which resources to load, wasting precious milliseconds. DNS lookups and connection handshakes for third-party domains happen at render-time instead of proactively. Resources that will definitely be needed sit idle while the browser slowly discovers dependencies. Network waterfalls show avoidable gaps and sequential loading.
Solution
Provide hints to browsers about resources to prefetch, preconnect, or preload. This optimizes the critical rendering path by preparing for likely future requests.
Example
This example shows various resource hints that help browsers optimize loading by establishing connections and fetching resources proactively.
<head>
<!-- Establish connection to API domain early (includes TLS handshake) -->
<link rel="preconnect" href="https://api.example.com">
<!-- Resolve DNS for analytics domain (lighter than preconnect) -->
<link rel="dns-prefetch" href="https://analytics.example.com">
<!-- Prefetch next page's JavaScript during idle time -->
<link rel="prefetch" href="/next-page.js">
</head>Benefits
- Reduces latency by performing DNS lookups and connections proactively.
- Optimizes the critical rendering path by loading resources earlier.
- Improves perceived performance with faster resource availability.
- Utilizes idle browser time to prepare for likely future requests.
Tradeoffs
- Can waste bandwidth if prefetched resources aren’t actually used.
- May delay higher-priority resources if hints are overused.
- Requires careful analysis to determine which resources to hint.
- Different hint types have varying browser support and behaviors.