AMP("Accelerated Mobile Pages") ist ein Open-Source-Framework zur Entwicklung besonders schneller und mobil-freundlicher Webseiten. Das AMP-Projekt wurde im Oktober 2015 erstmals vorgestellt und wird seither von Google betreut.

Der Vorteil von Webseiten, die mit AMP umgesetzt wurden, ist dass diese Dank gezielter Restriktionen deutlich schneller laden und somit dem Nutzer schneller zur Verfügung stehen. Auch nutzt AMP Googles eigenes CDN(Content Delivery Network), welches einen weiteren Performance-Boost gewährleistet. (AMP-Seiten sind hauptsächlich über die Google Suche erreichbar, dort werden sie auch mit dem AMP-Logo gekennzeichnet). Google wirbt mit bis zu 85% kürzeren Ladezeiten gegenüber herkömmlich mobil-optimierten Seiten.

AMP besteht im Grunde aus drei Komponenten:

• AMP HTML: eine auf das nötigste reduzierte und angepasste Form von HTML5
• AMP JS: Javascript-Framework, welches das schnelle laden und rendern von AMP HTML ermöglicht
• AMP Cache: Dieser dient dazu AMP-Seiten möglichst schnell über die Google Suche bereitzustellen

Wie eingangs erwähnt erlangt AMP seinen Performance-Schub durch einige Restriktionen und Besonderhetien von AMP HTML. Beispielsweise ist es nicht möglich eigenes Javascript über das Script-Tag einzubinden, dies ist ausschließlich den nativen AMP-Komponenten vorbehalten, hinzu kommt dass diese asynchron geladen werden. Dennoch ist es möglich eigenes Javascript in eine AMP-Seite zu integrieren, allerdings auf eher unkonvetionellem Wege, über die eigene Iframe-Komponente. Google begründet diese Maßnahme damit, dass die wichtigsten Skripte zuerst geladen werden sollen und weitere externe Skripte den Aufbau der Seite nicht verlangsamen sollen.

Trotz dieser Einschränkungen muss nicht auf Interaktivität verzichtet werden, Google stellt einige Komponenten mit bekannten Web-Elementen zur Verfügung, wie zum Beispiel: Accordions, Slideshows, oder Lightboxen. Des weiteren ist es möglich Inhalte verschiedener Sozialer Netzwerke wie Facebook, Twitter oder Instagram einzubetten. Es werden in Zukunft noch einige Komponenten hinzukommen.

Alternativ ist es auch möglich eigene Extensions für AMP zu entwickeln, diese müssen allerdings erst von Google verifiziert werden, bevor diese veröffentlicht werden können.

(Für einige Komponenten existieren auch eigene Attribute, welche auch nicht außer Acht gelassen werden dürfen, sonst kommt es zu Validierungsfehlern.)

(Beispiel: Bei der Bild-Komponente <amp-img> muss das Layout-Attribut angegeben werden. Hierüber wird dann das responsive Verhalten des Bildes gesteuert. Je nach Layout-Typ müssen Height- und Width-Attibute gesetzt werden.)

Im Gegensatz zu Standard-HTML5-Tags/Komponenten werden AMP-Komponenten anders behandelt bzw. gerendert. Hierfür kommt ein eigens enwtickeltes Layout-System zum Einsatz.

Das Layout System von AMP soll dabei helfen die Seite schneller zu rendern, noch bevor Aufrufe auf externe Ressourcen fertig sind. Damit soll verhindert werden, dass die Seite "unvollständig" erscheint.

(...)

Beim Styling von AMP-Seiten gibt es wiederum relativ wenige Einschränkungen. Nur sehr wenige CSS-Eigenschaften sind nicht zugelassen. 

Dennoch gibt es folgende Punkte zu beachten:

• CSS-Dateien können nicht wie üblich, über das Link-Tag eingebunden werden, stattdessen muss ein angepasstes Style-Tag verwendet werden. Google argumentiert hier mit dem wegfallen von einem oder mehreren HTTP-Requests
• Inline-Styles auf einzelne HTML-Tags sind nicht zugelassen
• (Dateigröße des CSS darf nicht größer als 50kb sein)
• Aus Performance-Gründen sollten nur Hardware-beschleunigte CSS-Animationen verwendet werden
• (generell empfiehlt Google schlanken CSS-Code)

(Trotz der wenigen Restriktionen sollte ein übermäßiger Gebrauch von Media-Queries hinterfragt werden. AMP-Seiten sind generell nur auf Mobilgeräten aufrufbar bzw. auffindbar. Daher bietet sich an die Gestaltung auf Smartphones und Tablets zu beschränken.)

