AMP – Accelerated Mobile Pages – schnelles Internet

Accelerated Mobile Pages Project by Google

Worum geht es bei AMP?

Kurz gesagt: Mit speziell gestalteten Webseiten soll das Internet mindestens 4x schneller werden als bisher!

AMP wurde von Google am 7. Oktober 2015 offiziell angekündigt.

Zielgruppe sind in erster Linie Anbieter von Nachrichten wie die Frankfurter Allgemeine Zeitung.

In Google werden AMP-Seiten nur dann als Suchergebnis ausgegeben, wenn man von einem mobilen Endgerät aus sucht. Der Fokus liegt also ganz klar auf der Beschleunigung des Internets (und damit auf der „Benutzererfahrung“ -> „User Experience“) auf Mobilgeräten wie Smartphones. Auf einem PC kann man sich AMP-Seiten ansehen, wenn man ihre genaue Adresse kennt.

Screenshot auf einem Smartphone
Als Beispiel suche ich in Google nach „Angela Merkel“ und erhalte die nebenstehende Ergebnisseite auf einem Smartphone:

AMP-Seiten als Suchergebnis werden in der allgmeinen Suche (also nicht News) prominent ganz oben vor allen anderen Suchergebnissen in Form eines Karussells dargestellt. Mit einer Wischgeste nach links oder rechts kann man sich im Karussel zu anderen Suchergebnissen weiter bewegen.

Screenshot des Artikels in AMP Darstellung
Wenn man den Eintrag von Spiegel Online auswählt, wird sofort die folgende Artikelseite angezeigt:

Wie reduziert diese Seite tatsächlich ist, erkennt man, wenn man sich dieselbe Seite auf dem Desktop als Nicht-AMP-Seite ansieht:
Screenshot des Artikels, wie er auf einem Desktop zu sehen ist

Und wie macht AMP das?

Im Grunde ist das Abspecken von Webseiten auch ohne Googles AMP Initiative jederzeit möglich, wenn man folgende Regeln beachtet:

  • Keine externen JavaScript nachladen
  • Keine externen Stylesheets nachladen
  • Wenige Bilder mit geringer Dateigröße auf der Seite anzeigen
  • Alle Bilder mit Angaben zu Breite und Höhe ausstatten
  • Keine Formulare
  • Keine Videos auf der Webseite anzeigen
  • Keine Werbebanner anzeigen
  • Ein Content Delivery Network (-> CDN) wie Akamai nutzen

Alles zielt darauf ab, erstens das Datenvolumen und zweitens die Anzahl der Verbindungen zu einem oder mehreren Internet-Servern möglichst klein zu halten. Als Goodie oben drauf sollte man die Seite noch responsiv machen, so dass sie sich selbstständig auf mobilen Endgeräten an die Größe des Displays anpasst.

Das kann man natürlich alles per Hand entwickeln. Oder man nutzt einfach ein Framework wie AMP und erspart sich einiges an Arbeit. Das AMP Framework übernimmt mit Hilfe von bestimmten JavaScript-Programmen die Kontrolle über alle Teile einer Webseite, die typischerweise die Ladezeit verlängern. Dazu werden spezielle HTML-Tags definiert, über die dann zum Beispiel Bilder kontrolliert werden. Zusätzlich gibt es eine ganze Reihe von Regeln, was alles auf einer AMP-Seite nicht verwendet werden darf (siehe Liste weiter oben).

Schematische Darstellung eines Content Delivery Networks
Schließlich nutzt Google ein großes Netzwerk an Servern, auf denen alle AMP-Seiten zwischengespeichert werden, um sie jedem Besucher auf dem kürzesten Weg auszuliefern. Ein Besucher aus New York wird die Seite also nicht von Ihrem Server aus München erhalten, sondern von einem in seiner Nähe.

Eine der wesentlichen Maßnahmen ist, dass die Anzahl der nachgeladenen Dateien (JavaScript, Fonts, Stylesheets) radikal reduziert wird. Damit entfallen die zusätzlichen Verbindungen zum Server (und die damit verbundene zusätzliche Kommunikation zwischen Server und Client) und ein großer Anteil an Daten.

