AMP Project: Accelerated Mobile Pages

Veröffentlicht am 20 März 2016 um 20:09

„Can we make the web great again?“

Richard Gringas
Head of News, Google

Intro AMP – Accelerated Mobile Pages by Google

Das obige Zitat „Can we make the web great again?“ von Richard Gringas zeigt in wenigen Worten, was sich viele Leute tagtäglich denken und doch nicht zum Ausdruck bringen. Das Web soll unterstützen. Es soll Menschen vernetzen. Es soll unterhalten und vor Allem soll es: Informationen liefern.

Doch was geschieht, wenn das Web zwar für all diese Zwecke vorhanden scheint, seinem ursächlichsten Existenzgrund – der Information – jedoch nicht richtig nachkommt? Jeder kennt es, wenn man auf dem Mobilgerät etwas sucht und die Webseiten dann auf sich warten lassen. Das soll mit AMP der Vergangenheit angehören. Die Trefferseiten sollen enorm schnell geladen werden und dem Nutzer die gewünschten Inhalte in Windeseile anzeigen.

Der Zweck von AMP

Das Open Source Projekt „AMP“ steht für „Accelerated Mobile Pages“. Hintergründig stehen die Zeiger darauf, dass mobile Information besonders schnell abrufbar sein soll. Jeder kennt die lästige Wartezeit beim Suchen eines relevanten Inhalts auf der gerade angesurften Webseite.
Wie unnötig erscheint es da, ewig Zeit damit zu verbringen, die Adresse oder Telefonnummer eines Ortes, auf den ich mich gerade zu bewege, zu ermitteln?

Technik hinter AMP

Die technischen Hintergründe zu AMP sind enorm spannend. Inhaber von Webseiten, die einen gesteigerten Wert auf eine hohe Nutzerfreundlichkeit legen, sollten sich mit der AMP Thematik auseinandersetzen. Diese Seiten laden blitzschnell, was an der technischen Basis liegt.

Für die Programmierer gibt es sogar ein kleines Schmankerl: Bei AMP Seiten wird nicht normales HTML verwendet, sondern eine spezielle Form, das AMP HTML. Im AMP HTML werden eigens eingeführte Tags verwendet. Diese Auszeichnung in der eigens angepassten Skriptsprache führt dazu, dass Suchmaschinen die AMP Seiten erkennen und die Inhalte entsprechend kategorisieren können. Der HTML Tag <img> wird beispielsweise im AMP HTML zu <amp img> umgeformt. Andere Tags wie <embed> <meter> oder <frame> sind im AMP HTML schlichtweg unzulässig.

Spielregeln von AMP Seiten

Die moderne Technik macht ein paar neue Grundsätze erforderlich. Die meisten sind bereits aus der Ladezeit-Optimierung für normale Webseiten bekannt und wurden hier konsequent fortgeführt. Ich möchte diese Spielregeln nennen:

Technischer Aufbau:

Die Inhalte werden bei AMP nach Inhaltstypen spezifisch geladen. Zuerst wird der strukturelle Untergrund geladen. Anschließend kommt der Text in das Dokument. Anschließend werden Platzhalter gesetzt und diese werden nach dem Laden des vollständigen Dokuments durch die Bilder und Videos ersetzt, welche an die Stelle der Platzhalter kommen sollen.

Die Verwendung von Platzhaltern ist ein galantes Mittel, um den Browser optimal auf das Rendering der Webseite vorzubereiten. Die Platzhalter werden für Bilder und andere Content-Elemente erstellt und erhalten bereits die Angaben für Breite und Höhe (z.B. 640 x 480 px), welche das Content-Element später einnehmen wird. Das HTML-Dokument hat somit schon alle anderen Elemente am richtigen Platz. Der Text wird um die Platzhalter herum positioniert. Da alles am richtigen Platz ist, wird ein erneutes Rendern der Webseite unnötig. Die Webseite „springt“ auch nicht, wie es der Fall wäre, wenn keine Platzhalter eingesetzt würden. Alles in allem ein toller Ablauf für eine hohe Nutzerfreundlichkeit.

