Weitere Informationen zu Ressourcenhinweisen zu rel=preconnect und rel=dns-prefetch und ihrer Verwendung.
Bevor der Browser eine Ressource von einem Server anfordern kann, muss er eine Verbindung herstellen. Zum Herstellen einer sicheren Verbindung sind drei Schritte erforderlich:
Ermitteln Sie den Domainnamen und lösen Sie ihn in eine IP-Adresse auf.
Richten Sie eine Verbindung zum Server ein.
Verschlüssele die Verbindung aus Sicherheitsgründen.
Bei jedem dieser Schritte sendet der Browser ein Datenelement an einen Server und der Server sendet eine Antwort zurück. Diese Reise vom Start zum Ziel und zurück wird als Hin- und Rückflug bezeichnet.
Je nach Netzwerkbedingungen kann ein einzelner Umlauf sehr viel Zeit in Anspruch nehmen. Für die Einrichtung der Verbindung können bis zu drei Umläufe erforderlich sein. In nicht optimierten Fällen sind es noch mehr.
Wenn du dich frühzeitig um diese Dinge kümmern kannst, fühlst du dich bei Anwendungen viel schneller. In diesem Beitrag wird anhand der folgenden zwei Ressourcenhinweise erläutert, wie Sie dies erreichen können: <link rel=preconnect> und <link rel=dns-prefetch>.
Frühzeitig Verbindungen zu rel=preconnect aufbauen
Moderne Browser versuchen bestmöglich, vorauszusehen, welche Verbindungen eine Seite benötigt, aber sie können nicht alle zuverlässig vorhersagen. Die gute Nachricht ist, dass du ihnen einen Hinweis geben kannst (Ressource 😉).
Wenn Sie rel=preconnect zu einer <link> hinzufügen, wird der Browser darüber informiert, dass Ihre Seite eine Verbindung zu einer anderen Domain herstellen möchte und dass der Vorgang so bald wie möglich gestartet werden soll. Ressourcen werden schneller geladen, da die Einrichtung zu dem Zeitpunkt, zu dem sie vom Browser angefordert wird, bereits abgeschlossen ist.
Ressourcenhinweise erhalten ihren Namen, da es sich dabei nicht um obligatorische Anweisungen handelt. Sie liefern die gewünschten Informationen darüber, was ausgeführt werden soll, aber die Entscheidung liegt letztendlich beim Browser. Das Einrichten und Aufrechterhalten einer Verbindung ist aufwendig und daher kann der Browser Ressourcenhinweise ignorieren oder sie je nach Situation nur teilweise ausführen.
Um den Browser darüber zu informieren, ist es ganz einfach, deiner Seite ein <link>-Tag hinzuzufügen:
<link rel="preconnect" href="https://example.com">
Sie können die Ladezeit um 100–500 ms verkürzen, indem Sie frühzeitige Verbindungen zu wichtigen Drittanbieterursprüngen herstellen. Diese Zahlen mögen klein erscheinen, wirken sich aber darauf aus, wie Nutzer die Leistung von Webseiten wahrnehmen.
Anwendungsfälle für rel=preconnect
Du weißt, woher gerade ist, aber nicht was du abrufst
Aufgrund von versionierten Abhängigkeiten kommt es manchmal zu der Gewissheit, dass Sie eine Ressource von einem bestimmten CDN anfordern, aber nicht den genauen Pfad dafür.
Im anderen häufigen Fall werden Bilder aus einem Bild-CDN geladen. Dabei hängt der genaue Pfad für ein Bild von Medienabfragen oder Laufzeitprüfungen im Browser des Nutzers ab.
Ist die abzurufende Ressource in diesen Situationen wichtig, sollten Sie vor dem Herstellen einer Verbindung zum Server so viel Zeit wie möglich sparen. Der Browser lädt die Datei erst herunter, wenn Ihre Seite sie anfordert, er kann aber zumindest vorab Verbindungsprobleme verarbeiten, sodass der Nutzer nicht mehrere Umläufe abwarten muss.
Streaming von Medien
Ein weiteres Beispiel, bei dem Sie in der Verbindungsphase Zeit sparen, 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 den gestreamten Inhalt verarbeitet, können Sie warten, bis Ihre Skripts geladen wurden und bereit sind, den Stream zu verarbeiten. Durch Vorabverbindung können Sie die Wartezeit auf einen einzelnen Hin- und Rückflug verkürzen, sobald Sie mit dem Abrufen beginnen können.
rel=preconnect implementieren
Eine Möglichkeit, einen preconnect zu initiieren, besteht darin, dem <head> des Dokuments ein <link>-Tag hinzuzufügen.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Das Vorverbinden funktioniert nur für Domains mit Ausnahme der Ursprungsdomain und sollte daher nicht für Ihre Website verwendet werden.
Sie können eine Vorverbindung auch über den Link-HTTP-Header initiieren:
Link: <https://example.com/>; rel=preconnect
Einige Ressourcentypen, etwa Schriftarten, werden im anonymen Modus geladen. Bei diesen 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 durch.
Domainnamen mit rel=dns-prefetch frühzeitig auflösen
Sie merken sich Websites anhand ihrer Namen, aber Server merken sie sich anhand ihrer IP-Adressen. Aus diesem Grund gibt es das Domain Name System (DNS). Der Browser verwendet das DNS, um den Websitenamen in eine IP-Adresse umzuwandeln. Dieser Prozess – die Auflösung von Domainnamen – 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 preconnect-Hinweis eignet sich am besten nur für die kritischsten Verbindungen. Für den Rest können Sie <link rel=dns-prefetch> verwenden, um beim ersten Schritt, dem DNS-Lookup, Zeit zu sparen, der in der Regel 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, sodass dns-prefetch als Fallback für Browser dienen kann, die preconnect nicht unterstützen.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">Verwenden Sie separate Link-Tags, um das Fallback-Verfahren sicher zu implementieren.
<link rel="preconnect dns-prefetch" href="http://example.com">Die Implementierung des
dns-prefetch-Fallbacks in dasselbe <link>-Tag führt in Safari zu einem Fehler, bei dem preconnect abgebrochen wird.
Auswirkung auf Largest Contentful Paint (LCP)
Mit dns-prefetch und preconnect können Websites die Zeit verkürzen, die für die Verbindung mit einem anderen Ursprung benötigt wird. Das Ziel besteht darin, die Zeit zum Laden einer Ressource aus einem anderen Ursprung so weit wie möglich zu minimieren.
Bei Largest Contentful Paint (LCP) ist es besser, dass Ressourcen sofort gefunden werden, da LCP-Kandidaten entscheidende Aspekte der Nutzerfreundlichkeit sind. Ein fetchpriority-Wert von "high" für LCP-Ressourcen kann dies weiter verbessern, indem dem Browser signalisiert wird, wie wichtig dieses Asset ist, damit es frühzeitig abgerufen werden kann.
Wenn es nicht möglich ist, LCP-Assets sofort zu finden, kann der Browser die Ressource über einen preload-Link (auch mit dem fetchpriority-Wert "high") weiterhin so schnell wie möglich laden.
Wenn keine dieser Optionen verfügbar ist, da die genaue Ressource erst später beim Seitenaufbau bekannt ist, können Sie preconnect für ursprungsübergreifende Ressourcen verwenden, um die Auswirkungen der verspäteten Erkennung der Ressource so weit wie möglich zu reduzieren.
Außerdem ist preconnect in Bezug auf die Bandbreitennutzung günstiger als preload, setzt aber gleichzeitig auch die damit verbundenen Risiken ein. Wie bei übermäßig vielen preload-Hinweisen wird auch bei übermäßig vielen preconnect-Hinweisen bei TLS-Zertifikaten Bandbreite verbraucht. Achten Sie darauf, nicht mit zu vielen Ursprüngen eine Vorverbindung herzustellen, da dies zu Bandbreitenkonflikten führen kann.
Fazit
Diese beiden Hinweise auf Ressourcen sind hilfreich, um die Seitengeschwindigkeit zu verbessern, wenn Sie wissen, dass Sie bald etwas von einer Drittanbieter-Domain herunterladen, aber die genaue URL der Ressource noch nicht kennen. Beispiele hierfür sind CDNs, die JavaScript-Bibliotheken, Bilder oder Schriftarten verteilen. Berücksichtigen Sie die Beschränkungen, verwenden Sie preconnect nur für die wichtigsten Ressourcen, verlassen Sie sich für den Rest auf dns-prefetch und messen Sie die Auswirkungen immer in der realen Welt.