Preconnect is a resource hint that tells a browser to start establishing a connection to a remote server before the page needs to download resources from it. This proactive step helps reduce the time spent on connection handshakes, making the website feel faster to users.
What is Preconnect?
Preconnect is a keyword for the rel attribute of the <link> element. It serves as a hint to the browser that the user is likely to need assets from a specific third-party domain, such as a CDN or a font provider. When implemented, the browser preemptively begins the connection process, which involves looking up the domain name, setting up a TCP connection, and negotiating a secure TLS connection.
Because setting up these connections can take hundreds of milliseconds on slow networks, doing them early can [speed up future loads from that origin by 100 to 500 ms] (web.dev).
Why Preconnect matters
Establishing a secure connection requires multiple "round trips" between the browser and the server. If this happens only when the browser discovers a critical resource (like a font or CSS file), the page load stalls while waiting for the connection.
- Faster Perceived Performance: By finishing the connection work early, resources can begin downloading immediately when they are discovered.
- Improved Performance Metrics: Implementation has been shown to [improve Time-to-Interactive by 37 percent] (Splunk) and can [improve initial rendering performance by roughly 10 percent] (Splunk).
- Better Key Paint Times: Some online stores have [improved key paint metrics by 500 ms to over 1 second] (Splunk) by preconnecting to their image catalogs.
- Low Bandwidth Cost: While it uses CPU time, preconnect is "cheap" because it primarily involves waiting for signals rather than downloading large amounts of data.
How Preconnect works
When a browser encounters a preconnect hint, it attempts to complete the following three steps: 1. DNS Lookup: Resolving the domain name (e.g., example.com) into an IP address. 2. TCP Handshake: Establishing a connection to the server. 3. TLS Negotiation: Encrypting the connection for security if the origin uses HTTPS.
If the resource is discovered later in the page load, these steps are already finished, allowing the browser to skip the wait and download the file right away.
Best practices
- Limit the number of origins: Browsers have limits on how many active connections they can maintain. Focus on the 6 to 8 most critical third-party domains.
- Use for cross-origin only: Never preconnect to your own domain. The connection to your site is already open because the browser is currently loading the page from it.
- Include the crossorigin attribute for fonts: Some resources, such as fonts, are loaded in anonymous mode. You must use
<link rel="preconnect" href="https://example.com" crossorigin>for these, or the browser may only perform the DNS lookup. - Test the impact: Use synthetic monitoring tools to compare performance before and after adding the hints.
Common mistakes
Mistake: Preconnecting to too many domains.
This can waste CPU time and bandwidth, potentially slowing down the browser's ability to make other necessary connections.
Fix: Use preconnect only for critical origins and use dns-prefetch for less important ones.
Mistake: Preconnecting to a domain and not using it immediately. Browsers are designed to be efficient. If the connection is [not used within 10 seconds, the browser closes it] (Chrome for Developers), wasting the work done. Fix: Verify that a request is actually sent to the domain within that 10-second window.
Mistake: Combining multiple hints in one tag for Safari.
Safari only allows one resource hint per rel attribute. If you write rel="preconnect dns-prefetch", Safari may skip the tag entirely.
Fix: Use separate link tags for each hint.
Examples
HTML implementation
Place this in the <head> of your document to start a connection to a font provider:
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
HTTP Header implementation
You can also send the hint via your server's Link header:
Link: <https://example.com>; rel="preconnect"
React implementation
In a React environment, you can use the preconnect function from react-dom within a component or an event handler:
preconnect("https://example.com");
Preconnect vs dns-prefetch
| Feature | Preconnect | DNS-Prefetch |
|---|---|---|
| Action | DNS + TCP + TLS | DNS only |
| Speed Gain | High (handles full handshake) | Low (handles initial step) |
| Resource Cost | Higher (uses CPU and connection slots) | Very Low |
| Best Use | Most critical third-party origins | All secondary third-party origins |
| Browser Support | Modern browsers (since Jan 2020) | Widest support (fallback option) |
FAQ
Does preconnect guarantee a faster site? No. It is a hint, not a command. The browser may choose to ignore it if it is busy with more important tasks or if have you provided too many hints.
What happens if I forget the crossorigin attribute?
For resources like fonts, omitting the crossorigin attribute means the browser will only perform the DNS lookup. The TCP and TLS steps will be skipped, reducing the performance benefit.
When should I use preconnect instead of preload?
Use preload when you know the exact URL of a file (like main.css). Use preconnect when you know the domain you are connecting to, but not the exact file path, such as when using a versioned CDN or a dynamic image service.
Can preconnect hurt my SEO? Indirectly, yes, if misused. If you preconnect to too many domains or unused origins, you may waste the user's CPU and bandwidth, leading to a slower experience and lower performance scores in tools like Lighthouse.
Is preconnect supported on mobile? Yes, it is well established and available across most modern mobile devices and browser versions.
