Google AMP: Was sind Accelerated Mobile Pages und wie funktionieren sie?

Google AMP sind Google Accelerated Mobile Pages und dies wiederum ist ein Projekt von Google, dass Internetseiten für mobile Nutzer freundlicher und schneller machen soll. Doch wie geht das?

Das AMP-Projekt: Die Hintergründe

Webseitenbetreiber stehen ständig vor neuen Herausforderungen. 1992 als das Internet die Firmen & Universitäten verließ und die Privathaushalte eroberte, war DSL noch kein Thema. Alle Surfer waren mit Modem unterwegs. Mit viel Glück hatte man ISDN. Die Menschen waren gewohnt auf eine Internetseite zu warten, trotzdem versuchten alle ihre Seiten möglichst klein zu halten, denn große Bilder mussten erst einmal auf den Server gelangen und man schaut ja auch auf die eigene Seite. Quasi instinktiv hielt man die Seite klein.

Später hielt DSL-Einzug und prompt vernachlässigte man die Ladezeiten – zum Leidwesen der ISDN- und Modem-Nutzer. Viele und vor allem große Bilder wurden in den Websites eingebunden und die Anzeigegröße über CSS geregelt. Surfer mit kleiner Bandbreite hatten aber auch nicht unbedingt Lust zu warten und klickten die Seiten an, die schneller luden.

Google begann schlechte Ladezeiten zu bestrafen. Bei dem Suchriesen wurden diese weiter unten angezeigt, auch als Ladezeiten eigentlich kein Thema mehr hätten sein müssen. Doch war man früher bereit ca. 10-15 Sekunden auf eine Seite zu warten, ist man heute dazu keine 3 Sekunden mehr bereit und klickt sich weg. Besonders Shops haben dadurch Nachteile. Alle 200 Millisekunden sinkt die Kaufbereitschaft. Dazu kamen Smartphones auf den Markt. In der U-Bahn oder auf der Straße möchte man die Infos gut lesen können – trotz kleinem Device – und schnell haben. Google straft also auch Seiten ab, die nicht mobil optimiert sind. 50% der Seitenaufrufe auf Websites kommen heute schließlich schon von mobilen Devices.

Die Herausforderung für Webseitenbetreiber ist also mehr den je die Usability und der Speed. Bei Seiten die sich amortisieren müssen, kann dies zu einem riesigen Problem werden. Google bietet eine Lösung für diese Probleme: Google AMP (Accelerated Mobile Pages).

Google AMP: Die Lösung

Der Suchmaschinenriese Google bietet also mit dem AMP-Projekt jetzt dafür eine Lösung an. Doch wie sieht diese Lösung aus und welche Vorteile hat sie für die Monetarisierung?

Prefetching: Vorladen der Inhalte im Hintergrund

Prefetching nennt sich die erste Maßnahme von Google um mehr Geschwindigkeit beim Laden zu ermöglichen. Der Anwender sucht etwas bei Google. Die Ergebnisse werden angezeigt und noch während er durch die Ergebnisse scrollt und seine Wahl trifft, werden die Ergebnisse im Hintergrund vorgeladen. Im Grunde genommen ist dies nicht neu. Bei AMP wird jedoch nicht alles geladen, sondern nur das Gerüst der Seite und der Text. Bilder, Videos, Werbung und Co. kommen erst hinzu, wenn der Anwender sich entscheidet die Seite aufzurufen und an die entsprechende Stelle scrollt. Bis dahin sind dort nur Platzhalter.

Caching und AMP CDN

Chaching ist der zweite Vorteil von Google AMP. Wobei Vorteil eine Frage der Interpretation ist. Die Seiten werden nicht vom Webserver des Betreibers heruntergeladen, sondern im Google eigenen Content Delivery Netzwerk (CDN) gespeichert inkl. Bildern und allen Scripten.

Vorteilhaft auf die Ladezeit wirkt es sich natürlich aus, wenn alle benötigten Dateien auf einem Server liegen. Das wird schneller geladen als Dateien, die auf mehreren Servern liegen. Aber bei guten Programmierern liegt ohnehin nur die Werbung auf anderen Servern. Trotzdem hat dies Vorteile, denn Google Server sind auf der ganzen Welt verteilt im Gegensatz zum Beispiel zu den Webservern dieser Website. Außerdem verfügen die Google-Server über eine bessere Anbindung, was die Response-Time (Antwortzeit eines Servers/einer Website) senkt.

Vorteilhaft ist auch, dass Google diese Daten noch einmal optimiert. HTML, JavaScript und Co. werden in einer Datei zusammengefügt und auch die Bilder für die Screengröße des Clients optimiert.

Der Nachteil an diesem Chaching ist, dass Änderungen am Content oder der Programmierung eine halbe Ewigkeit brauchen bis sie der User auch sieht.

Priorisierte Requests und Lazy Loading

Priorisierte Requests bedeutet, dass Google bestimmte Daten eher läd als andere. Wie wir bereits wissen, wird die Seite schon vor der Wahl vorgeladen, jedoch nur das Gerüst und der Text. Die Bilder, Videos und Co. werden durch Platzhalter ersetzt. Entscheidet sich dann ein Leser für die Seite, dann wird nach den Styles zuerst die Schriftdatei geladen. Obwohl Google AMP Inline-Styles nutzt, hält es es ebenso. Es ist die erste große Datei, die AMP läd.

Lazy Loading heißt, dass alle Inhalte erst dann geladen werden, wenn sie benötigt werden. Erst wenn ein Anwender zu einem Element scrollt, werden die benötigten Bilder, Videos und Java Scripte nachgeladen. Der Vorteil liegt klar auf der Hand. Google nimmt hier dem Betreiber sogar viel Arbeit ab.