Eine weitere Maßnahme ist, dass alle Elemente, die nicht sofort auf dem Display angezeigt werden, weil sie sich weiter unten befinden und daher erst nach einem Scrollen zu sehen sind, zunächst auch nicht geladen werden, sondern erst dann, wenn dieser Teil tatsächlich auf dem Bildschirm ist.

Wenn Sie mit „strukturierten Daten“ wie Microdata gemäß schema.org arbeiten, ist es wichtig zu wissen, dass AMP-Seiten zur Zeit nur die ItemTypes BlogPosting und NewsArticle unterstützen.

Nachteile von AMP

Nachteile von AMP-Seiten
Die Einschränkungen, die sich durch das Abspecken einer Webseite auf wesentliche Inhalte ergeben, lassen sich direkt aus den oben genannten Maßnahmen ableiten.

So müssen alle Stylesheets innerhalb der Seite definert werden und dürfen nicht mehr als 50 KB verbrauchen. Styles als Inline-Code direkt in HTML-Tags sind verboten. Transitions dürfen nur für Transformationen und Transparenz-Änderungen eingesetzt werden. Alle Transitions, die sich auf die Größe oder die Position auswirken, sind tabu. Insgesamt werden Ihnen viele Möglichkeiten für besonders aufwendige Designs genommen. Eine AMP-Seite sieht in aller Regel relativ schlicht aus.

JavaScripts von Dritt-Anbietern (außer AMP) sind verboten. Eigene Skripts dürfen zwar geladen werden, aber nur asynchron. Sie stehen also zu Beginn des Ladens einer Seite nicht zwingend zur Verfügung. Wenn Sie das JavaScript eines Dritt-Anbieters in einen iFrame stecken, dürfen Sie es verwenden, weil es dann das Laden der Seite nicht verzögert.

Bilder und Videos dürfen nur über jeweils ein spezielles AMP-HTML-Tag geladen werden und müssen über Angaben zur Breite und Höhe verfügen. Dies verhindert, dass der Browser beim Laden der Seite Zeit mit der Berechnung der Größe verschwendet. Videos dürfen darüber hinaus nur vom eigenen Server geladen werden. Für YouTube (als Google Tochter) gibt es allerdings wieder eine separate AMP-Komponente, die bei Bedarf geladen werden kann. Animierte GIFs benötigen wieder ein anderes AMP-HTML-Tag zur Steuerung. Auch Slideshows und Lightboxes lassen sich nur über zusätzliche AMP-Komponenten umsetzen.

Interaktive Elemente wie Formulare sind verboten, können aber zur Not mit einem iFrame eingebunden werden. Für die spezielle AMP-iFrame-Komponente muss allerdings ein zusätzliches JavaScript des Frameworks geladen werden. Die Kompononte sorgt dafür, dass der Inhalt des iFrames nicht das Laden der eigentlichen Seite blockiert.

Schriftarten (Fonts) dürfen nur von bestimmten Webseiten (Providern) geladen werden und benötigen ebenfalls ein eigenes AMP-HTML-Tag.

Und schließlich können auch soziale Medien nur mit speziellen AMP-Komponenten eingesetzt werden.

Ein ganz anderer Aspekt ist Werbung auf der Webseite. Gerade die von externen Seiten nachgeladene Werbung kann die Ladezeit einer Seite erheblich erhöhen. Somit ist auf AMP-Seiten nur Werbung zulässig, wenn die dafür vorgesehen AMP-Komponente die Steuerung übernehmen kann. Google AdSense (von Google) wird selbstverständlich unterstützt und auch eine Reihe weiterer Anbieter. Hier eine Liste zu veröffentlichen, macht keinen Sinn, da sicherlich sehr schnell weitere Anbieter hinzukommen werden.

Ein ganz wesentlicher Faktor stellt die Abhängigkeit von Google dar, in die man sich zwangsweise begibt, da erstens die Server von Google als Zwischenspeicher verwendet werden, zweitens die von Google eingebundenen AMP-Skripte eben von Google entwickelt werden.

Für jede Webseite müssen Sie immer zwei Versionen eines Inhalts erzeugen, nämlich die normale Seite und die AMP-Seite. Wenn Sie ein Content Management System nutzen, wird Ihnen in der Regel das System diese Arbeit abnehmen.

