web & mobile DEVELOPER 03 / 2016 – Accelerated Mobile Pages

wmd_201603_amp

 

Accelerated Mobile Pages

Googles Antwort auf „Instant Articles“ von Facebook hat nicht lange auf sich warten lassen. Das Open Source Artikelformat „Accelerated Mobbile Pages“, steht in den Startlöchern und wird Anfang 2016 in die Suchmachine aufgenommen. Dies soll dafür sorgen, dass Inhalte deutlich schneller geladen werden und das Ranking dafür verbessert wird.

Von Patrick Lobacher

Der nächste große Trend im Medienbereich wird sicher die plattform-unabhängige Veröffentlichung von Inhalten werden. Während Facebook seit Mai 2015 seine „Instant Articles“ gestartet hat, arbeitet Google ebenfalls an einem ähnlichen Format mit dem Namen „Accelerated Mobile Pages“ oder kurz AMP. Dieses Format wird zusammen mit Twitter als Open Source-Lösung entwickelt und soll Anfang 2016 reif für den produktiven Einsatz sein. Vorgestellt wurde es von Google am 07.10.2015 in einem Blogbeitrag auf Google’s eigenem Blog Blogspot.

 

amp_lobacher_01

 

Bereits heute haben eine Vielzahl großer Publisher Unterstützung angekündigt und setzen bereits heute auf das neue, schlanke Artikelformat: BBC, BuzzFeed, The Economist, El País, Financial Times, Frankfurter Allgemeine, the guardian, The Huffington Post, The New York Times, The Telegraph, Time, The Wall Street Journal, Zeit Online – um nur einige der mittlerweile weit über 1000 zu nennen.

Aber nicht nur Publisher, sondern auch Technologiefirmen setzen auf das neue Format: Adobe, Google, LinkedIn, Pinterest, Twitter und WordPress.

Nachdem das Internet mittlerweile zunehmend mobil genutzt wird, hat sich auch die Mediennutzung verändert. Anwender wollen die Inhalte genau dort konsumieren, wo immer sie sie vorfinden – manchmal direkt von der Website eines Publishers, oftmals aber auch direkt aus Aggregatoren heraus oder in den Suchmaschinen.

Bedenkt man, wie frustrierend die Experience im mobilen Web sein kann, suchen viele Content-Distribution-Plattformen nach Alternativen. In vielen Fällen sind diese Alternativen allerdings plattform-spezifisch und belasten damit die Verlage, indem die Fragmentierung der Formate unterstützt und diese somit vom Ökosysystem abgeschottet werden.

Das „Accelerated Mobile Pages“ (AMP) Projekt ist eine Initiative, um das mobile Web und damit das Ökosystem der Distribution zu verbessern. Wenn Inhalte schnell, flexibel und ansprechend realisiert sind, sowie überzeugende und effektive Anzeigen beinhalteen, können wir das offene Web Publishing Modell, sowie die Einnahmequellen bewahren, die so wichtig für die Nachhaltigkeit des qualitativen Publizierens sind.

AMP HTML ist ein neuer Weg, um Web-Seiten auf mobilen Geräten sofort zu laden, wenn dieses speziell optimiert wurden. In der Entwicklung waren vor allem smartes Caching, vorhersagbare Performance und moderner, ansprechender mobiler Inhalt wichtig.

Da AMP HTML auf bestehenden Web-Technologien aufsetzt und kein Template-basiertes System darstellt, können Verlage weiterhin ihre eigenen Inhalte selbst wie gewohnt hosten, diesen aufgrund ihrer eigenen User-Experience weiterentwickeln und beliebig Werbung integrieren – und dies alles innerhalb einer technischen Architektur, die in Bezug auf Geschwindigkeit und Leistung optimiert wurde.

Warum ist AMP schneller?

