Hier erfahren Sie mehr über die Ressourcenhinweise „rel=preconnect“ und „rel=dns-prefetch“ und wie Sie sie verwenden.
Bevor der Browser eine Ressource von einem Server anfordern kann, muss er eine Verbindung herstellen. Das Herstellen einer sicheren Verbindung umfasst drei Schritte:
Suchen Sie den Domainnamen und lösen Sie ihn in eine IP-Adresse auf.
Stellen Sie eine Verbindung zum Server her.
Verschlüsseln Sie die Verbindung, um sie zu schützen.
Bei jedem dieser Schritte sendet der Browser Daten an einen Server und der Server sendet eine Antwort zurück. Diese Reise vom Start- zum Zielort und zurück wird als Hin- und Rückflug bezeichnet.
Je nach Netzwerkbedingungen kann eine einzelne Umlaufzeit viel Zeit in Anspruch nehmen. Für die Einrichtung der Verbindung sind möglicherweise bis zu drei Roundtrips erforderlich – in nicht optimierten Fällen auch mehr.
Wenn Sie sich rechtzeitig darum kümmern, fühlen sich Anwendungen viel schneller an. In diesem Beitrag wird erläutert, wie Sie das mit zwei Ressourcenhinweisen erreichen können: <link rel=preconnect> und <link rel=dns-prefetch>.
Frühzeitig Kontakt zu rel=preconnect aufnehmen
Moderne Browser versuchen, vorherzusagen, welche Verbindungen eine Seite benötigt, können aber nicht alle zuverlässig vorhersagen. Die gute Nachricht ist, dass Sie ihnen einen Hinweis (auf eine Ressource 😉) geben können.
Wenn Sie rel=preconnect zu einem <link> hinzufügen, wird dem Browser mitgeteilt, dass Ihre Seite eine Verbindung zu einer anderen Domain herstellen möchte und dass der Vorgang so schnell wie möglich gestartet werden soll. Ressourcen werden schneller geladen, da die Einrichtung bereits abgeschlossen ist, wenn der Browser sie anfordert.
Ressourcenhinweise haben ihren Namen, weil sie keine obligatorischen Anweisungen sind. Sie geben an, was passieren soll, aber es liegt letztendlich am Browser, ob er sie ausführt. Das Einrichten und Aufrechterhalten einer Verbindung ist mit viel Aufwand verbunden. Daher kann der Browser je nach Situation Ressourcenhinweise ignorieren oder nur teilweise ausführen.
Sie müssen dem Browser nur ein <link>-Tag auf Ihrer Seite hinzufügen, um ihn über Ihre Absicht zu informieren:
<link rel="preconnect" href="https://example.com">
Wenn Sie frühzeitig Verbindungen zu wichtigen Drittanbieterursprüngen herstellen, können Sie die Ladezeit um 100 bis 500 ms verkürzen. Diese Zahlen mögen klein erscheinen, aber sie machen einen Unterschied in der Wahrnehmung der Webseitenleistung durch Nutzer.
Anwendungsfälle für rel=preconnect
Sie wissen woher, aber nicht was Sie abrufen.
Aufgrund von Versionsabhängigkeiten kann es vorkommen, dass Sie eine Ressource von einem bestimmten CDN anfordern, aber nicht den genauen Pfad dafür kennen.
Ein weiterer häufiger Fall ist das Laden von Bildern aus einem Image-CDN, bei dem der genaue Pfad für ein Bild von Media-Anfragen oder Laufzeit-Funktionsprüfungen im Browser des Nutzers abhängt.
Wenn die abzurufende Ressource wichtig ist, sollten Sie in diesen Fällen so viel Zeit wie möglich sparen, indem Sie eine Vorabverbindung zum Server herstellen. Der Browser lädt die Datei erst herunter, wenn sie von Ihrer Seite angefordert wird. Er kann aber zumindest die Verbindungsaspekte vorab erledigen, sodass der Nutzer nicht auf mehrere Roundtrips warten muss.
Streaming Media
Ein weiteres Beispiel, bei dem Sie in der Verbindungsphase Zeit sparen möchten, aber nicht unbedingt sofort mit dem Abrufen von Inhalten beginnen müssen, ist das Streamen von Medien von einem anderen Ursprung.
Je nachdem, wie Ihre Seite die gestreamten Inhalte verarbeitet, sollten Sie möglicherweise warten, bis Ihre Skripts geladen wurden und bereit sind, den Stream zu verarbeiten. Durch die Vorabverbindung wird die Wartezeit auf einen einzigen Roundtrip verkürzt, sobald Sie mit dem Abrufen beginnen.
rel=preconnect implementieren
Eine Möglichkeit, eine preconnect zu initiieren, besteht darin, dem <head> des Dokuments ein <link>-Tag hinzuzufügen.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Das Vorabverbinden ist nur für andere Domains als die Ursprungsdomain wirksam. Sie sollten es also nicht für Ihre Website verwenden.
Sie können auch eine Preconnect-Verbindung über den Link-HTTP-Header initiieren:
Link: <https://example.com/>; rel=preconnect
Einige Arten von Ressourcen, z. B. Schriftarten, werden im anonymen Modus geladen. Für diese müssen Sie das Attribut crossorigin mit dem Hinweis preconnect festlegen:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Wenn Sie das Attribut crossorigin weglassen, führt der Browser nur den DNS-Lookup aus.
Domainnamen frühzeitig mit rel=dns-prefetch auflösen
Sie merken sich Websites anhand ihrer Namen, Server hingegen anhand ihrer IP-Adressen. Deshalb gibt es das Domain Name System (DNS). Der Browser verwendet DNS, um den Websitenamen in eine IP-Adresse umzuwandeln. Dieser Vorgang, die Domainnamensauflösung, ist der erste Schritt beim Herstellen einer Verbindung.
Wenn eine Seite Verbindungen zu vielen Drittanbieterdomains herstellen muss, ist es kontraproduktiv, alle vorab zu verbinden. Der Hinweis preconnect sollte nur für die wichtigsten Verbindungen verwendet werden. Für alle anderen verwenden Sie <link rel=dns-prefetch>, um Zeit beim ersten Schritt, dem DNS-Lookup, zu sparen, der normalerweise etwa 20–120 ms dauert.
Die DNS-Auflösung wird ähnlich wie bei preconnect initiiert: durch Hinzufügen eines <link>-Tags zum <head> des Dokuments.
<link rel="dns-prefetch" href="http://example.com">
Die Browserunterstützung für dns-prefetch unterscheidet sich geringfügig von der preconnect-Unterstützung. Daher kann dns-prefetch als Fallback für Browser dienen, die preconnect nicht unterstützen.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch-Fallback im selben <link>-Tag führt zu einem Fehler in Safari, bei dem preconnect abgebrochen wird.
Auswirkung auf Largest Contentful Paint (LCP)
Durch die Verwendung von dns-prefetch und preconnect kann die Zeit verkürzt werden, die zum Herstellen einer Verbindung zu einem anderen Ursprung erforderlich ist. Das Ziel ist, die Ladezeit einer Ressource von einem anderen Ursprung so weit wie möglich zu minimieren.
Beim Largest Contentful Paint (LCP) ist es besser, wenn Ressourcen sofort auffindbar sind, da LCP-Kandidaten wichtige Bestandteile der Nutzerfreundlichkeit sind. Ein fetchpriority-Wert von "high" für LCP-Ressourcen kann dies weiter verbessern, da er dem Browser die Wichtigkeit dieses Assets signalisiert, damit er es frühzeitig abrufen kann.
Wenn es nicht möglich ist, LCP-Assets sofort sichtbar zu machen, kann der Browser die Ressource mithilfe eines preload-Links mit dem fetchpriority-Wert "high" so schnell wie möglich laden.
Wenn keine dieser Optionen verfügbar ist, weil die genaue Ressource erst später beim Seitenaufbau bekannt ist, können Sie preconnect für ursprungsübergreifende Ressourcen verwenden, um die Auswirkungen der späten Ermittlung der Ressource so weit wie möglich zu reduzieren.
Außerdem ist preconnect in Bezug auf die Bandbreitennutzung günstiger als preload, aber dennoch nicht ohne Risiken. Wie bei übermäßigen preload-Hinweisen verbrauchen übermäßige preconnect-Hinweise immer noch Bandbreite, wenn es um TLS-Zertifikate geht. Stellen Sie nicht zu viele Vorabverbindungen zu Ursprüngen her, da dies zu Bandbreitenkonflikten führen kann.
Fazit
Diese beiden Ressourcenhinweise sind hilfreich, um die Seitengeschwindigkeit zu verbessern, wenn Sie wissen, dass Sie bald etwas von einer Drittanbieterdomain herunterladen werden, aber die genaue URL für die Ressource nicht kennen. Beispiele sind CDNs, über die JavaScript-Bibliotheken, Bilder oder Schriftarten verteilt werden. Achten Sie auf Einschränkungen, verwenden Sie preconnect nur für die wichtigsten Ressourcen, greifen Sie für den Rest auf dns-prefetch zurück und messen Sie immer die Auswirkungen in der Praxis.