Ein weiterer Nachteil ist, dass AMP zur Zeit nur den Google Universal Analytics Code unterstützt, aber nicht den Google Tag Manager. Dies ist bedeutend, wenn man Google Analytics zur Auswertung des Besucherverhaltens einsetzt. Wenn Sie für Ihre Website den Google Tag Manager einsetzen, müssen Sie zumindest auf den AMP-Seiten auf das normale Google Universal Analytics zurückgreifen.

Vorteile von AMP

Die Vortiele von AMP-Seiten
Als Webdesigner kratzen Sie sich jetzt am Kopf und fragen sich bei all den Einschränkungen: „Was bringt mir das jetzt alles?“

Bei AMP dreht sich alles um eine möglichst schnelle Ladegeschwindigkeit.

Das AMP-Framework besteht aus mehreren (einzeln nachladbaren) Komponenten, die dafür sorgen, dass kein Element auf der Webseite das Laden der Seite behindert.

Die höhere Ladegeschwindigkeit einer Seite kann verhindern, dass Internet-Besucher vorzeitig das Laden abbrechen und Ihre Website verlassen. Gerade bei mobilen Endgeräten wie einem Smartphone ist die Bandbreite der Internet-Verbindung oft nicht sehr groß und führt beim Laden einer Seite mit einem großen Datenvolumen schnell zu Frust.

Google hat angekündigt, dass in der mobilen Suche in Zukunft AMP-Seiten bevorzugt angezeigt werden. Insbesondere Nachrichten werden in einer Karussell-Darstellung noch oberhalb der normalen Suchergebnisse angezeigt und laden bei einem Tipp mit dem Finger praktisch verzögerungsfrei. Das liegt nicht nur an den beschriebenen Mechanismen, sondern auch daran, dass Google die zur Auswahl stehenden Seiten bereits (teilweise) vorab lädt, also schon, bevor der Internet-Nutzer ein Suchergebnis ausgewählt hat.


Das folgende animierte Bild zeigt, wie das auf einem Smartphone aussehen könnte:
Animiertes Bild, das die Suchergebnisse in Form eines Karussells auf einem Smartphone zeigt

Obwohl Google das AMP Projekt ins Leben gerufen hat, steht es als Open-Source Initiative dennoch allen offen.

Validierung von AMP-Seiten

Bei den vielen Restriktionen, die uns also beim Erstellen einer AMP-Seite auferlegt werden, ist es gut, wenn man die ordnungsgemäße Umsetzung schnell überprüfen kann.

Dies ist jederzeit durch Aufruf der AMP-Seite mit der Ergänzung des URLs um #development=1 möglich. Das Ergebnis der Validierung wird in der so genannten Browser-Konsole angezeigt.

Im folgenden Screenshot sehen Sie diese Seite als AMP-Seite mit Überprüfung:
Fehlermeldung in der Browser Konsole

Ganz offensichtlich gibt es noch Fehler, die vom PlugIn erzeugt werden. Die sollten natürlich behoben werden.

Hier noch zum Vergleich die Darstellung als normale Webseite und als AMP-Version in der direkten Gegenüberstellung:
Zwei Screenshots im direkten Vergleich

Betrifft mich AMP?

AMP sind momentan nur für News- und Blog-Artikel vorgesehen.

Wenn Sie einen Internet-Shop betreiben, brauchen Sie sich vorerst mit dem Thema nicht weiter zu beschäftigen. Wenn Sie eine Website betreiben, die sich zu einem großen Teil auf JavaScript-Funktionen stützt, wird Sie die AMP-Version Ihrer Seite nicht begeistern.

Eventuell betreiben Sie eine Website mit angehängtem Blog oder Nachrichten-Bereich. Für diese Teilbereiche lassen sich AMP-Seiten gut nutzen.

SEO und AMP

Offiziell werden AMP-Seiten ab dem 24. Februar 2016 in der Google Suche auf mobilen Endgeräten angezeigt.

Für die Analyse des Verhaltens der Website-Besucher wird oft das von Google bereitgestellte kostenlose Tool Google Analytics eingesetzt. Dafür muss auf jeder Seite, die später untersucht werden soll, ein kleiner JavaScript-Block eingebunden werden. Dies ist aber in AMP-Seiten verboten. Wir haben also ein Problem.

