Introduction
Every external resource — fonts, scripts, images, API endpoints — requires a network connection. The overhead of DNS resolution, TCP handshake, and TLS negotiation can add hundreds of milliseconds to page load time. Resource hints like dns-prefetch and preconnect let you tell the browser to perform these steps in advance, before the resource is actually needed.
The Cost of Connection
Establishing an HTTPS connection involves multiple round trips:
| Step | Latency (approx.) |
|---|---|
| DNS lookup | 20-120 ms |
| TCP handshake | 1 RTT |
| TLS negotiation | 2 RTT |
| Total | 3+ RTT |
On a 3G connection (300ms RTT), that’s nearly 1 second of overhead before any data is transferred. Resource hints eliminate most of this.
dns-prefetch
dns-prefetch resolves a domain name ahead of time:
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
This initiates the DNS lookup for the domain while the browser is still parsing the HTML. By the time the browser encounters a resource from that origin, the IP address is already cached.
When to use: Simply referencing external domains. It’s lightweight — only DNS resolution, no connections opened.
preconnect
preconnect goes further: it performs DNS lookup + TCP handshake + TLS negotiation:
<link rel="preconnect" href="https://api.example.com" crossorigin>
The crossorigin attribute is required for resources loaded with CORS mode (fonts, fetch requests, etc.).
When to use: Critical third-party origins that the page needs as soon as possible — web font providers, analytics endpoints, CDNs.
Preconnect vs. Prefetch / Preload
These hints serve different purposes:
| Hint | Action | Use Case |
|---|---|---|
dns-prefetch | Resolves DNS only | Low priority origins |
preconnect | DNS + TCP + TLS | Critical third-party origins |
prefetch | Downloads + caches resource | Future navigation |
preload | Downloads current-page resource | Critical assets for current page |
Think of the hierarchy: dns-prefetch is cheapest, preconnect costs more but saves more, preload actually downloads the resource.
Practical HTML Examples
Web Fonts (most common use case)
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
Third-Party APIs
<link rel="preconnect" href="https://api.example.com" crossorigin>
Analytics and CDN
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
Cloudflare and TTFB Considerations
If you use Cloudflare or similar CDN, resource hints are still valuable. Even though Cloudflare provides a fast edge, the first connection from a new user still requires DNS and TLS. Adding preconnect reduces TTFB (Time to First Byte) by eliminating connection setup time.
To measure impact:
<!-- Before optimization -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<!-- After optimization -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Measuring Impact with Lighthouse
Lighthouse audits for resource hints under “Preconnect to required origins”. Open Chrome DevTools → Lighthouse → Run audit. Look for:
- Opportunity: Preconnect to required origins
- Estimated savings: Up to several hundred milliseconds
You can also manually test using the Network panel with “Disable cache” enabled:
// Before vs. after — check connection timing
// Target: < 100ms connection time for preconnected origins
Best Practices
- Limit preconnect to 3-6 origins — each one opens a real socket
- Always add
crossoriginfor fonts and CORS resources - Don’t preconnect to your own origin — the browser already does this
- Layer dns-prefetch as a fallback for browsers that don’t support preconnect
- Audit regularly with Lighthouse after site changes
<!-- Fallback pattern: both hints for wide support -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
Conclusion
dns-prefetch and preconnect are low-effort, high-impact optimizations that reduce connection overhead for external resources. Use dns-prefetch as a lightweight hint for many origins, and reserve preconnect for the 3-6 most critical third-party origins. Combined with preload and proper caching, these hints can shave hundreds of milliseconds off your page load time.