Glossary
Preconnect
`<link rel="preconnect">` tells the browser to complete the connection setup for another origin before any resource from it is requested: the DNS lookup, the TCP handshake and the TLS handshake. On a connection with meaningful latency that is three round trips removed from the critical path. It fetches nothing, so it helps only where a resource from that origin is genuinely needed soon.
What it removes from the critical path
The DNS lookup for the origin, which on a cold resolution can be 20 to 120 milliseconds.
The TCP handshake, one round trip.
The TLS handshake, one round trip on TLS 1.3 and two on TLS 1.2.
Together these can be 200 to 500 milliseconds on a mobile connection, paid before a single byte of the resource has been requested.
`crossorigin` is required when the origin will serve fonts or other anonymous-mode requests, because a connection opened in the wrong mode cannot be reused.
Where it is worth using
A font provider, when fonts are loaded from a third-party origin and are on the critical rendering path.
An image or media origin different from the document's, when a hero image comes from it.
An API origin that the page queries immediately on load.
It is not worth using for an origin whose first resource is requested several seconds in, by which time the connection would have been established anyway.
Why using it widely backfires
Each connection consumes memory and file descriptors on the client, and the browser limits how many it will keep open.
Browsers close unused preconnected sockets after roughly ten seconds, so a connection opened too early is wasted work.
Declaring many preconnects makes the browser open several connections at once, competing for the same bandwidth during the most latency-sensitive phase of the load.
The practical guidance is a small number — two or three origins that genuinely matter.
`dns-prefetch` is the cheaper alternative for origins that matter less: it resolves the name only, and browsers commonly ignore preconnects beyond a small limit while still honouring DNS prefetch hints.
How to verify it is helping
In the network panel, compare a request's connection phases with and without the hint. A working preconnect shows no DNS or connection time on the resource itself.
Look at when the connection is established relative to when it is first used. A gap of more than a few seconds means it was opened too early.
Reducing the number of third-party origins is a larger improvement than preconnecting to all of them, and the two should be considered together.
Self-hosting fonts removes the origin entirely, which is better than any hint about connecting to it.
Frequently asked questions
- What is the difference between preconnect and dns-prefetch?
- Preconnect completes DNS, TCP and TLS setup. dns-prefetch resolves the name only, which is cheaper and helps less.
- How many preconnects should a page have?
- Two or three at most. Each consumes client resources, and browsers close unused connections after about ten seconds.
- Why does my font preconnect need crossorigin?
- Font requests are made in anonymous mode. A connection opened without crossorigin cannot be reused for them, so the setup is paid twice.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website