rel="preconnect"
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das preconnect Schlüsselwort für das rel-Attribut des <link>-Elements ist ein Hinweis für Browser, dass Benutzer wahrscheinlich Ressourcen vom Zielursprung benötigen, und daher der Browser die Benutzererfahrung verbessern kann, indem er eine Verbindung zu diesem Ursprung vorzeitig initiiert. Durch Preconnect wird das Laden von einem bestimmten Ursprung beschleunigt, indem präventiv Teile oder der gesamte Handshake (DNS+TCP für HTTP und DNS+TCP+TLS für HTTPS-Ursprünge) durchgeführt werden.
<link rel="preconnect"> wird jedem zukünftigen Cross-Origin-HTTP-Request, jeder Navigation oder Subressource einen Vorteil bieten. Es hat keinen Vorteil bei gleichen Ursprungs-Anfragen, da die Verbindung bereits offen ist.
Wenn eine Seite Verbindungen zu vielen Drittanbieter-Domains herstellen muss, kann das Vorherverbinden aller kontraproduktiv sein. Der <link rel="preconnect">-Hinweis ist am besten nur für die kritischsten Verbindungen zu verwenden. Für die anderen verwenden Sie einfach <link rel="dns-prefetch">, um Zeit beim ersten Schritt — der DNS-Abfrage — zu sparen.
Beispiele
<link rel="preconnect" href="https://example.com" />
Sie können Preconnect auch als HTTP-Link-Header implementieren, zum Beispiel:
Link: <https://example.com>; rel="preconnect"
Spezifikationen
| Specification |
|---|
| HTML # link-type-preconnect |
Browser-Kompatibilität
Weitere Informationen
- Spekulatives Laden für einen Vergleich von
<link rel="preconnect">und anderen ähnlichen Leistungsverbesserungsfunktionen.