Preconnect is a resource hint, <link rel="preconnect" href="https://example.com">, that makes the browser perform the DNS lookup, TCP handshake and TLS negotiation for another origin ahead of time, so the first real request can go straight out.
Why it matters
Connecting to a new HTTPS origin costs several round trips before a single byte of content flows. On a 100 ms round-trip connection that is easily 200 to 300 ms. For critical third-party resources such as a font host, an API or an image CDN, preconnect hides that setup time behind other work.
Example
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://analytics.example.com">dns-prefetch does only the DNS step and is a cheaper fallback for less important origins. The crossorigin attribute is needed when the resource will be fetched in CORS mode, such as fonts.
Common mistakes
- Preconnecting to many origins. Idle connections are closed after a short time and each one costs CPU and sockets. Two to four is a common ceiling.
- Omitting
crossoriginfor fonts, which opens a connection that is not reused. - Preconnecting to an origin the page does not use soon.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.