Obwohl jedermanns Ziel darin besteht, das Budget für die Web-Performance zu reduzieren, ist es dennoch notwendig, Dienste von Drittanbietern zu nutzen. Bei der Nutzung dieser Dienste wird der "DNS-Suche"-Zeiten können je nach Anzahl der Dienste einen erheblichen Teil des Budgets verschlingen. Diese Belastungen wirken sich auf verschiedene Aspekte der Seitengeschwindigkeit aus, einschließlich First Contentful Paint (FCP).
Der Zweck dieser beiden Konzepte besteht darin, die Verbindungszeiten von Drittanbietern zu optimieren. Bevor wir die Unterschiede zwischen diesen beiden Konzepten verstehen, müssen wir verstehen, was genau passiert, wenn eine Drittanbieteranforderung gestellt wird:
- Die Domäne wird aufgelöst, um eine IP-Adresse zu erhalten.
- Es wird eine Verbindung zum Server hergestellt.
- Zur Gewährleistung der Sicherheit ist die Verbindung verschlüsselt.
Diese Hierarchie wird für jede Drittanbieterverbindung wiederholt. Hier kommt der Unterschied zwischen Preconnect und DNS-Prefetch ins Spiel.
- Vorab verbinden: Stellt sicher, dass alle drei oben genannten Schritte vorkonfiguriert sind.
- DNS-Prefetch: Dient lediglich dazu im ersten Schritt den Domänennamen in eine IP-Adresse umzuwandeln.
Wie Sie sehen, ist Preconnect umfassender und vorteilhafter. Allerdings hat alles seinen Preis. Die Verwendung von Preconnect für alle Ihre Verbindungen kann sich negativ auf die Optimierung Ihrer Seite auswirken. DaherSie sollten Preconnect nur für kritische Verbindungen verwenden und DNS-Prefetch für alle anderen Verbindungen von Drittanbietern..
Zusammenfassung der Nutzung
Vor dem Hintergrund der oben genannten Informationen folgt hier eine kurze Zusammenfassung ihrer Verwendung:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">Browser-Kompatibilität
Bei der Diskussion ihrer Verwendung ist es auch wichtig, die Browserkompatibilität zu erwähnen. Diese beiden eng verwandten Konzepte werden von modernen Browsern weitgehend unterstützt, ihre Verwendung überschneidet sich jedoch nicht vollständig. Preconnect wird von etwa 97 % der Browser unterstützt, während DNS-Prefetch wird von 83 % der Browser unterstützt (Stand: Juni 2024).
Beitrag zum Web-Performance-Budget
- Preconnect kann eine Gesamtgeschwindigkeitsverbesserung von 100-500ms.
- DNS-Prefetch kann jede Verbindung beschleunigen durch 20-120ms.
Wir planen, eigene Tests durchzuführen, um zufriedenstellendere lokale Beispiele bereitzustellen.
Abschließend möchte ich Ceyhun Enki Aksans Blog empfehlen und würdigen, der bei der Erstellung dieses Artikels sehr zu meinem Verständnis beigetragen hat: Ceyhun Enki Aksans Blog.
