Preconnect

Preconnect is a small instruction you put in a web page's HTML to make it load faster. When a browser needs a file from another origin — a font provider, an analytics host, an image CDN — it first has to set up a connection to that origin, and that setup is not free. It involves a DNS lookup to find the server's address, a TCP handshake to open the connection, and, for secure sites, a TLS negotiation to encrypt it. Those steps happen before a single byte of the actual file transfers, and over a slow network they add real delay. A preconnect hint, written as a link element with rel set to preconnect and pointing at the origin, tells the browser to do all that setup early — in the background, before the file is actually requested. By the time the page needs the resource, the connection is already warm, so the request goes out immediately instead of waiting on handshakes.

The point is to remove waiting from the critical path. On any modern page, some of the most important resources live on other origins, and the connection setup to reach them can stall rendering at exactly the wrong moment. Preconnect lets you spend that setup time in parallel with other work the browser is doing anyway, so it is finished and out of the way before it would otherwise block progress. It is a resource hint, meaning it advises the browser rather than commanding it — the browser may honor it or, under pressure, ignore it — but used on the right origins it can meaningfully cut the time to first render or to a key resource. It is a targeted optimization: it does not fetch anything, it just prepares the pipe so that when the fetch happens, no time is lost establishing the connection.

Preconnect is one of a family of resource hints, and it is easy to mix up with its siblings, so pin down the differences. Preconnect only opens a connection to an origin — it warms the pipe but fetches nothing. Preload is different: it tells the browser to fetch a specific resource that the current page will definitely need soon, such as a critical font or a hero image, and fetch it with high priority so it is ready when required. Prefetch is different again: it fetches a resource the browser will probably need for a future navigation — a file for the next page the user is likely to visit — and does so at low priority, using idle time, on the bet that it pays off later. So the axis is what and when: preconnect prepares a connection now, preload fetches a needed file for this page now, and prefetch fetches a likely file for a later page speculatively.

There is also dns-prefetch, a lighter cousin of preconnect that performs only the DNS lookup rather than the full connection, useful as a cheaper hint for origins you are less certain about. Choosing among them comes down to intent. Reach for preconnect when you know you will hit an origin soon but do not yet know or want to name the exact file — a font host you will request from, a CDN you will pull several assets from. Reach for preload when there is a specific, render-critical file on this page you want fetched early. Reach for prefetch when you can reasonably predict the next navigation and want its resources ready. Using the wrong hint wastes effort at best and can hurt at worst, which is why understanding what each one actually does is the whole game.

Use preconnect surgically, on the handful of important third-party origins your page reaches early and definitely, such as a font provider or a critical CDN. Because a preconnect opens a full connection — DNS, TCP, and TLS — each one consumes resources, so a page that preconnects to a dozen origins can crowd out the connections it actually needs and end up slower, not faster. Reserve the hint for origins on the critical path where the saved setup time genuinely matters, and measure the effect rather than assuming it. For secure cross-origin fonts specifically, remember that fonts have particular fetching rules, so preconnect for fonts often needs the crossorigin attribute to be effective. And pair the right hint with the right job: preconnect to warm a pipe, preload for a specific critical file, prefetch for a likely next page, dns-prefetch as a cheaper fallback.

The failures are mostly overuse and misuse. Sprinkling preconnect across many origins — the reflex of "more hints must be faster" — backfires, because each open connection competes for limited resources and the browser may drop or delay the ones you care about; a few well-chosen hints beat a scattershot list. Preconnecting to an origin the page never actually uses simply wastes a connection. Confusing preconnect with preload leaves a critical file unfetched when you thought you had prioritized it, since preconnect never fetches anything. And forgetting the crossorigin requirement can make a font preconnect silently useless. The discipline is restraint and precision: identify the few origins where early connection setup is on the critical path, hint exactly those, use the correct attributes, measure the result, and let preload and prefetch handle the jobs preconnect was never meant to do.

Preconnect — a resource hint written as a link element — opens an early connection to a key origin, completing DNS, TCP, and TLS ahead of time, distinct from preload and prefetch which fetch files.

Etymology: source.

Search interest for this term over the last five years:

View interest-over-time on Google Trends →

Areas of marketing where preconnect is a core concern: