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 Schlüsselwort preconnect für das rel Attribut des <link> Elements ist ein Hinweis für Browser, dass der Benutzer wahrscheinlich Ressourcen von der Herkunft der Zielressource benötigt. Daher kann der Browser das Benutzererlebnis wahrscheinlich verbessern, indem er präventiv eine Verbindung zu dieser Herkunft initiiert. Preconnect beschleunigt zukünftige Ladezeiten von einer bestimmten Herkunft, indem ein Teil oder das gesamte Handshake (DNS+TCP für HTTP und DNS+TCP+TLS für HTTPS Ursprünge) vorweggenommen wird.

<link rel="preconnect"> bietet Vorteile für künftige cross-origin HTTP-Anfragen, Navigationen oder Subressourcen. Es hat keinen Nutzen für same-origin Anfragen, da die Verbindung bereits offen ist.

Wenn eine Seite Verbindungen zu vielen Drittanbieterdomains herstellen muss, kann es kontraproduktiv sein, alle vorzuverbinden. Der <link rel="preconnect"> Hinweis ist am besten nur für die kritischsten Verbindungen zu verwenden. Für die anderen sollte stattdessen <link rel="dns-prefetch"> verwendet werden, um Zeit bei dem ersten Schritt zu sparen — der DNS-Abfrage.

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
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rel=preconnect

Legend

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

Full support
Full support
See implementation notes.

Siehe auch

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