Widely available Useful for high-priority external origins that are certain to be needed soon.

<link rel="preconnect">

The preconnect keyword for the rel 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.

PerformanceNetworkingResource hints

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.link.rel.preconnect
46
79
39
11.1
46
11.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Before Firefox 41, it doesn't obey the `crossorigin` attribute.

Syntax

HTML 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Live demo

Preconnect timing

Show how preconnect warms up a future origin before the real request starts.

PreviewFullscreen

Good candidates

List the kinds of origins that often benefit from preconnect.

PreviewFullscreen

Use sparingly

Explain why too many preconnect hints can waste connection setup work.

PreviewFullscreen

Use cases

  • Third-party font and asset hosts

    Reduce connection setup cost before the browser requests critical external resources.

  • Critical cross-origin APIs

    Warm known origins that support the initial route or immediate next interaction.

Cautions

  • Preconnecting to many origins can waste resources and dilute the benefit.
  • It should be reserved for truly important origins rather than every third-party host on the site.

Accessibility

  • Faster resource startup can help reduce page instability and waiting, which benefits all users.

Related links