Prerendering

Was ist Prerendering?

Als Prerendering wir das von Usern unbemerkte vorzeitige Rendern einer Ressource für die Anzeige in einem Browser bezeichnet. Das Laden und Rendern erfolgt, bevor die Ressource, in der Regel eine Webseite, vom Nutzer aufgerufen wird. Ausgelöst wird das Prerendering durch das rel=”prerender” Attribut in Verbindung mit einem auf die zu rendernde Webseite verweisenden href-Attribut. Durch das vorzeitige Rendern kann eine Webseite beim Aufruf im Browser fast ohne Verzögerung angezeigt werden.

Im Chrome Browser von Google wurde das Konzept des vorzeitigen Renderns erstmals, wenn auch noch nicht vollständig, im Jahr 2011 implementiert. Die zugrunde liegende Idee ist, dass bestimmte Teile einer Webseite bereits geladen und vom Browser für die Anzeige gerendert werden, bevor sie vom Nutzer abgerufen werden, um sie bei einem Aufruf schneller anzeigen zu können. Prerendering kann insbesondere die Anzeige von Webseiten mit Inhalten, die über mehrere Seiten verteilt sind, für paginierte Webseiten oder Seiten, die mit speicherintensiven Skripten oder großen Dateien arbeiten, beim Aufruf durch den Nutzer beschleunigen.

Wie funktioniert Prerendering?

Beim Prerendering werden alle für die Darstellung der nächsten Seite erforderliche Dateien und Ressourcen wie Bilder, Scripte oder CSS, vorab vom Server abgerufen und für die Darstellung gerendert. Dadurch ist es möglich, dass die Anzeige im Browser ohne merkliche Verzögerung erfolgen kann, wenn die Seite vom Nutzer tatsächlich aufgerufen wird. Das Prerendering wird auch von Google für die schnelle Anzeige von Webseiten genutzt, die auf den vorderen Plätzen in den organischen Suchergebnissen (SERPs) gelistet werden. Dadurch können die Seiten den Suchmaschinennutzern schneller angezeigt werden, wenn sie abgerufen werden.

Damit eine Webseite vor dem Aufruf durch einen Nutzer geladen und gerendert werden kann, muss dem Browser mitgeteilt werden, welche Seite dies ist. Dies geschieht durch das rel=”prerender” Attribut in Verbindung mit dem href-Attribut, das auf die Website verweist, die für das Prerendering vom Browser zu laden ist. Die beiden Attribute werden als Codezeile in den Quelltext der Webseite eingefügt, die dem Nutzer angezeigt wird. Die Codezeile lautet:

<link rel="prerender" href="//www.example.com">

Der Browser liest die Referenz und lädt die vom Link-Element referenzierte Seite einschließlich der zugehörigen JavaScript-Anweisungen in einen sogenannten versteckten Tab. Das ResourceType::Prerender Signal des Browsers wird vom sogenannten ResourceDispatcherHost registriert, der die PrerenderContents anschließend lädt. Die geladenen Inhalte werden vom PrerenderManager in einem eigenen Verzeichnis verwaltet und für maximal 30 Sekunden abrufbereit gehalten. Falls mehrere Inhalte vorgerendert wurden, werden nur die zuletzt verwendeten Inhalte im Verzeichnis bereitgehalten.

Wenn eine URL von einem Nutzer in die Adresszeile des Browsers eingegeben wird oder der Nutzer klickt auf einen Link innerhalb einer Webseite, wird geprüft, ob die URL mit einer URL übereinstimmt, für die der PrerenderManager bereits gerenderte Inhalte bereithält. Gibt es eine Übereinstimmung, wird der bis dahin unsichtbare Tab zu einem sichtbaren Tab, die gerenderte Webseite wird angezeigt und der Eintrag im Verzeichnis des PrerenderManager wird gelöscht.

Welche Inhalte werden für das Prerendering bestimmt?

Suchmaschinen wie Google können mit hoher Wahrscheinlichkeit davon ausgehen, dass User die ersten Einträge in den Suchergebnissen anklicken werden und diese deshalb vorab gerendert werden sollten. Für Webmaster und SEOs stellt sich bei der Programmierung einer Webseite jedoch die nicht immer leicht zu beantwortende Frage, welche Ressourcen für das vorzeitige Rendern vorzusehen sind. Nur wenigen Webmastern stehen ausreichend Daten zur Verfügung, anhand derer das Besucherverhalten zuverlässig vorhergesagt werden kann. Insbesondere ist eine Entscheidung bei neuen Webseiten, für die noch keine Daten über das Nutzerverhalten vorliegen, welche Ressourcen für das Prerendering vorgesehen werden, schwierig zu treffen. Werden Seiten vorab geladen und gerendert, die dann doch nicht von den Besuchern einer Webseite abgerufen werden, kann dies eine Erhöhung der Ladezeit zur Folge haben. Die Page Visibility API, mit der Webmaster erkennen können, ob eine Webseite im Vordergrund oder Hintergrund angezeigt oder gerade gerendert wird, kann zumindest in Grenzen die Entscheidungsfindung erleichtern.

Auswirkungen des Prerendering auf Programmierung und Praxis

Google selbst hat zwar die Technik des Prerenderings mit dem Chrome Browser eingeführt, verfolgt aber eine Strategie, bei der bestimmte Ressourcen priorisiert werden. Prerendering hat bei dieser Strategie die niedrigste Priorität. Netzwerkverbindungen besitzen eine höhere Priorität, sodass bei einer aktiven Verbindung das Prerendering eingeschränkt werden kann. Darüber hinaus sind beim Prerendering nur 3 Vorgänge je Domain möglich, und wenn diese mehr als 150 MB Cache benötigen, wird das Rendern durch Unterbrechung der Verbindung beendet. Ebenso führt die Nutzerauthentifizierung über ein Formular auf der Webseite oder die Anforderung eines SSL-Zertifikates zu einem Abbruch des Renderns.

Ob Prerendering genutzt wird oder nicht, ist eine Entscheidung, die vom Nutzerverhalten und der Systemkonfiguration abhängig ist. Der Performancegewinn bewegt sich im Millisekundenbereich. Und nicht jeder Browser, etwa der Mozilla Firefox Browser, unterstützt diese Technik.