Verwendung von dns-prefetch
DNS-prefetch ist ein Versuch, Domainnamen aufzulösen, bevor Ressourcen angefordert werden. Dies kann eine Datei sein, die später geladen wird, oder ein Linkziel, das ein Benutzer zu erreichen versucht.
Warum dns-prefetch verwenden?
Wenn ein Browser eine Ressource von einem (Drittanbieter-)Server anfordert, muss der Domainname dieses cross-origin in eine IP-Adresse aufgelöst werden, bevor der Browser die Anfrage stellen kann. Dieser Vorgang wird als DNS-Auflösung bezeichnet. Während DNS-Caching dazu beitragen kann, diese Latenz zu verringern, kann die DNS-Auflösung dennoch signifikante Verzögerungen bei Anfragen verursachen. Für Websites, die Verbindungen zu vielen Drittanbietern herstellen, kann diese Latenz die Ladeleistung erheblich beeinträchtigen.
dns-prefetch hilft Entwicklern, die Latenz der DNS-Auflösung zu überdecken. Das HTML <link>-Element bietet diese Funktionalität durch einen Wert des rel-Attributs von dns-prefetch. Die cross-origin-Domain wird dann im href-Attribut angegeben:
Syntax
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
Beispiele
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
<!-- and all other head elements -->
</head>
<body>
<!-- your page content -->
</body>
</html>
Sie sollten dns-prefetch-Hinweise jederzeit im <head>-Element platzieren, wenn Ihre Website Ressourcen auf cross-origin Domains referenziert, aber es gibt einige Dinge zu beachten.
Beste Praktiken
Es gibt drei Hauptpunkte, die Sie beachten sollten:
Erstens, dns-prefetch ist nur effektiv für DNS-Abfragen auf cross-origin Domains, daher sollten Sie vermeiden, es auf Ihre Website oder Domain zu verweisen. Dies liegt daran, dass die IP-Adresse Ihrer Website-Domain bereits aufgelöst wurde, wenn der Browser den Hinweis sieht.
Zweitens, es ist auch möglich, dns-prefetch (und andere Ressourcenhinweise) als HTTP-Header zu spezifizieren, indem das HTTP-Link-Feld verwendet wird:
Link: <https://fonts.googleapis.com/>; rel=dns-prefetch
Drittens, während dns-prefetch nur eine DNS-Abfrage durchführt, stellt preconnect eine Verbindung zu einem Server her. Dieser Prozess umfasst die DNS-Auflösung sowie das Herstellen der TCP-Verbindung und das Durchführen des TLS-Handshake, wenn eine Website über HTTPS bereitgestellt wird. Die Verwendung von preconnect bietet die Möglichkeit, die wahrgenommene Latenz von cross-origin Anfragen weiter zu reduzieren. Sie können es als HTTP-Header verwenden, indem Sie das HTTP-Link-Feld verwenden:
Link: <https://fonts.googleapis.com/>; rel=preconnect
oder über das HTML <link>-Element:
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />
Hinweis:
Wenn eine Seite Verbindungen zu vielen Drittanbieter-Domains herstellen muss, ist es kontraproduktiv, sie alle vorzubinden. Der preconnect-Hinweis ist am besten für die kritischsten Verbindungen geeignet. Für die anderen verwenden Sie einfach <link rel="dns-prefetch">, um Zeit beim ersten Schritt — der DNS-Abfrage — zu sparen.
Der Gedanke hinter der Kombination dieser Hinweise ist, dass die Unterstützung für dns-prefetch besser ist als die für preconnect. Browser, die preconnect nicht unterstützen, profitieren dennoch, indem sie auf dns-prefetch zurückgreifen. Da dies eine HTML-Funktion ist, ist sie sehr fehlertolerant. Wenn ein nicht unterstützender Browser auf einen dns-prefetch-Hinweis oder einen anderen Ressourcentipp stößt, wird Ihre Website nicht beschädigt. Sie erhalten lediglich nicht die Vorteile, die es bietet.
Einige Ressourcen wie Schriften werden im anonymen Modus geladen. In solchen Fällen sollten Sie das crossorigin-Attribut mit dem preconnect-Hinweis setzen. Wenn Sie es weglassen, führt der Browser nur die DNS-Abfrage durch.