<zhead>

Link

preconnect

Learn how to use the preconnect rel link tag to improve your site.

The preconnect link relation type is used to instruct the browser to establish early connections before an HTTP request is actually made to the origin. This can include DNS lookups, TLS negotiations, and TCP handshakes, which can speed up the loading process by minimizing round-trip times.

Code Examples

<link rel="preconnect" href="https://example.com">
Preconnects to example.com, preparing the browser for resources that will be requested from this domain.
<link rel="preconnect">
Missing href attribute. Without specifying a domain to connect to, the preconnect hint is ineffective and ignored by the browser.

Recommendations

  • 01
    Use Sparingly
    While preconnect can speed up connections to critical resources, overuse can lead to unnecessary use of resources. Use it for only the most crucial connections.
  • 02
    Combine with DNS-Prefetch
    In cases where support for preconnect is not universal, consider using dns-prefetch as a fallback. dns-prefetch only performs DNS lookups, making it less powerful but more widely supported.

Related Documentation