The cost of a fresh connection
Before a browser can download from a new origin, it must look up the address, open a connection, and negotiate a secure channel. This setup can take several round trips. Preconnect is a resource hint that tells the browser to do this handshake early, so when the real request fires the connection is already warm.
- A preconnect hint names an origin you will soon request from.
- The browser starts the lookup and handshake immediately.
- The actual download then skips that setup time.
Choosing the right hint
There is a family of hints, and each does a different amount of work.
- dns prefetch resolves only the address, the cheapest hint.
- preconnect resolves the address and also opens the connection.
- preload fetches a specific known resource you need soon.
Using it well
- Preconnect only to a few critical origins, since each open connection costs resources.
- Use it for things like a font host or an analytics endpoint on the critical path.
- Pair preconnect with preload when you know the exact file.
Key idea
Preconnect warms the lookup and handshake to a critical origin ahead of time so the real request avoids paying the connection setup cost.