Preconnect
preconnect establishes early connections (DNS/TLS) to a third-party origin, reducing latency. Use it for only a few critical origins.
Definition
Preconnect is a resource hint (`<link rel='preconnect'>`) that establishes early connections to an origin (DNS, TCP, TLS). It reduces latency for later requests, but should be used sparingly for critical third-party origins.
Why it matters
- Reduces connection latency for third-party resources
- Can improve above-the-fold performance and LCP
- Useful for fonts/CDNs/analytics when critical
How to implement
- Use preconnect only for the most critical third-party origins
- Pair with dns-prefetch as a lower-cost hint
- Avoid adding many preconnects (wastes resources)
Examples
html
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />FAQ
Common questions about this term.