Link

preconnect

Asks the browser to prepare a connection to an origin before the page requests a resource from it. This can cover DNS, transport, and TLS setup.

Code examples

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

Prepares an anonymous cross-origin connection to a CDN used early by the page.

<link rel="preconnect">

Has no href, so it gives the browser no origin to connect to.

01
Use only for critical origins
An unused connection costs sockets, CPU time, and network traffic. Reserve preconnect for origins the page will use soon.
02
Match the credentials mode
For resources fetched with anonymous CORS, such as cross-origin fonts, add crossorigin so the prepared connection can be reused.