<link rel="preconnect">
rel="preconnect" asks the browser to establish an early connection to another origin. It can reduce latency for critical third-party resources by warming DNS, TCP, and TLS work.
Overview
rel="preconnect" asks the browser to establish an early connection to another origin. It can reduce latency for critical third-party resources by warming DNS, TCP, and TLS work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
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
Powered by web-features