AMPs (Accelerated Mobile Pages) mit Drupal 8 umsetzen

drupal 8 google ampEben einmal von unterwegs aus die Lieblingswebseiten nach Neuigkeiten durchsuchen oder mit wenigen Klicks an schnell benötigte Informationen gelangen, um zum Beispiel rechtzeitig zu einem wichtigen Termin zu kommen oder den richtigen Ort des ersten Dates nicht zu verfehlen – so unterschiedlich das Surfverhalten von Nutzern ist, so vereint sind sie jedoch in einem Punkt: mobiles Surfen ist für Viele zu einer wichtigen Quelle geworden, um schnell benötigte Informationen zu beschaffen, egal wo man ist. So gaben laut einer Studie des Statistischen Bundesamtes aus dem Jahr 2015 rund 70% der Befragten an, dass sie mobil ins Netz gehen ¹. Was für alle Nutzer gleichermaßen ärgerlich ist – oft ist die Ladezeit von Websites auf mobilen Endgeräten zu langsam und der benötigte Content baut sich auch nach mehrmaligen Klicken des Aktualisieren-Buttons nur schleppend auf. Nach Studien von Akamai verlässt so rund ein Viertel aller User nach 4 Sekunden die Website und bricht den Suchvorgang ab.

Google will genau diesem Manko zukünftig den Kampf ansagen und hat Ende 2015 mit AMP (Accelerated Mobile Pages) ein neues HTML-Format vorgestellt, das beim mobilen Surfen zukünftig aufs Tempo drückt und die Ladezeiten von Websites extrem verkürzen soll.

AMP – der abgespeckte Web-Standard für mobiles Surfen

Das größte Problem der langen Ladezeiten von Websites ohne AMP-Standard liegt vor allem im Umfang des zu ladenden Content begründet. Häufig sind es Werbebanner oder Mediendateien, die das Laden auf dem mobilen Endgerät ausbremsen und Nutzer nerven. Mit AMP stellt Google daher ein Konzept vor, das durch konsequentes Abspecken der Inhalte an Schnelligkeit gewinnen will. Im Gegensatz zu bisherigen Websites setzen AMP-Websites auf einen verkürzten HTML-Code, der die Nutzung von Java-Skripten oder Einbettungen einschränkt. Zusätzlich wird zu ladender Content auf Proxyserver in einem Content-Delivery-Network zwischengespeichert, das es ermöglicht, Inhalte von Websites auf mobilen Endgeräten sofort anzeigen zu können.

Googles AMP-Framework basiert hierbei auf drei Komponenten, die in ihrer Gesamtheit für optimale Schnelligkeit sorgen sollen:

AMP HTML: Der bisher herkömmliche Webstandard HTML wird durch AMP Elemente erweitert. Hierbei werden einige HTML-Tags (z.B. bei Medien oder Werbemaßnahmen) durch AMP-spezifische Tags ausgetauscht und zu AMP-HTML-Components verschmolzen. Aus einer Image-Datei wird durch AMP so , das verkürzte Ladezeiten ermöglicht.

Um die Performance von Websites zu optimieren, setzt Google auf AMP JS. Diese beinhalten die Funktionalität der AMP-HTML-Components und ermöglichen das schnellstmögliche Laden von externen Webseiten-Inhalten durch einen asynchronen Ladeprozess der Ressourcen. Ziel ist es, das Rendering der Website nicht zu blockieren, um die Schnelligkeit beim Ladevorgang erhöhen zu können. So findet hierbei eine Vorberechnung des Layouts jedes Website-Elements statt. CSS-Selektoren, die die Website verlangsamen, werden dagegen deaktiviert.

Mit Google AMP Cache wird zusätzlich ein Proxy-basiertes Content-Delivery-Network aufgegriffen, das die benötigten AMP-Dateien liefert. Die entsprechenden Elemente, die die AMP-HTML-Seiten nutzt, werden hierfür in einem Zwischenspeicher abgelegt. Die Leistung wird durch Google AMP Cache dabei automatisch verbessert.

Um für Nutzer mobiler Endgeräte den schnellen Aufbau von Websites zu ermöglichen werden die gesamten Dateien, wie HTML, CSS oder JS über eine schnelle HTTP- 2.0 Verbindung geladen.

