Chrome Instant Page / Prerendering–was ist das und wie kann ich das nutzen?

image.png

Google hat mit der Version 13 von Chrome ein neues Feature namens “Instant Page” aktiviert. Es ist ein weiterer Schritt in Richtung “das Web schneller machen”. Was “Instant Page” eigentlich ist, zeigt dieses Video sehr schön:

Google hat das Feature natürlich auf der Google Suchseite mit eingebaut.

Was macht Google Instant Page?

Das Grundprinzip ist recht simple: Während der Benutzer noch die Suchresultate nach passenden Antworten absucht werden bereits die ersten Treffer vom Browser im Hintergrund geladen. Dies hat zur Folge, dass die ersten Suchresultat quasi “sofort da sind”, sobald man auf den Link in der Google Suche klicke. Tolles Feature und recht clever.

Es gibt einige Szenarien, wo dies durchaus praktisch ist. Darunter sind z.B. Suchseiten, aber auch Wizard-Seiten oder mehrseitige Artikel – bei allen Varianten ist es durchaus vorstellbar, dass der Benutzer die ersten Suchresultate anklickt bzw. zur nächsten Seite geht

Achtung – es sollte mit bedacht eingesetzt werden

Hier liegt allerdings auch die kleine Herausforderung: Das mit allen Links zu machen wäre der gänzlich falsche Weg, da dadurch nur unnötige Daten übertragen werden, was sowohl für den Benutzer, aber auch für den Seitenbetreiber negative folgen hätte – viel Traffic, aber keine Besucher.

Testseite

Google hat eine sehr einfache Testseite zur Verfügung gestellt, welche auch prüft ob Prerender aktiv ist oder nicht (die Seite ist nur im Chrome momentan von Interesse) : http://prerender-test.appspot.com/

Ok, wie funktioniert das eigentlich technisch?

Auf der Chrome Developer Site kann man einige interessante Sachen noch nachlesen, jedoch ist die Grundsätzliche Implementation sehr einfach. Um zu sehen was an Traffic entsteht schau ich einmal in den Network Tab der Chrome Dev Tools und nutze zudem noch Fiddler.

Folgender HTML Code ohne Prerendering:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Index</title>

</head>



<body>

    

<a href="http://code-inside.de/blog">Link Code Inside</a>

</body>

</html>


 

Ohne Prerendering:

Es wird einfach nur ein Request / Response gegeben, wobei zusätzlich noch nach einem Favicon gesucht wird (was aber an dieser Stelle egal ist). Keine Überraschungen hier.

image

Navigiert man nun über den Link zu Code-Inside.de wird erst dann das Laden der Seite angestoßen = Langsam.

Prerendering anschalten

Wenn wir nun noch Prerendering aktivieren wollen, müssen wir nur im <head> noch die Zeile einfügen:

<link rel="prerender" href="http://code-inside.de/blog">




 

Nun sieht man in den Chrome Dev Tools, dass die Adresse aufgerufen wird, allerdings werden noch keine weiteren Daten angezeigt – erst mit Chrome 14 wird man hier mehr Informationen angezeigt bekommen.

image

Ein Blick in Fiddler liefert allerdings schon wesentlich mehr Informationen. Durch das Prerendering werden alle benötigten Daten bereits runtergeladen:

image

Dadurch ist die Seite “auf Klick” auch da.

Zusammenfassung:

Prerendering ist eine interessante Technologie, die hoffentlich auch von anderen Browserherstellern zum Einsatz kommt. Man muss jedoch genau überlegen, wann sich der Einsatz lohnt.

Technisch kann man es via ein <link rel=”prerender” href=”…”> aktivieren. Voraussetzung ist natürlich, dass der Browser das auch kennt – was momentan nur der Chrome in Version 13 kann.

Ausblick

Damit ein Seitenbetreiber auch weiß, was der Browser überhaupt beim Prerendering “sieht” hat Google auch eine Page Visibility API vorgeschlagen.

[ Democode auf Google Code | Download als Zip ]

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

2 Responses

  1. Ach ja, alte Hüte… So ein Prefetch-Feature hat Firefox schon seit längerem.

    Es gab recht viel Geschrei darum, weil es von abartigen Traffic-Optimierern oder von BKA-Honeypots (um jemandem z.B. unbemerkt KiPo oder Terrorliteratur in den Browser-Cache zu schmuggeln, Hausdurchsuchung folgt ;-) leicht missbraucht werden kann.

    Und ob es etwas bringt, hmm, vorherzusagen was der Nutzer anklicken wird, klingt nach Bullshit.

    Reply
    • Wobei laut den Google Leuten Prefetching nur der erste Schritt ist, da dort die ganzen Javascripts/Bilder nicht mit geladen werden. Prerendering soll bereits die Seite wie der Name schon sagt “vorrendern” – schnell ist es auf jeden Fall ;)

      Reply

Comment on this post

Letzte Posts

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

  • image.png
    ASP.NET Bundling & Fontawesome

    Vor einer halben Ewigkeit hatte ich mal geschrieben wie man Fontawesome in ASP.NET nutzen kann. Aufgrund des Alters des Post und einem Kommentar ob man denn Fontawesome auch in das ASP.NET Bundling Framework integrieren kann möchte ich nur ein kurzes Update schreiben. TL;DR: NuGet Package “Fontawesome” runterladen und Pfad in der Bundleconfig angeben. Kurze Schritte […]

Amazon Shop

Facebook