rel="preconnect" HTML-Attributwert
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Das preconnect-Schlüsselwort für das rel Attribut des <link> Elements ist ein Hinweis für Browser, dass der Benutzer wahrscheinlich Ressourcen vom Ursprung der Zielressource benötigt. Daher kann der Browser die Benutzererfahrung voraussichtlich verbessern, indem er vorab eine Verbindung zu diesem Ursprung herstellt. Das Vorabverbinden beschleunigt zukünftige Ladevorgänge von einem gegebenen Ursprung, indem es proaktiv einen Teil oder den gesamten Handshake (DNS+TCP für HTTP und DNS+TCP+TLS für HTTPS-Ursprünge) durchführt.
<link rel="preconnect"> bietet Vorteile für jede zukünftige Cross-Origin-HTTP-Anfrage, Navigation oder Unterressource. Es hat keinen Nutzen für Same-Origin-Anfragen, da die Verbindung bereits geöffnet ist.
Falls eine Seite Verbindungen zu vielen Drittanbieter-Domänen herstellen muss, kann das Vorabverbinden von allen kontraproduktiv sein. Der <link rel="preconnect">-Hinweis wird am besten nur für die kritischsten Verbindungen verwendet. Für die anderen verwenden Sie einfach <link rel="dns-prefetch">, um Zeit beim ersten Schritt zu sparen — beim DNS-Lookup.
Beispiele
<link rel="preconnect" href="https://example.com" />
Sie können Vorabverbinden auch als HTTP- Link Header implementieren, zum Beispiel:
Link: <https://example.com>; rel="preconnect"
Spezifikationen
| Spezifikation |
|---|
| HTML # link-type-preconnect |
Browser-Kompatibilität
Siehe auch
- Spekulatives Laden für einen Vergleich von
<link rel="preconnect">und anderen ähnlichen Leistungsverbesserungsfunktionen.