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.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

Das preconnect Schlüsselwort für das rel-Attribut des <link> Elements ist ein Hinweis für Browser, dass die Nutzerin oder der Nutzer wahrscheinlich Ressourcen von der Herkunftsquelle des Ziels benötigt. Daher kann der Browser die Benutzererfahrung wahrscheinlich durch das vorzeitige Initiieren einer Verbindung zu dieser Quelle verbessern. Vorabverbinden beschleunigt zukünftige Ladeprozesse von einem bestimmten Ursprung, indem es Teile oder alle des Handshakes (DNS+TCP für HTTP, und DNS+TCP+TLS für HTTPS Ursprünge) vorab durchführt.

<link rel="preconnect"> bietet einen Vorteil für jede zukünftige Cross-Origin HTTP-Anfrage, Navigation oder Unterressource. Es hat keinen Vorteil bei gleichen Ursprungsanfragen, da die Verbindung bereits geöffnet ist.

Wenn eine Seite Verbindungen zu vielen Drittanbieter-Domains herstellen muss, kann das Vorabverbinden aller Domains kontraproduktiv sein. Der <link rel="preconnect"> Hinweis eignet sich am besten nur für die kritischsten Verbindungen. Für die anderen verwenden Sie einfach <link rel="dns-prefetch">, um Zeit beim ersten Schritt — der DNS-Abfrage — zu sparen.

Beispiele

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

Sie können Preconnect auch als HTTP Link Header implementieren, zum Beispiel:

http
Link: <https://example.com>; rel="preconnect"

Spezifikationen

Specification
HTML
# link-type-preconnect

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rel=preconnect

Tip: you can click/tap on a cell for more information.

Full support
See implementation notes.

Siehe auch

  • Spekulatives Laden für einen Vergleich von <link rel="preconnect"> und anderen ähnlichen Leistungsverbesserungsmerkmalen.