diff options
Diffstat (limited to 'files/de/web/performance/dns-prefetch/index.html')
| -rw-r--r-- | files/de/web/performance/dns-prefetch/index.html | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/files/de/web/performance/dns-prefetch/index.html b/files/de/web/performance/dns-prefetch/index.html new file mode 100644 index 0000000000..da853a85de --- /dev/null +++ b/files/de/web/performance/dns-prefetch/index.html @@ -0,0 +1,66 @@ +--- +title: Verwendung von dns-prefetch +slug: Web/Performance/dns-prefetch +translation_of: Web/Performance/dns-prefetch +--- +<p><span class="seoSummary"><code><strong>DNS-prefetch</strong></code></span> ist ein Versuch, Domainnamen aufzulösen, bevor Ressourcen angefordert werden. Dabei kann es sich um eine Datei handeln, die später geladen wird, oder um ein Linkziel, dem ein Benutzer zu folgen versucht.</p> + +<h2 id="Warum_sollte_man_dns-prefetch_benutzen">Warum sollte man dns-prefetch benutzen?</h2> + +<p>Wenn ein Browser eine Ressource von einem (Drittanbieter-)Server anfordert, muss der Domain-Name dieses anderen Ursprungs in eine IP-Adresse aufgelöst werden, bevor der Browser die Anfrage stellen kann. Dieser Vorgang wird als DNS-Auflösung bezeichnet. Während das DNS-Caching dazu beitragen kann, diese Latenzzeit zu verringern, kann die DNS-Auflösung die Latenzzeit bei Anfragen deutlich erhöhen. Bei Websites, die Verbindungen zu vielen Drittanbietern öffnen, kann diese Latenz das Laden erheblich verlangsamen.</p> + +<p><code>dns-prefetch</code> hilft Entwicklern, die Latenz der DNS-Auflösung zu überdecken. Das <a href="/en-US/docs/Web/HTML/Element/link">HTML <code><link></code> Element</a> bietet diese Funktionalität über einen <a href="/en-US/docs/Web/HTML/Attributes/rel"><code>rel</code> Attributwert</a> von <code>dns-prefetch</code>. Die <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a>-Domäne wird dann im <a href="/en-US/docs/Web/HTML/Attributes">href Attribut</a> angegeben:</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: html"><link rel="dns-prefetch" href="https://fonts.gstatic.com/" > +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: html"><html> + <head> + <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> + <!-- and all other head elements --> + </head> + <body> + <!-- your page content --> + </body> +</html></pre> + +<p>Sie sollten immer dann <code>dns-prefetch</code>-Hinweise im <a href="/en-US/docs/Web/HTML/Element/head"><code><head></code> Element</a> platzieren, wenn Ihre Website auf Ressourcen von <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a>-Domänen verweist, es gibt aber einige Dinge zu beachten.</p> + +<h2 id="Bewährte_Methoden">Bewährte Methoden</h2> + +<p id="Three_things_to_keep_in_mind">Es gibt 3 wichtige Dinge zu beachten:</p> + +<p><strong>Erstens </strong>ist <code>dns-prefetch</code> nur für DNS-Lookups auf <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a>-Domänen wirksam, also vermeiden Sie es für Verweise auf Ihre eigene Webseite oder Domäne zu benutzen. Hintergrund ist, dass die IP hinter der Domäne Ihrer Website bereits aufgelöst ist, wenn der Browser den Hinweis sieht.</p> + +<p><strong>Zweitens</strong> ist es auch möglich, <code>dns-prefetch</code> (und andere Ressourcen-Hinweise) als <a href="/en-US/docs/Web/HTTP/Headers">HTTP-Header</a> anzugeben, indem Sie das <a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP-Link-Feld</a> verwenden:</p> + +<pre class="brush: unix">Link: <https://fonts.gstatic.com/>; rel=dns-prefetch</pre> + +<p>Ziehen Sie es<strong> drittens </strong>in Betracht <code>dns-prefetch</code> mit dem <code>preconnect</code> Hinweis zu verwenden. Während <code>dns-prefetch</code> nur einen DNS lookup durchführt, stellt <code>preconnect</code> eine Verbindung zu einem Server her. Dieser Prozess umfasst sowohl die DNS-Auflösung als auch den Aufbau der TCP-Verbindung und die Durchführung des <a href="/en-US/docs/Glossary/TLS">TLS</a>-Handshakes, wenn eine Site über HTTPS ausgeliefert wird. Die Kombination dieser beiden Verfahren bietet die Möglichkeit, die wahrgenommene Latenzzeit von <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a>-Anfragen weiter zu reduzieren. Sie können sie auf folgende Weise sicher zusammen verwenden:</p> + +<pre class="brush: html"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> +<link rel="dns-prefetch" href="https://fonts.gstatic.com/"> +</pre> + +<div class="blockIndicator note"> +<p><strong>Hinweis:</strong> Wenn eine Seite Verbindungen zu vielen Drittanbieter-Domains herstellen muss, ist es kontraproduktiv, sie alle im Vorhinein zu verbinden. Der <code>preconnect</code> Hinweis wird am besten nur für die kritischsten Verbindungen verwendet. Für die anderen verwenden Sie einfach <code><link rel="dns-prefetch"></code> um Zeit beim ersten Schritt — dem DNS-Lookup — zu sparen.</p> +</div> + +<p>Die Logik hinter der Verknüpfung dieser Hinweise liegt darin, dass die Unterstützung für dns-prefetch weiter verbreitet ist, als die Unterstützung für preconnect. Browser, die preconnect nicht unterstützen, erhalten trotzdem einen zusätzlichen Vorteil, indem sie auf dns-prefetch zurückgreifen. Da es sich hierbei um eine HTML-Funktion handelt, ist sie sehr fehlertolerant. Wenn ein nicht-unterstützter Browser auf einen dns-prefetch-Hinweis—oder einen anderen Ressourcen-Hinweis—stößt, wird Ihre Website nicht beschädigt. Sie werden nur nicht die Vorteile erfahren, die sie bietet.</p> + +<p>Einige Ressourcen, wie z.B. Schriftarten, werden im anonymen Modus geladen. In solchen Fällen sollten Sie das <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a>-Attribut zusammen mit dem <code>preconnect</code>-Hinweis setzen. Wenn Sie es weglassen, führt der Browser nur den DNS-Lookup durch.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/link"><link></a></li> + <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML attribute: rel</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li> + <li><a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP header </a><a href="/en-US/docs/Web/HTTP/Headers/Link" title="The HTTP Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML <link> element.">Link</a></li> +</ul> |