Above the Fold:

Die Inhalte, welche für den Nutzer am Wichtigsten sind, sind bereits im ersten Schirm zu sehen. So wie „alles über dem Knick“ bei einer Tageszeitung. Ergänzende Inhalte wie Bilder, Videos und Dokumente, die weiter unten auf der Seite erscheinen, werden erst dann nachgeladen, sobald der Nutzer den Bildschirm berührt und nach unten scrollt. Dies hat einen massiven Einfluss auf die Ladezeit und ist sehr positiv für den Besucher.

Zusätzlich wird dieser erste Bildschirm bereits geladen, während sich der Suchende noch auf der Suchmaschine befindet. Zusammen genommen gibt dieses Duo ein starkes Team für enorm schnelle Ladezeiten ab.

Ladezeitoptimierung:

Die AMP Seiten werden von Google’s CDN (CDN = Content Delivery Network) ausgeliefert. Die Quelle der AMP Seiten liegt immer auf dem Server der echten Webseite. Das CDN von Google holt sich regelmäßig den aktuellen Stand der AMP Seiten ab und speichert diese auf den Servern von Google ab. Von dort aus werden sie in das CDN weiter verteilt.

Ein CDN ist enorm genial: Nehmen wir an, eine Webseite liegt in Kanada. Die Webseite verwendet AMP Seiten. Google holt sich die AMP Seiten, sowie JavaScripte und Stylesheets in das Google CDN und legt sie dort ab. Kommt nun ein Besucher aus Deutschland auf ein Suchergebnis dieser kanadischen Seite, so muss er die AMP Seite nicht aus dem Server in Kanada laden, sondern er erhält sie vom nächstgelegenen Google CDN Server. Das Google CDN ist weltweit aufgestellt. Somit kommt die AMP Seite aus Deutschland und nicht aus Kanada. Die Ladezeit ist somit viel kürzer.

Stylesheet Regeln:

Passend zur „Above the Fold Technik“ (wir haben hier bereits etwas zu Above the Fold geschrieben), müssen Stylesheet-Anweisungen in die Seite geschrieben werden. Als Größenlimit werden seitens der Herausgeber maximal 50 Kilobyte genannt. Zur Info: Unsere eigene Webseite hat zwei Stylesheets mit 23 kB und 26 kB, insofern kann man – wenn man die CSS Anweisungen entsprechend zusammenfasst und optimiert – mit 50 Kilobyte schon echt ordentlich was stylen. Unserer Meinung nach dürften für normale AMP Seiten sogar 10 Kilobyte mehr als ausreichend sein, so dass wir uns bei AMP Seiten innerhalb dieses noch kleineren Rahmens bewegen.

JavaScript Regeln:

Wenn es für die Stylesheets (CSS) Regeln gibt, liegt es auch nahe, dass es Regeln für JavaScript (JS) gibt. Damit das Rendering der Seite nicht blockiert wird, wird bei AMP ausschließlich asynchrones JavaScript erlaubt. Auch so ist die Verwendung von JavaScript eingeschränkt.

Fazit zu AMP

Als Fazit kann man vermerken: Derzeit wirft AMP eine Reihe von Fragen auf. Es ist offensichtlich, dass die Integration von AMP noch nicht so einfach erscheint. Wir haben bereits Hintergrundrecherche betrieben und können AMP Seiten für unsere Kunden gerne und problemfrei integrieren.

Als Abschluss möchte ich folgendes Video der Macher hinter dem Open Source Projekt zeigen. Sie geben Euch in – wie ich finde – sehr netten Augenblicken einen Überblick darüber, was sie hinter dem Projekt sehen und was sie antreibt.

 

Auch die Autoren des SEO by Yoast! Plugins haben Zeit in die Weiterentwicklung gesteckt. Die Komplexität besteht in der Zusammenführung der Funktion von mehreren verschiedenen Plugins. Hier fallen gerade noch Späne, doch ihr könnt hier bereits mehr darüber erfahren: https://yoast.com/wordpress-amp-part-ii/

Stichwörter: , , , , , , ,