JavaScript – asynchron und selektiv

JavaScripte sind auch auf AMP-Seiten möglich, jedoch nicht alle. Schließlich sind gerade die JavaScripte und interaktive Elemente das größte Problem und führen meist zu hohen Ladezeiten – je nachdem wie gut der Programmierer ist und was beim Seitenaufruf verarbeitet werden muss. JavaScripte sind nur in sogenannten AMP-Extensions und AMP-IFrames zugelassen.

Diese AMP-Extensions (z.B. amp-carousel für Bildergalerien) werden erst geladen, wenn der Rest der Website geladen ist. Das Gleiche gilt für die AMP-IFrames für Werbung und Co. Diese Technik ist ebenfalls nicht neu. Durch Polymere war dies für Freundeslisten, Google Maps und viele mehr auch vorher schon möglich. Dieses Framework hat durch Google AMP jedoch nicht an Bedeutung verloren. Für die reguläre Website sind sie trotzdem essentiell.

Inline-Styles sind back

Es wurde schon unter dem Punkt „Priorisierte Requests und Lazy Loading“ erwähnt: Inline-Styles kommen mit Google AMP zurück. Externe Stylesheets ufern gerne aus. Wie schnell ist doch eine neue Zeile hinzugefügt und Frameworks bringen von Haus aus schon jede Menge Overhead mit. Bei AMP wird dies eingeschränkt. Styles dürfen nicht größer als 50 KB sein und einige CSS-Features werden nicht unterstützt, weil sie die Performance immer negativ beeinflussen.

Nutzungsanalysen weiterhin möglich

Ein Tool für Webmaster von Google ist Google Analytics (GA). Eingebunden wird es in Websites mit JavaScript. Logischerweise hat Google also nichts gegen Nutzungsanalysen. So hat Google AMP eine Analytics API, an die sich die großen Hersteller andocken können. Adobe Anyltics, Chartbeat, IVW und natürlich auch GA haben das Angebot angenommen und funktionieren sehr gut.

Prerendering als Feature für den Anwender

Prerendering ist eher ein Gudi für den Anwender. Jeder kennt es. Man öffnet eine Website und liest schon, während andere Elemente wie Bilder, Videos und Co. noch laden. Wenn diese fertig sind, springt die Stelle, die man liest aus dem Focus. Im schlimmsten Fall darf man sie mühsam suchen.

AMP nutzt Prerendering um dies zu verhindern. In AMP ist es zwingend erforderlich zu sagen, wie groß die eingebundenen Elemente sind. Es wird nicht nur gesagt: Füge ein Bild ein. Der Programmierer muss wieder sagen: Füge ein Bild mit der Breite x und Höhe y ein. Das verhindert am Ende des Ladeprozesses die erneute Renderung der Website, die nervig ist und Prozessorlast erzeugt. BTW. Breite und Höhe klingt im responsiven WebDesign erst einmal falsch. Da aber nur das Seitenverhältnis angegeben wird, kann es mühelos für alle Devices verwendet werden.

Google AMP: Haben Websites ausgediehnt?

NEIN! Google AMP ersetzt keine Website. Google AMP ist lediglich eine alternative Darstellung für Posts, Beiträge oder Artikel.Sie sind nur für mobile Endgeräte gedacht. Bei der Suche auf dem Desktop werden die Suchergebnisse für AMP nicht angezeigt.

Google AMP Seiten sind in den Suchergebnissen mit einem Blitz gekennzeichnet. Nur Suchen über die Website von Google enthalten diese AMP-Ergebnisse. Suchen via Searchbar in Android enthalten keine Google-AMP-Suchergebnisse (Stand: 28.03.2016).

Google AMP ist für alle Beteiligten ein Vorteil. Die Anwender erfreuen sich an einer schnellen Website, die schnell die gesuchten Informationen zur Verfügung stellt. Der Betreiber erfreut sich an mehr Besuchern auf der mobilen Website. Entwicklerkosten dürften geringfügig sinken, da Google AMP ihm viele Performance-Optimierungen abnimmt, wenn ein Programmierer ihm die alternative Darstellung bereitstellt. Schneller Ladezeiten (Google spricht von 4 Mal schnelleren Websites) und steigende Anwenderzahlen ermöglichen eine bessere Monetarisierung. Dafür hat Google AMP auch eine Lösung.

Werbe-Monetarisierung mit AMP

Werbung mit Google AMP ist möglich und natürlich auch gewollt. Schließlich will Google ja nicht das eigene Werbenetzwerk ausbremsen. Doch für diese Werbung gelten Richtlinien:

• „Users first“ – Wähle Ad-Platzierungen und Ad-Format, die eine optimale User Experience garantieren!
• „Faster is better“- Geschwindigkeit ist die entscheidende Erfolgskomponente. Arbeite mit Werbemitteln, die über eine geringe Dateigröße verfügen („leichte“ Creatives)!
• „Beautiful matters“ – Ziel sollte es sein die Ads innovativ & passend in das Mobile-Umfeld zu integrieren!
• „Be safe, be secure“ – Alle Werbemittel müssen das https-Protokoll unterstützen!

Auf MSO-Digital gibt es einen Artikel zu diesem Thema. In „Google AMP mit Werbeerlösen monetarisieren“ sind außerdem alle „Do’s and Dont’s“ zu diesem Thema aufgeführt.

Die komplette Dokumentation und der Quellcode liegt auf der offiziellen Seite des AMP-Projekts.