Contact

What is Preconnect?

Definition

Preconnect is a resource hint, written as a link element with rel="preconnect", that tells the browser to set up a connection to another origin in advance: DNS lookup, TCP handshake and, for HTTPS, TLS negotiation. When the first request to that origin arrives, the handshake is already done. It only helps cross-origin requests and should be limited to a few critical origins, because unused connections are closed quickly.

Also known as: rel=preconnect, link preconnect, connection warm-up

Published
Comparison of a third-party request with and without a preconnect hint that sets up DNS, TCP and TLS ahead of time

The hidden cost of a new origin

Before the browser can request anything from a new hostname, it has to resolve the name through DNS, open a TCP connection and complete the TLS handshake. That can take up to three round trips, and on high-latency mobile networks the total easily runs into hundreds of milliseconds. web.dev reports savings of 100–500 ms from establishing early connections to important third-party origins.

Without a hint, that setup only starts once the browser realises it needs something from the origin, which can be late if the font is referenced from CSS or the image URL comes back in an API response. Preconnect moves the handshake to the start of the page load, even before the exact file is known.

Markup, including the crossorigin catch

<!-- image CDN: regular requests -->
<link rel="preconnect" href="https://img.example-cdn.com">

<!-- font host: fonts are fetched in CORS mode -->
<link rel="preconnect" href="https://fonts.example-cdn.com" crossorigin>

<!-- less critical origin: DNS only -->
<link rel="dns-prefetch" href="https://analytics.example.com">

Resources requested in anonymous CORS mode, fonts included, use a separate connection pool. Leave crossorigin off the font-host preconnect and the warmed-up connection can't be used for the font request. The hint also works as an HTTP header, Link: <https://img.example-cdn.com>; rel=preconnect, which doesn't depend on the HTML being parsed first.

If you add dns-prefetch as a fallback for older browsers, use two separate tags. According to web.dev, combining both values in one rel attribute triggers a Safari bug that cancels the preconnect.

Where it doesn't help, or hurts

  • Same origin. The connection to your own domain is already open, so there is nothing to gain.
  • Origins used late. Browsers close a connection that isn't used within about 10 seconds. Preconnecting to a chat widget that loads after user interaction pays the setup cost twice.
  • Too many hints. Each connection costs CPU and network capacity; opening ten at once can delay the requests that matter. Reserve preconnect for the few critical origins and use lightweight dns-prefetch for the rest.
  • A known URL. If you know exactly which file you need, preload opens the connection and fetches the file in one step.

Picking good candidates

Open the Network panel and look at which third-party origins are contacted in the first second or two. The ones needed for the first view, such as the font host, the CDN serving the LCP image or the API that fills the main content, are good candidates. Analytics, ads and widgets that load later usually aren't. After the change, confirm in the waterfall that the DNS, connect and TLS phases now happen before the request instead of in front of it.

Related terms

← Back to the glossary