Pre-* Party: Presolve, Preconnect, Prefetch und Prerender

Mit HTML 5 wurden gleich mehrere ähnlich geartete Elemente eingeführt. Die „Pre-* Party“-genannten Elemente sind Erweiterungen, die die Ladegeschwindigkeit von Seiten erheblich beeinflussen können. Prinzipiell funktionieren diese Elemente nach dem gleichen Prinzip: noch bevor der Nutzer zur nächsten Seite navigiert, wird antizipiert wohin er als nächstes gehen wird. Die nächste Ressource wird also schon geladen, bevor er auf den Link klickt.

Dabei greift das Wissen des Webservers und der ausführende Browser ineinander. Nur wenn die Website und das zugehörige Content Management System wissen, welche Seitenpaare sich gut vertragen (häufig hintereinander aufgerufen werden), und diese Informationen vom Browser auch ausgelesen und verwendet werden, wird es eine runde Sache.

Was ist der Unterschied zwischen Preresolve, Preconnect, Prefetch und Prerender?

In der Präsentation von @igrigorik findet sich eine gute Übersicht zu den vier Möglichkeiten.

Presolve, Preconnect, Prefetch und Prerender

Jede nächsthöhere Ausbaustufe inkludiert automatisch die vorhergehende. Beim Prefetch muss zwangsläufig vorher ein DNS Lookup und ein Socket Connect stattfinden. Im Detail gestalten sich die Möglichkeiten wie folgt.

Preresolve: Der Domain Name Server Lookup (Auflösung einer Webadresse „www.wngmn.de“ zur IP Adresse) wird für den angegebenen Link schon aufgelöst, bevor der Nutzer auf den Link klickt. Das spart in der Regel nur wenige Millisekunden, da dies die schnellste Operation beim Laden einer Seite darstellt. Entsprechend kann Preresolve bei vielen Ressourcen eingesetzt werden, da es auch bei 10 oder sogar 100 Links kaum Auswirkungen auf die aktuelle Seitenperformance haben wird.
Preconnect: Nach dem DNS Lookup wird die Socket Connection geöffnet. Auch diese kann schon vorab für eine Ressource genutzt werden und ist ebenfalls ein Leichtgewicht, wie der DNS Lookup.
Prefetch: Hier wird der gesamte HTML Inhalt schon geladen, jedoch nicht ausgeführt. Auch weitere Ressourcen im HTML werden nicht geladen. Dies ist also kein Leichtgewicht mehr, sondern kann schon einige KB schwer sein.
Prerender: Der gesamte Inhalt wird ausführbar geladen. Nicht nur der Quelltext steht also lokal zur Verfügung, sondern auch alle Bilder, CSS und JavaScript Inhalte. Das kannst Du Dir in etwa so vorstellen, als hättest Du einen unsichtbaren Tab geöffnet mit dem gesamten Inhalt der nächsten Seite. Implikationen hat das vor allem für ausführbare Skripte, sie müssen abgekapselt betrachtet werden. Schließlich würden sich ohne separate Scopes die Skripte in die Quere kommen. Mehr zu den Implikationen unten.

Die Implementierung ist jedoch nicht in jedem Browser gleich und es gibt keinen einheitlichen Standard, der von allen Browsern gleichermaßen anerkannt wird.

Welche Browser unterstützen Preload (-resolve, -fetch, -connect und -render)?

Aktuell (Feb 2016) gibt es schon einige Browser, die das Laden vorab unterstützen. Eine aktualisierte und gepflegte Liste findet ihr hier: Browser Support Prefetch. Um es lokal zu testen könnt ihr diesen Link aufrufen, der euch anzeigt ob euer aktuell genutzter Browser diese Funktion unterstützt – Prefetch testen. Vorsicht, beide Links beziehen sich nur auf eine von vier Möglichkeiten (Prefetch, Presolve, Preconnect und Prerender).

Da es keinen einheitlichen Standard zu allen vier Möglichkeiten gibt, haben sich die Browserentwickler (wieder einmal) voneinander wegbewegt. Während Google Chrome eher auf Prerender setzt, ist bei Mozilla Firefox schon nach Prefetch schluss. Ein volles Prerender wird da nicht unterstützt.

Google Chrome bietet zusätzlich die Funktion „Prerender“ als Feature an, wenn der Nutzer zugestimmt hat. Dabei werden die Inhalte zum Vorab-Laden jedoch vom Browser selbst bestimmt, z.B. auf Grundlage der Historie im Browser.

Technik und Implementierung der Pre-Anweisungen

Prinzipiell muss die Angabe im HTML im

stehen. Verwendet wird das „link“-Element mit dem Attribut „href“ und „rel“ (Relationship). Dies gibt die Beziehung zwischen dem aufgerufenen Dokument und dem verlinkten Element an. Typisch ist die Beziehung „stylesheet“ und der Link zum CSS-File.

In unserem Fall ist die Beziehung (Relationship) eine der Pre-Anweisungen und der Link enthält den Verweis zur (wahrscheinlich) als nächstes aufgerufenen Ressource.

Generelle Verwendung:

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

Die Angaben unterscheiden sich jedoch nach Browser. Ein Preresolve sieht im Firefox so aus:

<link rel="dns-prefetch" href="http://wngmn.de">

Gebräuchlicher und damit auch standardisierter sind die Angaben zu Prefetch und Prerender.

<link rel="prefetch" href="http://wngmn.de">

Mehr zu Prefetch bei Mozilla (Firefox).

Die Angabe zum Prerender gestaltet sich wie folgt.

<link rel="prerender" href="https://wngmn.de/">

Da sich die Lage, welcher Browser welches Element unterstützt, schnell ändert, geben wir hier nur generelle Verwendungshinweise.

Auswirkungen auf Webanalyse (z.B. Google Analytics) und Implikationen von Prerender

Speziell das Schwergewicht Prerender bereitet vielen Entwicklern Kopfschmerzen.

Wenn das JavaScript ebenfalls ausgeführt wird, was bedeutet das dann im Detail?
Werden auch Requests an Drittparteien ausgeführt und Werbebanner geladen?
Was ist mit Zählpixeln zur Webanalyse?

Gerade weil auch Google Prerender in den Suchergebnissen (http://ipullrank.com/how-i-sped-up-my-site-68-percent-with-one-line-of-code/) unterstützt, müssten bereits viele Webmaster etwas bemerkt haben. Dann würde ihre Seite plötzlich gleich häufig aufgerufen wie nach einem Keyword gesucht wird. Ohne, dass ein Nutzer auf das Suchergebnis klickt, würde die Seite geladen und ein Visit gezählt werden. Zumindest die Logfiles hätten entsprechende Sprünge in der Statistik.

In Tests haben verschiedene Quellen dieses Szenario schon durchprobiert. Für die Webanalyse kannst Du bestätigen, dass Prerender das JavaScript nicht vollständig ausführt. Zählpixel werden nicht ausgeführt und auch Werbung nicht geladen. Eine offizielle Ressource dazu gibt es jedoch nicht, lediglich von Nutzerberichten kannst Du dies ableiten.

Hat Dir der Artikel gefallen?

Neue Artikel, Updates zu unseren Artikeln und Artikel von anderen Stellen wir regelmäßig unserem Newsletter.

Beispielausgaben und Anmeldung findest Du unter Wingmen-Newsletter