Verwendung von dns-prefetch

DNS-prefetch ist der Versuch, Domain-Namen aufzulösen, bevor Ressourcen angefordert werden. Dies könnte eine später geladene Datei oder ein Linkziel sein, dem ein Benutzer folgen möchte.

Warum dns-prefetch verwenden?

Wenn ein Browser eine Ressource von einem (Drittanbieter-)Server anfordert, muss der Domain-Name des Cross-Origin zu einer IP-Adresse aufgelöst werden, bevor der Browser die Anforderung stellen kann. Dieser Vorgang wird als DNS-Auflösung bezeichnet. Während DNS-Caching helfen kann, diese Latenz zu reduzieren, kann die DNS-Auflösung erhebliche Latenz zu Anfragen hinzufügen. Für Websites, die Verbindungen zu vielen Drittanbietern herstellen, kann diese Latenz die Ladeleistung erheblich reduzieren.

dns-prefetch hilft Entwicklern, die Latenz der DNS-Auflösung zu maskieren. 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

html
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

Beispiele

html
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <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 verweist, aber es gibt einige Dinge zu beachten.

Best Practices

Es gibt drei Hauptsachen zu beachten:

Erstens, dns-prefetch ist nur für DNS-Abfragen auf Cross-Origin-Domains wirksam, daher sollten Sie es vermeiden, es auf Ihre eigene Website oder Domain zu richten. Der Grund dafür ist, dass die IP hinter der Domain Ihrer Website bereits aufgelöst sein wird, wenn der Browser den Hinweis sieht.

Zweitens, es ist auch möglich, dns-prefetch (und andere Ressourcenhinweise) als HTTP-Header mittels des HTTP Link-Feldes zu spezifizieren:

http
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 die Herstellung der TCP-Verbindung und das Durchführen des TLS-Handshakes—wenn eine Seite ü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 mithilfe des HTTP Link-Feldes verwenden:

http
Link: <https://fonts.googleapis.com/>; rel=preconnect

oder über das HTML <link>-Element:

html
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />

Hinweis: Wenn eine Seite Verbindungen zu vielen Drittanbieter-Domains herstellen muss, ist das Voranschließen aller kontraproduktiv. Der preconnect-Hinweis wird am besten nur für die kritischsten Verbindungen verwendet. Für die anderen verwenden Sie einfach <link rel="dns-prefetch">, um Zeit beim ersten Schritt zu sparen—der DNS-Abfrage.

Die Logik hinter dem Paaren dieser Hinweise ist, dass die Unterstützung für dns-prefetch besser ist als die Unterstützung für preconnect. Browser, die preconnect nicht unterstützen, bekommen trotzdem einen gewissen Vorteil, indem sie auf dns-prefetch zurückfallen. Da dies eine HTML-Funktion ist, ist sie sehr fehlertolerant. Wenn ein Browser, der die Funktion nicht unterstützt, auf einen dns-prefetch-Hinweis—oder einen anderen Ressourcenhinweis—stößt, wird Ihre Seite nicht unterbrochen. Sie erhalten nur 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, wird der Browser nur die DNS-Abfrage durchführen.

Siehe auch