Informationen zu Ressourcenhinweisen mit 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:
Suchen Sie den Domainnamen und lösen Sie ihn in eine IP-Adresse auf.
Richten Sie eine Verbindung zum Server ein.
Verschlüsseln Sie aus Sicherheitsgründen die Verbindung.
Bei jedem dieser Schritte sendet der Browser ein Datenelement an einen Server und dieser 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 Umweg sehr lange dauern. Die Verbindungseinrichtung kann bis zu drei Umläufe umfassen – und in nicht optimierten Fällen mehr.
Wenn Sie all das im Voraus berücksichtigen, fühlen sich Anwendungen viel schneller an. In diesem Beitrag wird erläutert, wie Sie dies mit zwei Ressourcenhinweisen erreichen: <link rel=preconnect> und <link rel=dns-prefetch>.
Frühzeitige Kontakte zu rel=preconnect aufbauen
Moderne Browser versuchen, vorherzusehen, welche Verbindungen eine Seite benötigt, aber sie können nicht alle zuverlässig einschätzen. Die gute Nachricht ist, dass du ihnen einen (Ressource 😉) Hinweis geben kannst.
Wenn du rel=preconnect zu einem <link> hinzufügst, wird der Browser darüber informiert, dass deine Seite eine Verbindung zu einer anderen Domain herstellen möchte und dass der Vorgang so schnell wie möglich starten soll. Ressourcen werden schneller geladen, da der Einrichtungsprozess bereits abgeschlossen ist, als der Browser sie anfordert.
Ressourcenhinweise erhalten ihren Namen, da es sich nicht um obligatorische Anweisungen handelt. Sie liefern die gewünschten Informationen, aber letztendlich entscheidet der Browser, ob er sie ausführt. Das Einrichten und Halten einer Verbindung ist sehr aufwändig. Daher kann es sein, dass der Browser je nach Situation Ressourcenhinweise ignoriert oder sie nur teilweise ausführt.
Sie können den Browser ganz einfach über Ihre Absichten informieren, indem Sie Ihrer Seite einfach ein <link>-Tag hinzufügen:
<link rel="preconnect" href="https://example.com">
Sie können die Ladezeit um 100 bis 500 ms verkürzen, indem Sie frühzeitig Verbindungen zu wichtigen Drittanbieterursprüngen herstellen. Diese Zahlen mögen zunächst klein erscheinen, aber sie beeinflussen, wie Nutzer die Webseitenleistung wahrnehmen.
Anwendungsfälle für rel=preconnect
Zu wissen, woher du kommst, aber nicht, woher du suchst
Aufgrund von versionierten Abhängigkeiten landen Sie manchmal in einer Situation, in der Sie wissen, dass Sie eine Ressource von einem bestimmten CDN anfordern, aber nicht den genauen Pfad dafür.
Ein anderer häufiger Fall ist das Laden von Bildern aus einem Bild-CDN, wobei der genaue Pfad für ein Bild von Medienabfragen oder Überprüfungen von Laufzeitfunktionen im Browser des Nutzers abhängt.
Wenn die abzurufende Ressource in diesen Situationen wichtig ist, möchten Sie so viel Zeit wie möglich sparen, indem Sie eine Vorverbindung zum Server herstellen. Der Browser lädt die Datei erst herunter, wenn Ihre Seite sie anfordert, aber zumindest kann er die Verbindungsaspekte im Voraus verarbeiten, sodass der Nutzer nicht erst mehrere Umläufe warten muss.
Streaming Media
Ein weiteres Beispiel, bei dem Sie in der Verbindungsphase etwas Zeit sparen, aber nicht unbedingt sofort mit dem Abrufen von Inhalten beginnen möchten, ist das Streamen von Medien von einer anderen Quelle.
Je nachdem, wie Ihre Seite den gestreamten Content verarbeitet, sollten Sie warten, bis Ihre Skripts geladen wurden und zur Verarbeitung des Streams bereit sind. Durch eine Vorverbindung können Sie die Wartezeit für einen einzelnen Hin- und Rückflug verkürzen, wenn Sie mit dem Abrufen beginnen möchten.
rel=preconnect implementieren
Eine Möglichkeit zum Initiieren eines preconnect besteht darin, ein <link>-Tag zum <head> des Dokuments hinzuzufügen.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Eine Vorverbindung kann nur für andere Domains als die ursprüngliche Domain hergestellt werden. Daher sollten Sie sie nicht für Ihre Website verwenden.
Sie können auch über den Link-HTTP-Header eine Vorverbindung herstellen:
Link: <https://example.com/>; rel=preconnect
Einige Ressourcentypen, 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 klären
Websites werden anhand ihrer Namen gespeichert, Server hingegen anhand der IP-Adresse. Aus diesem Grund gibt es das Domain Name System (DNS). Der Browser verwendet DNS, um den Namen der Website in eine IP-Adresse umzuwandeln. Dieser Prozess – die Auflösung des Domainnamens – ist der erste Schritt beim Herstellen einer Verbindung.
Wenn eine Seite Verbindungen zu vielen Drittanbieterdomains herstellen muss, ist es kontraproduktiv, diese vorab zu verbinden. Der preconnect-Hinweis wird am besten nur für die wichtigsten Verbindungen verwendet. Für den Rest verwenden Sie <link rel=dns-prefetch>, um beim ersten Schritt, dem DNS-Lookup, Zeit zu sparen. Dieser dauert in der Regel etwa 20–120 ms.
Die DNS-Auflösung wird ähnlich wie bei „preconnect“ eingeleitet: Dabei wird dem <head>-Element des Dokuments ein <link>-Tag hinzugefügt.
<link rel="dns-prefetch" href="http://example.com">
Die Browserunterstützung für dns-prefetch unterscheidet sich geringfügig von der preconnect-Unterstützung. dns-prefetch kann daher 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">Verwende separate Link-Tags, um die Fallback-Technik sicher zu implementieren.
<link rel="preconnect dns-prefetch" href="http://example.com">Die Implementierung des Fallbacks
dns-prefetch im selben <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 Verbindungszeit zu einem anderen Ursprung verkürzen. Das eigentliche Ziel besteht darin, die Zeit zum Laden einer Ressource von einem anderen Ursprung so weit wie möglich zu minimieren.
Bei Largest Contentful Paint (LCP) ist es besser, die Ressourcen sofort zu finden, da LCP-Kandidaten entscheidende Bestandteile der Nutzererfahrung sind. Ein fetchpriority-Wert von "high" für LCP-Ressourcen kann dies weiter verbessern, da dem Browser die Bedeutung dieses Assets signalisiert wird, damit es frühzeitig abgerufen werden kann.
Wenn LCP-Assets nicht sofort gefunden werden können, ermöglicht ein preload-Link (ebenfalls mit dem fetchpriority-Wert "high") dem Browser, die Ressource so schnell wie möglich zu 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 Erkennung 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 die Risiken. Ebenso wie bei einer übermäßigen Anzahl von preload-Hinweisen verbrauchen zu viele preconnect-Hinweise bei TLS-Zertifikaten immer noch Bandbreite. Achten Sie darauf, nicht zu viele Ursprünge vorab zu verbinden, 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 Drittanbieter-Domain herunterladen werden, aber die genaue URL für die Ressource nicht kennen. Beispiele hierfür sind CDNs, die JavaScript-Bibliotheken, Bilder oder Schriftarten verteilen. Achten Sie auf Einschränkungen, verwenden Sie preconnect nur für die wichtigsten Ressourcen, verwenden Sie für den Rest dns-prefetch und messen Sie immer die Auswirkungen in der realen Welt.