Die Mindestvorraussetzung ist dass die Seite ein valides AMP-Dokument ist und somit der AMP HTML Spezifikation entspricht. Hierfür stellt Google mehrere Möglichkeiten zur Verfügung. Die einfachste Lösung ist das Validieren mittels Entwickler-Konsole des jeweiligen Browsers. Um das Dokument validieren zu lassen muss man lediglich "#development=1" an das Ende der URL des zu prüfenden AMP-Dokuments setzen. Nach dem neuladen der Seite werden nun ausführliche beschriebene Fehlermeldung ausgegeben. Alternativ stellt Google auch einen Online-Validator zur Verfügung. Die vorherige Methode ist allerdings die komfortabelste.

(Weitere Informationen zur Validierung von AMP-Dokumenten finden sich unter folgendem Link:)

• (https://www.ampproject.org/docs/guides/validate)

Ist die Seite valide, geht es darum die Seite für Google findbar zu machen.

Google empfiehlt hierbei die AMP-Version einer Seite in einem separaten, eindeutig benannten Verzeichnis, parallel zur Hauptseite abzulegen. Die eindeutige Benennung begründet Google damit, den Nutzer nicht zu verwirren.

AMP- und Hauptseite müssen nun via Link-Tag im Meta-Bereich des Dokuments, jeweils auf sich selbst verweisen um von Google indexiert werden zu können. Dies kann mithilfe der Google Search Console geprüft werden. Existiert nur die AMP-Seite, muss sie auf sich selbst verweisen. 

Um die Möglichkeiten von AMP auszutesten haben wir einen Fieldtest anhand eines Kundenprojektes durchgeführt. 

Die Demo-Seite sollte folgendes beinhalten:

• vollflächige Header-Grafik
• Content-Sektionen mit wahlweise Texten und Grafiken
• Kachelansicht mit mehrere Teasern, welche Bilder und darauf liegende Headlines beinhalten
• Carousel/Slideshow, Slides mit jeweils Grafik und Liste
• Kontaktformular mit Mailversand

Nach einigen Recherchen und dem Testen einiger Komponenten, konnten die meisten Module recht problemlos umgesetzt werden. Hier machte sich unter anderem die geringe Anpassbarkeit einiger AMP-Komponenten bemerkbar. Zum Beispiel ist es nicht möglich die Geschwindigkeit oder Art der Übergänge der Carousel-Komponente anzupassen, die Optionen beschränkten sich auf: Autoplay aktivieren/deaktivieren, sowie die Intervalle festzulegen.*(nochmal prüfen) Dies  geht allerdings mit der Richtlinie, den Content der User Experience unterzuordnen.

Etwas ungewohnt war auch das Konzept des AMP-eigenen Layout-Systems, da hier (einiges) an Kontrolle den Komponenten überlassen wird, statt nur mit CSS zu arbeiten.

SSL/https-Zwang für Formular-Komponente: Für einige Komponenten gilt ein strikter SSL/https-Zwang, dies machte sich besonders beim Kontaktformular bemerkbar. Daher ist ein Server mit SSL zwingend notwendig. Da die Formular-Daten über ein PHP-Skript verarbeitet und anschließend per E-Mail versendet werden, ist es erforderlich Response-Header gemäß der AMP CORS-Spezifikation zu setzen. (Nach einigen Recherchen konnte auch das Kontakt-Formular fertiggestellt werden.)

Partielle Unterstützung seitens Googles Tag Manager: Bisher werden nur vergleichsweise wenige Tracking-Möglichkeiten angeboten, Klick-, Scroll-, Sichtbarkteis- und Timer-Events. 

Formular-Events, welche die AMP-Form-Komponente liefert, werden vom Tag Manager nicht unterstützt. Das Tracken dieser Events über Analytics ist aber prinzipiell möglich. Dennoch konnten Formular-Events, dank eines Workarounds erfasst werden, die Lösung sah wie folgt aus:

Statt der eigentlichen Formular-Events werden nun Klick-Events des "Absenden"-Buttons erfasst. Der Schlüssel hierbei ist der CSS-Selektor, der auf das zu erfasende HTML-Element verweist. Im Google Tag Manager ist es möglich einen beliebig langen Selektor anzugeben. Dank der Formular-Komponente werden zur Laufzeit die Eingaben des Nutzers validiert, dementsprechend werden dabei CSS-Klassen auf das Form-Tag gesetzt, welche verschiedene Zustände des Formulars beschreiben. Nun muss für jeden Zustand ein eigenes Klick-Event mit dem oben genannten Selektor definiert werden. Zu beachten ist diese Klick-Events im Tag Manager eindeutig zu benennen und zu kategorisieren, sodass die auswertende Person die relevante Information leicht sichten kann.

(Teils unvollständige, widersprüchliche Dokumentation seitens der Entwickler/Google und stark abstrahierte Beispiele: Dies liegt wohl hauptsächlich daran, dass AMP eine recht junge Technologie ist.)