Damit AMP deutlich schneller lädt, wurden einige Optimierungen vorgenommen:

  • Skripte werden ausschließlich ansynchron geladen und eigene Skripte sind ausschließlich in iframes möglich (diese blocken aber nicht)
  • Die Größe aller Ressourcen wird immer festgelegt. Zum Aufbau der Seite wird nur ein HTTP-Request benötigt
  • Extensions (wie Lightboxes, Instragram Embeds, Tweets, …) blocken nicht das Rendering
  • CSS muss inline angegeben werden und dieses wird auf 50 kB begrenzt
  • Erst finden alle DOM Leseoperationen statt und anschließend alle DOM Schreiboperationen – dies reduziert teure Neuberechnungen auf ein Minimum
  • Animation werden ausschließlich GPU-beschleunigt durchgeführt
  • Es werden nur die Ressourcen geladen, welche auch direkt benötigt werden. Beispielsweise nur diejenigen, die above-the-fold liegen – andere (wie Videos) per lazy-loading
  • Seiten werden über Preconnect (http://www.w3.org/TR/resource-hints/#dfn-preconnect) vorab geladen

 

AMP im Einsatz

Um das Ergebnis einer mit AMP angereicherten Suche bereits jetzt schon (vor Ende Februar 2016) auszuprobieren, muss man Google auf einem Mobilegerät mit einigen Parametern aufrufen. Google hat aber dafür einen Shortlink eingerichtet: g.co/ampdemo.

Ruft man die Suche auf dem Desktop auf, bekommt man direkt eine entsprechende Meldung, um darauf hinzuweisen, dass die Suche derzeit nur auf Mobile möglich ist:

amp_lobacher_02

 

Dort gibt man zuerst den Shortlink und in der dann geladenen Suche ein Thema der Tagespresse ein, z.B. „Angela Merkel“. Scrollt man etwas nach unten sieht man in einem Karussell die neuesten Nachrichten von „Frankfurter Allgemeine“, sowie der „Zeit Online“ in einem anderen Format: Bild, Publisher, Text und Datum. Sobald man auf eine der Nachrichten tippt, wird man sofort – d.h. ohne merkliche Verzögerung – zum Artikel geleitet.

 

Bildschirmfoto 2016-02-16 um 10.00.52

 

Google plant, dass dieses Verhalten überall dort eingesetzt werden kann, wo man schnell weitere Informationen benötigt: Social Media, Apps, Feed-Reader, Suche und viele weitere.

 

Die erste AMP-Seite

Das folgende Markup kann als Startpunkt oder Boilerplate verwendet werden – speichern sie dieses in einer Datei mit der Endung .html:

Listing 1: Boilerplate

Der Code im Body ist dabei selbsterklärend – ganz im Gegenteil zum Head, den wir uns genauer ansehen wollen. Dabei muss ein AMD HTML-Dokument folgendes zwingend umsetzen:

  • Das Dokument muss mit dem Doctype <!doctype html> starten
  • Es muss ein <html ...> tag  existieren(<html amp> ist ebenfalls erlaubt)
  • Die Tags <head> und <body> müssen verwendet werden
  • Es muss ein <link rel="canonical" href="$HTML_URL" /> Tag im Head platziert werden, welches auf die reguläre HTML-Version zeigt oder auf sich selbst, wenn es eine solche nicht gibt
  • Direkt nach dem <head> Tag, muss das Tag <meta charset="utf-8"> folgen
  • Der Quelltext muss ein <meta name="viewport" content="width=device-width,minimum-scale=1"> im Head enthalten. Es ist empfohlen zusätzlich noch das Attribut initial-scale=1 zu verwenden
  • Als letztes Element im Head muss die Angabe <script async src="https://cdn.ampproject.org/v0.js"></script> platziert werden (dies lädt die AMP JavaScript Bibliothek)
  • Es muss die Angabe <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> im Head enthalten sein

Die Schema-Angabe ist optional, aber empfehlenswert wenn man diesen distributieren will (z.B. im News-Karussell). Hier wurde NewsArticle verwendet – die Definition dazu findet sich hier: https://schema.org/NewsArticle.

 

Erlaubtes Markup

Die meisten HTML-Tags können innerhalb von AMP HTML unverändert verwendet werden, aber einige davon sind verboten oder werden durch eigene ersetzt:

  • Verbotene Tags
    script (es sei denn, der Typ ist application/ld+json),  base, frame, frameset, object, param, applet, embed, form, Input-Elemente (input, textarea, select, option – erlaubt ist aber button)
  • Ersetzte Tags
    <img> durch <amp-img>
    <video> durch <amp-video>
    <audio> durch <amp-audio>
    <iframe> durch <amp-iframe>
  • Attribute für <amp…>-Tags
    layout, width, height, media, placeholder, fallback, on

 

Medien hinzufügen

Zur Einbindung von Bildern kann beispielsweise einer der folgenden Codes verwendet werden:

Listing 2: Bilder einfügen

Breite und Höhe müssen zwingend mitangegeben werden. Das Attribut layout bestimmt dann, wie das Bild dargestellt wird. Verwendet man beispielsweise responsive als Wert, so wird das Bild im Verhältnis der Größenangaben in den zur Verfügung stehenden Platz hineinskaliert. Der Wert nodisplay sorgt dafür, dass das Bild zunächst nicht angezeigt wird (sondern erst, wenn man dieses explizit darstellen will).

Mögliche Attribute sind: width, height, id, figure, figcaption, attribution (ein String zur Zuordnung), src, srcset, sizes sowie alle Standard HTML5-Attribute wie z.B. alt

Animierte Bilder (GIF-Animationen) werden über das <amp-anim> Element dargestellt. Hierfür muss aber zuerst im Head ein entsprechendes JavaScript geladen werden. Anschließend kann das Animations-Tag direkt verwendet werden:

Listing 3: Animierte Bilder einfügen

Über die Angabe des Platzhalters kann die Zeit während des Ladens der Animation überbrückt werden.

Videos werden über das Tag <amp-video> realisiert und werden wie folgt eingebunden:

Listing 4: Videos einfügen

Dabei ist zu beachten, dass das Video „lazy“ geladen wird, also erst, wenn es im oder in der Nähe des Viewport erscheint.

Die Einbindung von Audio funktioniert analog:

Listing 5: Audio einfügen

 

Media Queries

Auf alle AMP-Elemente kann das media Attribut angewendet werden, um damit Media-Queries zu realisieren:

Listing 6: Media Queries

Hier wird nur das Bild geladen, welches zur Breitenangabe passt.

 

Responsiver Text

Über das Element <amp-fit-text> kann Text realisiert werden, der seine Schriftgröße verändert – je nach zur Verfügung stehendem Platz:

Listing 7: Media Queries

Hier kann sowohl die maximale Schriftgröße (max-font-size), wie auch die minimale Schriftgröße (min-font-size) angeben.

 

iframes integrieren

Um iframes zu integrieren, verwendet man das <amp-iframe>-Tag. Dafür gibt es allerdings die Einschränkung, dass sich der iframe entweder mindestens 600px oder 75% von oben in Bezug auf den ersten Viewport integriert werden. Ressourcen darin müssen zudem per HTTPS angefordert werden.

Um iframes zu laden, muss zudem zuerst ein zugehöriges JavaScript eingebunden werden – anschließend kann der iframe integriert werden

Listing 8: iframe einbinden

 

YouTube

Die Integration von YouTube Videos ist möglich, benötigt aber ebenfalls ein eigenes JavaScript zum Betrieb. Über das Attribut data-videoid wird schlicht die YoutTube-ID übermittelt:

Listing 9: iframe einbinden

 

Tracking & Ads

Um beispielsweise Seitenaufrufe zu zählen, kann über das Tag <amp-pixel> ein Tracking-Pixel ähnliches Verhalten simuliert werden – es wird ein GET-Request zur angegebenen URL ausgeführt:

 Listing 10: <amd-pixel>

Als Parameter hinter der URL können die folgenden verwendet werden:

  • RANDOM
    Erzeugt eine zufällig Zahl
  • CANONICAL_URL
    Canonical URL (Host + Pfad) des aktuellen Dokuments
  • CANONICAL_HOST
    Canonical Host des aktuellen Dokuments
  • CANONICAL_PATH
    Canonical Pfad des aktuellen Dokuments
  • DOCUMENT_REFERRER
    Aktueller Referrer
  • TITLE
    Inhalt des Title-Tags
  • AMPDOC_URL
    URL des aktuellen Dokuments
  • AMPDOC_HOST
    Host des aktuellen Dokuments
  • PAGE_VIEW_ID
    String, der zufällig aus User, URL und Tag errechnet wird

Ads werden über das <amp-ad>-Tag eingebracht. Über das Attribut type wird der Ad-Anbieter spezifiert. Folgende Anbieter werden zur Zeit unterstützt: A9, AdReactor, AdSense, Adtech und DoubleClick.

Listing 11: Ad-Integration

Twitter

Über die Extension amp-twitter können auch Tweets angezeigt werden. Dafür sind sowohl ein entsprechendes JavaScript wie das zugehörige Tag notwendig:

Listing 12: Twitter

 

UI-Elemente

In AMP wurden zudem einige UI-Elemente wie Lightbox (<amp-lightbox>) und Carousel (<amp-carousel>) integriert:

Listing 13: Lightbox & Carousel

 

Styling

Es ist nur ein Stylesheet erlaubt, welches zudem auch noch inline im Code (genauer im Head) platziert werden muss. Dafür ist zudem das Attribut amp-custom zu verwenden:

Listing 14: Styling

 

Preview und Validierung

Grundsätzlich verhält sich eine AMP HTML Seite wie jede andere HTML Seite und kann daher ganz normal angezeigt werden

  • Entweder direkt in einem Browser ziehen (dann werden allerdings keine AJAX-Requests, wie das Laden von Videos ausgeführt)
  • Auf einen Webserver laden und per Browser ansehen. Der schnellste Weg hierzu ist im Verzeichnis, indem sich die Quelldateien bfinden, den folgenden Befehl auf der Kommandozeile auszuführen:  python -m SimpleHTTPServer. Der Aufruf erfolgt dann via localhost:8000/

Für die Validierung müssen Sie Chrome als Browser verwenden, dort in die Developer-Tools gehen und den Tab „Console“ auswählen. Nun hängen Sie den Parameter #development=1 an die URL – also z.B. http://localhost:8000/listing01.html#development=1. Eventuelle Parsing-Fehler werden nun direkt in der Konsole angezeigt.

amp_lobacher_04

Die Lösung für eventuelle Fehler wird zudem ebenfalls in der Konsole ausgeben:

amp_lobacher_05

  • MANDATORY_ATTR_MISSING <attr>
    Das Attribut <attr> wurde vergessen
  • WRONG_PARENT_TAG <tag1> > <tag2>
    <tag2> ist innerhalb von <tag1> nicht erlaubt
  • MANDATORY_TAG_MISSING <tag>
    Der Tag <tag> muss angegeben werden
  • DISALLOWED_TAG <tag>
    Der Tag <tag> ist nicht erlaubt
  • INVALID_ATTR_VALUE <attr>
    Das Attribut <attr> ist nicht gültig

 

AMP und nicht-AMP verbinden

Oftmals hat man zwei Versionen einer Seite – eine AMP- und eine nicht-AMP-Version für einen News-Artikel beispielsweise. Wenn nun Google die nicht-AMP-Version entdeckt – wie kann man mitteilen, dass es noch eine AMP-Version gibt?

Dies wird gelöst, indem in beide Versionen ein entsprechender <link>-Tag mit der Referenz auf die jeweils andere Version eingebaut wird:

Listing 15: <link>-Tags

 

Der erste Tag wird in eine nicht-AMP Version eingebaut und der zweite in die AMP-Version.

Hat man nur eine Version, dann verwendet man dort die zweite Variante, die auf sich selbst zeigt.

Vollständiges Beispiel

Schauen wir uns nun ein Beispiel an, in dem ein kompletter Artikel mit Lightbox, Bildern und Ads dargestellt wird. Hier sieht man sehr gut das Zusammenarbeiten der verschiedenen Komponenten:

Listing 16: Vollständiges Beispiel

 

amp_lobacher_06

 

Fazit

Einige der Extensions, wie Analytics (z.B. zur Einbin dung von Google Analytics), Brightcove, Mustache, Pinterest, Slides, Vine und ähnlich sind noch in der Entwicklung und stehen wahrscheinlich erst Anfang 2016 final zur Verfügung. Zudem ist damit zu rechnen, dass diese Liste noch deutlich länger wird.

Man kann aber jetzt schon sagen, dass der Ansatz, den Google mit AMP geht, sicherlich der richtige ist und damit für eine hohe Akzeptanz sorgen wird.

 

 

 

Links zum Thema

AMP Project
https://www.ampproject.org

AMP Überblick
https://www.youtube.com/watch?v=SOx1XfOjJPI

Google AMP
http://g.co/amp

AMP Anatomie
https://www.youtube.com/watch?v=hVRkG1CQScA

AMP Dokumentation
https://www.ampproject.org/docs/get_started/about-amp.html

AMP auf GitHub
https://github.com/ampproject/amphtml

AMP Beispiele
https://github.com/ampproject/amphtml/tree/master/examples

stackoverflow (Tag AMP)
https://stackoverflow.com/questions/tagged/amp-html

 

 

 

Leave a Comment.