Mit AMP setzt Google also genau an der Stelle an, die bei Kunden bislang für den größten Ärger gesorgt hat – der Ladezeit einer Website. Wer künftig auf AMP in Verbindung mit Drupal setzt, für den dürfte dieses Problem daher bald beseitigt sein und die Nutzerzufriedenheit effektiv steigen. Darüber hinaus macht sich der Einsatz des neuen Frameworks aber auch im eigenen SEO-Bereich bemerkbar. Websites, die auf AMP basieren, werden in den Suchergebnissen bei Google im oberen Bereich angezeigt und generieren so eine höhere tägliche Klickrate der Nutzer.

Was braucht es für Drupal, um Nutzern schnelle AMP-Websites bieten zu können?

Accelerated Mobile Pages Project

Das neue AMP-Framework ist bereits in der Betaversion von Drupal 8 enthalten, aber auch Nutzer von Drupal 7 werden in den Genuss verkürzter Ladezeiten kommen. Hierfür wird derzeit ein Backport für Drupal 7 entwickelt.

Um AMP künftig nutzen zu können, braucht es unterschiedliche Module, die insgesamt das AMP-Framework ergeben. Kernelemente sind zunächst ein Composer Manager, wie ihn z.B. Drupal bietet, um PHP-Bibliotheken verwalten zu können sowie ein Basis AMP-Modul (z.B. entwickelt von Lullabot), um dieses Framework nutzen zu können. Dieses Basis AMP-Modul enthält alle AMP spezifischen Tags, die für die Website benötigt werden und dient zeitgleich auch als Ansichtsmodus. Ist das Gerüst gebaut, braucht es noch ein Layout. Auch hierfür dient zunächst ein AMP-Theme als Grundlage, das parallel zu herkömmlichen Themes der Website läuft, jedoch benötigt wird, um AMP-spezifische Inhalte einbinden zu können. Dabei bleibt es so individuell anpassbar, wie jedes andere Theme auch.

Wie man AMP für das CMS-‚System Drupal verwendet, möchten wir Ihnen in den nächsten Abschnitten genauer erläutern. Eine Anleitung wurde uns dabei von der Werbeagentur kartinka aus Erfurt bereitgestellt:

Der benötigte Composer Manager und das Basis-Theme lassen sich unter folgenden Links finden:

https://www.drupal.org/project/composer_manager
https://www.drupal.org/project/amptheme

Sind die Module für die eigene AMP-fähige Website heruntergeladen, erfolgt noch eine kurze Installation des Service, um den eigenen Nutzern künftig rasant schnelles mobiles Internet bieten zu können.

Als Grundlage zur Installation wird für jedes Drupal-8 Modul zunächst eine composer.json-Datei benötigt, mit der es möglich ist, auf externe Bibliotheken zuzugreifen und die alle Abhängigkeiten besitzt. Hierfür kann die AMP-Library genutzt werden, die unter dem Link https://github.com/Lullabot/amp-library zu finden ist.

In einem ersten Schritt gilt es nun, zunächst den Composer auf dem Server zu installieren (Schritt 1 & 2) sowie den dazugehörigen Composer Manager (Schritt 3 & 4):

  1. per SSH auf den Server schalten
  2. curl -sS https://getcomposer.org/installer | php
  3. drush dl composer_manager
  4. drush en composer_manager

Anschließend muss ein AMP Modul und Theme heruntergeladen und aktiviert werden:

  1. drush dl amp amptheme
  2. drush en amp amptheme

Sind diese Schritte erfolgt, gilt es, den Composer Manager im Verzeichnis modules/composer_manager/scripts/ zu initialisieren. Dieser Vorgang erfolgt über php init.php Im Backend (/admin/reports/composer-manager) werden nun alle benötigten Bibliotheken angezeigt, die nun im Folgenden aktualisiert werden müssen.

Hierfür einfach in das Root-Verzeichnis der Drupal-Installation wechseln. Wichtig – um AMP zum Laufen zu bringen benötigen einige Bibliotheken mindestens PHP 5.5.0. Führen Sie daher ein Update aus: php70 composer drupal-update und führen Sie diesen Befehl nach jeder Modulinstallation durch, da Dependencies bestehen können.

