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:

  • überall, wo es einen Weiter-Link gibt (mehrseitige Artikel, Slideshows usw.)
  • Auf der Startseite oder einer Landing Page, um den meistgeklickten Link vorzuladen
  • bei Suchergebnissen, um das meistgeklickte (also meist das auf Position 1 befindliche) Suchergebnis vorzuladen

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!)

Dieser Beitrag wurde in   HTML veröffentlicht.
Fügen Sie ein Lesezeichen für den   permanenten Link hinzu.

Jan hat 152 Beiträge geschrieben

6 Kommentare zu “HTML5 Link Prefetching

  1. David sagt:

    Ich denke, die Link-relations sind nicht dazu gedacht, dass die Seiten im Hintergrund vorgeladen werden, sondern für einen semantischen Mehrwert. Opera unterstützt diesen, indem es vereinfachte Navigationsmöglichkeiten zur nächsten Seite anbietet: http://www.opera.com/support/kb/view/608/

    Das Firefox die Seiten ungefragt schon mal läd, halte ich für eine falsche Entwicklung und ist ein Grund, warum ich momentan noch etwas davor zurückschrecke, dass einzusetzen.

  2. Jan sagt:

    @Holger: Steht aber in der HTML5-Spezifikation, die ich oben verlinkt habe. Vieleicht macht Firefox das schon länger, das widerspricht sich ja nicht.

  3. Die Link-Relation „next“ – mit anderen, wie zum Beispiel „prev“ und „start“ – besteht schon seit HTML4
    http://www.w3.org/TR/html401/types.html#type-links

    „prefetch“ steht zwar nicht in der 4er Doku, der FF beachtet das aber schon seit Version 1.02. Philosophiert wird über die Funktion schon seit 2002:
    http://simonwillison.net/2002/Oct/17/mozillaPrefetching/

    So gesehen also nicht neu.
    Die Gefahren sollten nicht unterschätzt werden. Holger hat im ersten Kommentar meinen Artikel aus 2008 schon mal verlinkt.
    Hier nochmal:
    http://hyperkontext.at/weblog/artikel/prefetch-im-firefox-mythos-und-wahrheit/

  4. Nick sagt:

    HTML5 ist ja eine ganz tolle Sache – allgemein.
    Leider werden wir es, selbst wenn die Spezifikation heute zu 100% fertig stehen würde und somit Browser wie Opera, Firefox, Chrome etc. das einige Wochen später unterstützen würden, frühestens in 15-20 Jahren wirklich einsetzen können.
    Das verdanken wir einem großen amerikanischen Betriebssystemhersteller, der leider auch Marktführer im Browsermarkt ist und dessen immernoch marktbeherrschenden Versionen 6 und 7 nach wie vor nicht einmal den ACID2-Test bestehen, geschweige denn CSS, HTML4 oder Javascript können (letzteres gilt auch für die aktuellsten Versionen).

Eine Antwort schreiben

Ihre E-Mail-Adresse wird nicht veröffentlicht. Benötigte Felder sind markiert mit *

You may use these HTML tags and attributes: <a href=""> <blockquote cite=""> <pre lang=""> <b> <strong> <i> <em>