Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / kreuz-und-quer / tutorials-info-neuigkeiten-html / html5-link-prefetching.php

HTML5 Link Prefetching

Man sieht sie oft bei Suchergebissen oder allgemeiner bei Übersichtsseiten: Blätternavigationen. HTML5 hat nun ein tolles Feature spendiert bekommen, mit dem man das Blättern deutlich beschleunigen kann: Link Prefetching.

Blätternavigationen haben die Eigenschaft, dass sehr häufig ein bestimmter Link angeklickt wird: der Weiter-Link (z.B. wenn unter den ersten 10 Suchergebnissen nicht das Passende dabei war). Mit Link Prefetching kann man nun genau diese URL per HTML deklarieren, sodass der Browser sie in einem Hintergrundprozess laden kann, sobald der Browser keine andere Aufgabe hat (also wenn der User gerade die ersten 10 Suchergebnisse durchschaut).

Link Prefetching kann folgendermaßen eingebaut werden:

... <head> ... <link rel="next" href="page2.html"> ... </head> ...

Dadurch würde der Browser im Hintergrund page2.html schon aufrufen und könnte, sobald der User auf den entsprechenden Link klickt, die Seite aus dem Browser-Cache und somit viel schneller laden.

Link Prefetching wird derzeit leider nur im Firefox unterstützt, aber da die Browser nach und nach mehr HTML5-Features umsetzen, werden wohl auch Opera, Chrome und Safari bald nachziehen.

Einsatzgebiete könnten zum Beispiel folgende sein:

Mit dem rel=“prefetch“-Attribut ist es möglich, mehrere Ressourcen sowie statischen Content vorzuladen. also z.B.

<link rel="prefetch" href="/images/bild.jpg">

Als kleiner Nachteil sei aber bemerkt, dass diese Technik Server-Logdateien eventuell unbrauchbar macht, da der Prefetch-Aufruf ein ganz normaler URL-Aufruf ist. Wenn dann die Prefetch-Seite gar nicht vom User aufgerufen wird, erscheint der Aufruf aber trotzdem in den Logs.
Der Firefox sendet aber zusätzlich den HTTP-Header X-moz: prefetch. Wer eine eigene Logging-Lösung einsetzt, kann diesen auswerten und entsprechend behandeln.

Obwohl HTML5 derzeit quasi omnipräsent ist, habe ich über Link Prefetching bisher nichts gehört. Erst Keyboardy hat mich über diese Funktion informiert, danke dafür.

Mozilla beschreibt auch weitere Details zur Implementierung von Prefetching im Firefox und die entsprechende Stelle im HTML5 Working Draft gibts hier.

Ich möchte nochmal kurz auf das Gewinnspiel für die Jahresabos des PHP Magazins hinweisen. Schnell nen Link auf die eigene Webseite bzw. Blog setzen und schon seid ihr im Lostopf (nur noch bis heute Nachmittag!)