Für diesen Fall stellt das AMP Framework eine eigene Komponente bereit, die als JavaScript nachgeladen werden muss. Richtig gelesen, AMP Javescript Komponenten dürfen nachgeladen werden, allerdings nur asynchron, so dass sie das Laden der Webseite nicht verzögern. Parameter werden auf der Seite per JSON-Objekt übergeben.

Wie die Einbindung von Google Analytics im Detail umgesetzt werden kann, steht auf der Google Developers Seite.

Aus der Sicht eines Suchmaschinenoptimierers ist es wichtig, die normale Website und die AMP-Seite wechselseitig mit einem Link-Tag zu verbinden. Die normale Seite nutzt die Relationship „amphtml“ und die AMP-Seite „canonical“. Damit weiß die Suchmaschine, dass es zwei Versionen der Seite mit dem gleichen Inhalt gibt und berücksichtigt das entsprechend.

AMP-Seiten werden von Google nicht besser platziert, nur weil es AMP-Seiten sind. Allerdings ist die Ladegeschwindigkeit einer Seite durchaus ein Ranking-Faktor. Da AMP-Seiten besonders schnell laden, werden sie einen Bonus erhalten. AMP-Seiten sind von Haus aus automatisch besonders mobile friendly.

WordPress und AMP

Wer WordPress als Content Management System (-> CMS) einsetzt, ist fein raus. Automattic, also die Firma, die maßgeblich die Weiterentwicklung des Systems koordiniert und vorantreibt, bietet bereits seit Januar 2016 das PlugIn AMP an.

Das PlugIn wird einfach installiert und aktiviert. Es verfügt über keinerlei Einstellungen, lässt sich aber über diverse „Filter“ und „Actions“ in der Datei functions.php anpassen. Dazu sollte man aber über ein paar Programmierkenntnisse in PHP verfügen und sich auch ein wenig mit den WordPress-Mechanismen „Filter“ und „Action“ auskennen. Wenn Sie die Änderungen direkt in den Dateien des PlugIns durchführen, werden diese leider mit dem nächsten Update des PlugIns überschrieben. Und zur Zeit werden noch relativ viele Updates in kurzen Zeitabständen veröffentlicht.

Da AMP nur für News- und Blog-Artikel vorgesehen ist, unterstützt das AMP-PlugIn folgerichtig (bisher?) nicht die AMPfizierung von Blog-Seiten, sondern nur von Blog-Artikeln. Was ist der Unterschied? Ursprünglich war WordPress ein reines Blog-System zum Schreiben von chronologischen Artikeln. Später wurde die Funktionalität in Richtung CMS weiter entwickelt, so dass auch normale Webseiten möglich wurden. So etwas wird zum Beispiel für ein Impressum benötigt.

Den Code für Google Analytics (siehe weiter oben) fügt man am besten ebenfalls über einen Filter in der functions.php hinzu. Dafür stellt das PlugIn den Hook amp_post_template_analytics zur Verfügung.

Bei der automatischen Generierung von AMP-Seiten muss beachtet werden, dass viele WordPress-PlugIns zusätzlichen Code in die Seiten einfügen. Dieser kann durchaus Schuld daran sein, dass die AMP-Seite mit Fehlern validiert wird. Ich gehe davon aus, dass es für die wichtigsten PlugIns nach und nach Updates geben wird, die dies berücksichtigen werden. Für das bekannte SEO PlugIn von Yoast gibt es bereits ein zusätzliches PlugIn, das AMP-Seiten und die Einstellungen des Yoast PlugIns miteinander abgleicht. Dieses zusätzliche PlugIn soll in der Zukunft direkter Bestandteil des Yoast SEO PlugIns werden. Momentan muss es noch separat installiert werden.

Auch wenn ich hier nur WordPress als CMS angesprochen habe, werden andere Systeme ebenfalls in Kürze Unterstützung für AMP anbieten.

Mehr Informationen im Internet zu AMP

Dieser Artikel soll nicht alle technischen Aspekte des AMP Projekts ansprechen. Es gibt eine Reihe von zusätzlichen Informations-Quellen im Internet. Hier einige der wichtigsten:

Kommentar schreiben

Sie müssen eingeloggt sein, um einen Kommentar zu schreiben.