Quelltext der Seite Prefetching

<seo title="Was ist Prefetching? Definition und Erklärung" metadescription="Prefetching bezeichnet das Laden einer Ressource, bevor der Nutzer diese anfordert. Jetzt weiterlesen…" />
 
== Definition ==

Prefetching bezeichnet das Laden einer Ressource, bevor der Nutzer diese anfordert. Webentwickler können damit angeben, welche Ressourcen mit hoher Wahrscheinlichkeit als nächstes benötigt werden. Diese werden dann im Voraus geladen, was zur Optimierung des [[Pagespeed|Page Speeds]] und der [[User Experience|User Experience]] beiträgt.

Prefetching konzentriert sich auf Ressourcen, die in naher Zukunft – zum Beispiel auf der nächsten Seite – benötigt werden. Bei richtiger Anwendung kann Prefetching die User Experience auf einer Website verbessern, jedoch verbraucht es auch Rechenleistung und sollte daher sparsam eingesetzt werden. 

== Wofür wird Prefetching verwendet? ==

Prefetching wird verwendet, um die Ladezeiten von Webseiten und anderen Online-Ressourcen zu verbessern. Es wird eingesetzt, um dem Browser mitzuteilen, welche Daten er wahrscheinlich in der Zukunft benötigen wird. So kann er diese bereits vorab laden.

Während Prefetching die Ladegeschwindigkeit der nächsten Seite beschleunigen kann, könnte es den Ladevorgang der aktuellen Seite jedoch verlangsamen, wenn es falsch implementiert wird.

Einige Beispiele für die Verwendung von Prefetch-Ressourcenhinweisen sind:

* Prefetching der nächsten Seite/Ressourcen in einem Funnel – Sales Funnels sind bestimmte Teile einer Website, die den Kaufprozess über verschiedene Seiten abdecken. Prefetching kann diesen Vorgang beschleunigen, da die nächste(n) Seite(n) geladen werden kann/können, bevor sich der Nutzer durchklickt.
* Prefetching der Seite(n)/Ressource(n) nach der Anmeldeseite – Wenn ein Nutzer zur Anmeldeseite navigiert, wird er sich sehr wahrscheinlich mit seinem Konto anmelden. Durch das Abrufen der auf der nächsten Seite benötigten Ressourcen wird sichergestellt, dass diese schneller geladen werden.
* Prefetching wichtiger Dokumente – Wenn auf der aktuellen Seite wichtige Dokumente verlinkt sind, kann ein Prefetch-Ressourcenhinweis die Ladezeit nach dem Anklicken verkürzen.
 
== Link-Prefetching ==

Beim Link-Prefetching wird versucht vorherzusagen, auf welche Links ein Nutzer klicken wird. Der Browser ruft diese Seiten dann automatisch vorher ab, wodurch die Ladezeit der nächsten Seite verbessert wird.

Bei einer hohen [[CTR (Click-Through-Rate)|Click-Through-Rate]] kann Link-Prefetching überaus effektiv sein. Wenn eine Seite jedoch keine hohe Click-Through-Rate hat oder es viele Links auf einer Seite gibt, ist Link-Prefetching weniger wirksam.

=== Syntax ===

<pre><link rel="prefetch" href="/images/big.jpeg"></pre>

== DNS-Prefetching ==

Beim DNS-Prefetching wird eine [[DNS-Server|DNS-Suche]] durchgeführt, bevor der Nutzer auf einen Link klickt. Indem der DNS-Lookup vor der Anforderung der Ressource abgeschlossen wird, kann hierbei die Wartezeit reduziert werden.
Genau wie bei anderen Formen des Prefetching werden beim DNS-Prefetching begrenzte Kapazitäten genutzt. Daher ist es auch hier wichtig, sich genau zu überlegen, für welche Links Prefetching eingesetzt werden soll.

=== Syntax ===

<pre><html>
  <head>
    <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
    <!-- and all other head elements -->
  </head>
  <body>
    <!-- your page content -->
  </body>
</html></pre>

== Cache-Prefetching ==

Beim Cache-Prefetching werden Daten oder Anweisungen im Vornherein abgerufen und in einen lokaleren und leichter zugänglichen Cache verschoben, z. B. auf einem Server. Da der Cache schneller und leichter zugänglich ist als der Hauptspeicher, wird die Ladezeit der Daten oder Ressourcen reduziert.

== Welche Ressourcen nimmt Prefetching in Anspruch? ==

Prefetching kann Webentwicklern dabei helfen, die Seitenleistung zu optimieren, jedoch erfordert es auch Ressourcen. Verschwendete Prefetch-Anfragen erhöhen folglich die Ladezeit für die aktuelle Seite.
Zu den Ressourcen, die Prefetching beansprucht, gehören:

* Rechenleistung
* Netzwerkbandbreite
* Serverbandbreite
* Cache-Speicher
 
== Browser-Kompatibilität ==

Prefetch ist mit den meisten gängigen Browsern kompatibel, darunter:

* Google Chrome
* Mozilla Firefox
* Microsoft Edge
* Internet Explorer
* Android-Browser
* Opera
 
== Der Unterschied zwischen Prefetching und Preloading ==

Obwohl es sich bei beiden um beliebte Ressourcenhinweise handelt, gibt es einen wichtigen Unterschied zwischen Prefetch und [[Preloading|Preload]]. Prefetch konzentriert sich auf das Laden von Daten, die wahrscheinlich für die zukünftige Navigation (z.B. die als nächstes abgerufene Seite) benötigt werden. 

Preload hingegen wird für Ressourcen auf der aktuellen Seite verwendet, wobei diese Ressourcen gegenüber anderen priorisiert werden. Preload wird oft für wichtige Ressourcen eingesetzt, die erst spät im HTML-Code der Seite auftauchen. Vom Browser werden Preload-Ressourcen demnach gegenüber Prefetch-Ressourcen priorisiert behandelt. 

== Bedeutung für SEO und Marketing ==

Das Prefetch-Attribut ist ein wichtiges Werkzeug der Page Speed Optimierung. Es ermöglicht Webentwicklern und SEOs, eine detailliertere Ladelogik vorzugeben. So kann sichergestellt werden, dass der Browser Ressourcen so effizient wie möglich lädt.

Die Seitenladegeschwindigkeit wiederum hat einen erheblichen Einfluss auf die User Experience und ist zudem ein wichtiger Ranking-Faktor für [[Suchmaschine|Suchmaschinen]].
 
== Weiterführende Links ==

* https://www.seo-suedwest.de/6738-google-prefetching-per-signed-exchanges-kann-ladezeit-verbessern.html
* https://www.omt.de/suchmaschinenoptimierung/pagespeedoptimierung-mittels-ressourcenpriorisierung/

== Ähnliche Artikel ==

* [[Pagespeed]]
* [[DNS-Server]]

[[Kategorie:Web Entwicklung]]

{| class="wikitable" style="text-align:left"
|-
|'''Über den Autor'''
|-
| [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. <html><a href="https://www.seobility.net/de/wiki/Seobility_Wiki_Team" target="_blank">Mehr Informationen über das Seobility Wiki Team</a></html>.
|}

<html><script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "author": {
    "@type": "Organization",
    "name": "Seobility",
    "url": "https://www.seobility.net/"
  }
}
</script></html>