Sind diese Schritte erfolgt, sollte noch eine Konfiguration für das problemlose Anzeigen der Website erfolgen. Unter /admin/config/content/amp lassen sich alle notwendigen Basiseinstellung, wie die zu anzeigenden Inhaltstypen für AMP, der AMP-View-Mode oder das entsprechende Theme, vornehmen. Überprüfen lassen sich die vorgenommenen Konfigurationen schließlich unter: www.example.com/node/nid?amp

Fazit

Auch wenn AMP derzeit noch eine recht unbekannte Komponente im Webseitenbereich sein dürfte, so ist ihr enormes Potenzial bereits jetzt erkennbar: mit steigender Zahl der Nutzer mobilen Internets wird Schnelligkeit beim Ladevorgang zu einem immer wichtiger werdenden Faktor, der über Nutzerzufriedenheit und die Abbruchrate bei Websites entscheidet. Denn nur wer es seinen Nutzern künftig ermöglicht, schnell auf benötigte Informationen zugreifen zu können, wird diese auch auf langer Sicht halten und die Klickraten auf der eigenen Website maximieren können.

11 Kommentare

  1. Alex Juni 1, 2016 7:15 pm 

    Er lebt. Er lebt! 😀

  2. Jonas Juni 1, 2016 8:44 pm 

    haha *sing* war nie wirklich weg, hab mich nur versteckt …

  3. Alex Juni 1, 2016 9:41 pm 

    Da singe ich doch gleich mit…
    und eines ist sicher
    ich geh nie wieder weg
    😀

  4. Marc Juni 7, 2016 1:44 pm 

    Danke für den umfangreichen Artikel! Schreibst du auch einen, wie man AMP mit WordPress umsetzt? Eine Frage noch: Sollte man AMP auf „normalen“ Blogs oder Webseite einbauen, die nicht regelmäßig neue Inhalte verbreiten?

  5. Jonas Juni 13, 2016 4:43 pm 

    Hallo Marc, mal schauen, wenn ich dazu komme vielleicht 😉 ..und egal ob Blog oder Newsmagazin, das Thema ist aktuell und interessant, wer sich damit befassen möchte, darf das gerne machen 🙂 Wenn dein Seitenaufbau richtig lahmt, solltest du aber erstmal andere Störfaktoren ausschliessen (Hostinganbieter etc..)

  6. Celine Oktober 26, 2016 6:38 pm 

    Hallo Jonas. Welche sind neben dem Hostinganbieter die schlimmsten Störfaktoren ? Können das auch zuviele Plugins sein oder spielt dort die Masse keine große Rolle ?

  7. Paul November 12, 2016 11:24 am 

    Ich verwende für meine Projekte hauptsächlich WordPress

  8. Daniel Januar 3, 2017 5:49 pm 

    Hi Jonas,
    ab welchem Seitenumfang lohnt sich die Umstellung auf AMP? Ist der Aufwand nur bei umfangreichen Shop- und Magazinseiten sinnvoll (bzw. bei Seiten mit massivem Traffic) oder kann sich der Aufwand auch bei kleinen Nischen- und lokalen Seiten lohnen? Wie ist Deine Meinung dazu?

  9. Jonas Januar 12, 2017 8:38 am 

    Der Aufwand lohnt sich aktuell nur bei größeren Newsseiten, steck deine Energie lieber in guten Content 🙂

  10. Dennis März 14, 2017 11:24 am 

    Hallo Jonas!

    Danke für den Artikel. Mit deiner Erklärung bekommt das wirklich jeder hin 😉 Kannst du vielleicht noch Plugins erwähnen, die die Seite schneller machen? In wordpress.

  11. Konrad November 5, 2017 1:26 pm 

    Hallo Jonas,

    Leider werden diese Module nicht mehr weiterentwickelt. Für die Anzeige einzelner Knoten sind sie ausgereift, aber wie verhält es sich mit ganzen Views oder der Homepage? Für beides gibt es ungetestete Patches, allerdings nur für Drupal 7. Wie steht es um die Möglichkeit, ganze Websites in Drupal 8 auf AMP umzustellen? Weißt Du da eventuell mehr? Bei WordPress geht dies wohl schon.

Schreibe einen Kommentar