Preconnect for Third-Party Origins
Learn how to use preconnect to establish early connections to third-party origins like CDNs, font servers, and analytics services for faster resource loading.
Detailed Explanation
Preconnect for Third-Party Origins
<link rel="preconnect"> tells the browser to proactively establish a connection to an origin server before the browser actually needs to make a request. This eliminates three potentially slow network steps: DNS resolution, TCP handshake, and TLS negotiation.
How Connection Establishment Works
When the browser needs a resource from a third-party origin, it must perform several steps before the first byte of data can arrive:
- DNS resolution — translate the domain name to an IP address (~20-120ms)
- TCP handshake — establish a reliable connection (~1 RTT, often 20-100ms)
- TLS negotiation — establish encryption for HTTPS (~1-2 RTTs, often 40-200ms)
On a typical connection, these steps add 100-400ms of latency before any data transfer begins. Preconnect performs all three steps in advance.
<!-- Preconnect to Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin="anonymous" />
<!-- Preconnect to a CDN -->
<link rel="preconnect" href="https://cdn.example.com"
crossorigin="anonymous" />
<!-- Preconnect to an analytics service -->
<link rel="preconnect" href="https://www.google-analytics.com" />
When crossorigin Is Required
Add crossorigin="anonymous" when the origin serves resources that require CORS (fonts, fetch API requests, etc.). Without it, the browser establishes a separate connection for CORS requests, negating the benefit of the preconnect.
Best Practices
- Limit to 2-4 origins — each preconnect consumes CPU and keeps a connection open; too many can actually slow down page load
- Only preconnect to origins you will use within ~10 seconds — unused connections waste resources and are closed by the browser
- Place preconnect tags early in
<head>— before any stylesheets or scripts that might block rendering - Use origin only, not full URLs —
href="https://cdn.example.com"nothref="https://cdn.example.com/path/file.js"
Preconnect vs dns-prefetch
Preconnect performs DNS + TCP + TLS, while dns-prefetch performs only DNS resolution. Use preconnect when you know you will use the origin soon; use dns-prefetch for less critical origins or as a fallback for browsers that do not support preconnect.
Use Case
A news website that loads fonts from Google Fonts, images from a CDN, and analytics from a third-party service uses preconnect to all three origins in the <head> section. This saves 200-400ms per origin, significantly improving Time to First Paint and LCP.