rel="preconnect"
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thepreconnect keyword for therel attribute of the<link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).
<link rel="preconnect"> will provide a benefit to any future cross-origin HTTP request, navigation or subresource. It has no benefit on same-origin requests because the connection is already open.
If a page needs to make connections to many third-party domains, preconnecting them all can be counterproductive. The<link rel="preconnect"> hint is best used for only the most critical connections. For the others, just use<link rel="dns-prefetch"> to save time on the first step — the DNS lookup.
Examples
<link rel="preconnect" href="https://example.com" />You can also implement preconnect as an HTTPLink header, for example:
Link: <https://example.com>; rel="preconnect"Specifications
| Specification |
|---|
| HTML # link-type-preconnect |
Browser compatibility
See also
- Speculative loading for a comparison of
<link rel="preconnect">and other similar performance improvement features.