Verwendung von dns-prefetch

DNS-prefetch ist der Versuch, Domainnamen aufzulösen, bevor Ressourcen angefordert werden. Dies könnte eine später geladene Datei oder ein Linkziel sein, dem ein Benutzer zu folgen 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 Anforderung ausführen kann. Dieser Prozess ist als DNS-Auflösung bekannt. Während DNS-Caching helfen kann, diese Latenz zu verringern, kann die DNS-Auflösung erhebliche Latenz bei Anforderungen hinzufügen. 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 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 referenziert, aber es gibt einige Dinge zu beachten.

Beste Praktiken

Es gibt 3 Hauptpunkte, die zu beachten sind:

Erstens ist dns-prefetch nur für DNS-Abfragen auf Cross-Origin Domains effektiv, daher vermeiden Sie es, auf Ihre eigene Website oder Domain zu verweisen. Dies liegt daran, dass die IP hinter der Domain Ihrer Website bereits aufgelöst wurde, wenn der Browser den Hinweis sieht.

Zweitens ist es auch möglich, dns-prefetch (und andere Ressourcenhinweise) als HTTP-Header durch Verwendung des HTTP-Link-Felds anzugeben:

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 Website über HTTPS bereitgestellt wird. Die Verwendung von preconnect bietet die Möglichkeit, die wahrgenommene Latenzzeit von Cross-Origin-Anfragen weiter zu reduzieren. Sie können es als HTTP-Header durch das HTTP-Link-Feld 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 Voranstellen all dieser kontraproduktiv. Der preconnect-Hinweis eignet sich am besten nur für die kritischsten Verbindungen. Für die anderen verwenden Sie einfach <link rel="dns-prefetch">, um Zeit beim ersten Schritt — der DNS-Abfrage — zu sparen.

Die Logik hinter der Kombination dieser Hinweise liegt darin, dass die Unterstützung für dns-prefetch besser ist als die Unterstützung für preconnect. Browser, die preconnect nicht unterstützen, profitieren dennoch etwas, indem sie auf dns-prefetch zurückfallen. Da dies eine HTML-Funktion ist, ist sie sehr fehlertolerant. Wenn ein Browser, der nicht unterstützt wird, auf einen dns-prefetch-Hinweis trifft — oder einen anderen Ressourcenhinweis — geht Ihre Website nicht kaputt. Sie erhalten lediglich nicht die Vorteile, die es bietet.

Einige Ressourcen wie Schriftarten 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.

Siehe auch