smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

HTML5 Link Prefetching – Ressourcen vorladen

6. März 2013
Stephan
Ressourcen mittels HTML5 Link Prefetching vorladen

Mit HTML5 Link Prefetching gibt es die Möglichkeit Ressourcen (HTML-Dokumente, CSS-Dateien, Grafiken etc.) vorzuladen.

Das kann z.B. für Übersichten, die in mehrere Seiten eingeteilt sind nützlich sein. Beispielsweise bei Archiv- & Kategorieseiten, aber auch bei Artikelserien. Ruft ein Leser z.B. einen Artikel einer Artikelserie auf, ist es nicht unwahrscheinlich, dass er auch den nachfolgenden Artikel der Serie aufruft. Warum also nicht den nächsten Artikel bzw. die nächste Seite im Hintergrund schon vorladen?

Mit Blick auf die Performance einer Website klingt das natürlich recht interessant. Aus diesem Grund möchte ich euch in diesem Artikel zeigen, was es mit HTML5 Link Prefetching auf sich hat und wie es funktioniert.

Link-Typ prefetch

Für Links gibt es mehrere Link-Typen, wobei die Zuweisung eines Link-Typs mittels dem rel-Attribut vorgenommen wird. Darunter findet sich neben bekannten Attrbutswerten, wie z.B. nofollow, alternate, auch der Wert prefetch.

Laut w3schools.com ist prefetch wie folgt definiert:

Specifies that the target document should be cached.

Weisen wir demnach einen Link mit rel="prefetch" aus, dann wird dem Browser mitgeteilt, dass die angegebene Ressource im Hintergund vorgeladen werden soll. Das Laden geschieht dabei erst, nachdem die eigentlich angefragte Webseite vollständig geladen ist bzw. der Browser nichts weiter zu tun hat.

Eine generelle Defintion bzgl. Link Prefetching findet ihr auf developer.mozilla.org.

Noch eine Anmerkung: Gebt ihr eine HTML-Seite zum Vorladen an, dann wird nur diese HTML-Seite nicht aber die verlinkten CSS-, JavaScript-Dateien, Grafiken etc. geladen.

Vorladen von Ressourcen mittels prefetch in der Praxis

Gleich vorweg: Derzeit scheint nur Firefox Link Prefetching zu unterstützen.

Das Attribut rel gilt generell für die HTML-Elemente <a>, <area> als auch <link>. Derzeit wird von Firefox aber nur die <link>-Variante unterstützt.

Nun also ein Beispiel:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta charset="utf-8" />
<title>HTML5 Link Prefetching</title>
<link rel="prefetch" href="photo.jpg">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
Seiteninhalt
</body>
</html>

In Zeile 6 haben wir einen Link zu einer externen Ressource, in diesem Fall einer Grafik, definiert. Der Link ist dabei mit dem Link-Typ prefetch ausgezeichnet.

Laden wir nun diese Webseite in unserem Browser werden ungeachtet der Reihenfolge erst alle benötigten Ressourcen der aktuell angefragten Webseite geladen. Sobald der Browser beschäftigungslos ist, lädt er die angegeben Grafik und speichert sie im Cache.

Rufen wir nun z.B. mittels einem Link die Grafik auf, muss der Browser es nicht mehr vom Server laden, sondern nur noch aus dem lokalen Cache.

Das ganze mittels Firebug mal veranschaulicht:

HTML5 Link Prefetching in Firebug sichbar

Wie ihr erkennen könnt, wird die photo.jpg-Datei erst geladen, wenn alle anderen Ressourcen fertig geladen wurden.

Browser-Unterstützung

Wie bereits erwähnt, unterstützt derzeit scheinbar nur Firefox Link Prefetching. Komischerweise ist Link Prefetching noch nicht einmal bei caniuse.com aufgeführt.

Ob euer Browser Link Prefetching unterstützt, könnt ihr auf browserspy.dk überprüfen.

Jetzt wundert ihr euch vielleicht, warum nicht wenigstens Chrome Link Prefetching unterstützt. Hier kocht Google ein eigenes Süppchen. Anstatt prefetch gibt es für Chrome prerender als Link-Typ. Der Unterschied ist, dass bei Angabe einer Ressource auch alle darin referenzierten Ressourcen vorgeladen werden.

Nähere Information zu Chrome und prerender könnt ihr auf developers.google.com nachlesen.

Wo wir gerade bei verschiedenen Süppchen sind. Firefox beschränkt sich nicht nur auf prefetch, sondern auch der Link-Typ next führt zum Vorladen einer Ressource.

Vor- & Nachteile

HTML5 Link Prefetching hat wie jede Technik seine Vor- und Nachteile. Positiv ist grundsätzlich, dass man die Performance einer Website damit optimieren könnte.

Nachteil ist aber, dass das Vorladen ja immer passiert, unabhängig ob der Webseiten-Besucher überhaupt die vorgeladene Ressource anschaut oder nicht. Außerdem könnten Webseitenbetreiber die Technik auch zweckentfremden und Ressourcen laden, die man selbst nie aufrufen würde, die dann aber trotzdem im Cache des Browsers liegen.

Weitere Nachteile könnt ihr bei Florian im Blog nachlesen.

Link Prefetching deaktivieren

In Firefox könnt ihr Link Prefetching leider nicht auf benutzefreundliche Weise deaktivieren. Was genau ihr hierfür tun müsst, lest ihr am besten selbst nach: Is there a preference to disable link prefetching?.

in Google Chrome gibt es hierfür unter Einstellungen – Erweiterete Einstellungen die Möglichkeit „Prerendering“ auszuschalten.

Weiterführende Artikel

Fazit

Aus Performancesicht finde HTML5 Link Prefetching wirklich interessant. Derzeit ist es aber wirklich zu vernachlässigen, weil nur Firefox es unterstützt.

Kanntet ihr HTML5 Link Prefetching bereits? Was haltet ihr davon?

Kommentare  
1 Kommentar vorhanden
1 Martin schrieb am 11. September 2014 um 22:45 Uhr

rel=next ist keineswegs “komisches Firefox-Süppchen”, sondern HTML-Standard (http://www.w3.org/TR/html4/types.html#type-links). Eigentlich ist es dafür gedacht, dass ein Browser sowas wie Vor- und Zurückbuttons anbietet, aber leider gibts das nur in Opera standardmäßig, für Firefox gibts wenigstens ein AddOn.

rel=prefetch ist dagegen sehr wohl ein komisches Firefox-Süppchen. Der größte Nachteil von Prefetch wird in diesem Artikel leider nicht erwähnt: Nicht jeder User hat immer und überall eine unbegrenzte Internet-Flat, sondern muss u.U. volumenabhängig bezahlen. Stichwort “Handy”. Da kann Prefetching schnell sehr teuer werden!

1 Trackback/Pingback vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!