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 Standard
# link-type-preconnect

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

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