Wie Du Google´s Accelerated Mobile Pages (AMP) mit Drupal erstellst

Mobiles Internet ist für die meisten Menschen in ihrem Alltag mittlerweile ein kaum mehr wegzudenkender Faktor geworden.

Schnell nachsehen, wie man von A nach B kommt oder eine Bestellung von unterwegs aufgeben – mobiles Internet macht beides möglich.

Um die Vorzüge mobilen Internets an Nutzer weitergeben zu können und tatsächlich »Mobilität« zu gewährleisten, heißt es für Webseiten-Betreiber vor allem eines: Schnelligkeit bereitstellen.

Im Jahr 2015 nutzten insgesamt 56 Prozent der deutschen Bevölkerung das mobile Internet. 50 Prozent der Befragten nutzten das mobile Internet über ein Smartphone oder Tablet.– Statista

Google hat hierfür jüngst mit AMP (Accelerated Mobile Pages Project) eine Erweiterung der HTML-Standards vorgestellt, mit der mobiles Surfen deutlich an Geschwindigkeit gewinnen soll.

  • Aber was kann das neue Format alles?
  • Wie kann es eingesetzt werden und welche Vorteile bietet es gegenüber herkömmlichen HTML-Formaten überhaupt?

Der folgende Artikel widmet sich genau diesen Fragen und erklärt Dir wie Du Drupal für AMP fit machst.

Warum gibt es dieses neue Web-Format & was versteht man unter AMP (Accelerated Mobile Pages) überhaupt?

Wenn Nutzer mobilen Internets von einem Punkt schnell genervt sind, dann sind das zu lange Ladezeiten. Neben einer schlechten Internetverbindung oder hohem Datenvolumen sind es vor allem Website-Skripte, die dafür sorgen, dass Internetseiten nur sehr langsam und nach langem Warten laden.

Laut einer Statistik, die Google in Auftrag gegeben hat, liegt die Abbruchrate beim Öffnen einer Website mit Hilfe des mobilen Internets bei gut 58%.

Mit der Einführung des neuen Frameworks AMP möchte Google diesen hohen Abbruchraten etwas entgegensetzen und verspricht, dass mobiles Surfen künftig ohne merkliche Ladezeiten auskommen und der aufgerufene Content umgehend verfügbar sein soll.

Wie funktioniert AMP & wie setzt es sich zusammen?

Um Webinhalte schneller aufrufen zu können, setzt AMP auf Websites, die auf ein Minimum an Quellcodes reduziert sind.

Hierbei wird der Content auf Proxyserver in einem Content-Delivery-Network zwischengespeichert.

Ruft man den Inhalt nun mit einem mobilen Endgerät (z.B. Smartphone, Tablet, etc.) auf, werden die Inhalte umgehend auf dem Display angezeigt. Vor allem statische Websites, deren Content sich nicht oder kaum mehr ändert (z.B. News- oder Blogbeiträge), profitieren von diesem neuen Framework.

AMP basiert auf drei Komponenten:

  • AMP HTML: Hierbei handelt es sich um eine durch AMP Elemente erweiterte Form des herkömmlichen Webstandards HTML. Um schnelle Ladezeiten zu garantieren, werden einige HTML-Tags, hauptsächliche bei Werbemaßnahmen oder Medien, durch AMP-spezifische Tags ersetzt und man erhält sogenannte AMP-HTML Components. So wird aus dem herkömmlichen HTML-Element <img> per AMP ein <amp-img>. Elemente, wie z.B. Formular-Elemente input, textarea, etc., sollten dagegen vermieden werden bzw. funktionieren nicht und validieren dann auch nicht als AMP Seite.
  • AMP JS: Hierbei stehen vordergründig Funktionen zur Performance-Optimierung im Vordergrund. AMP JS dient dem Laden von Ressourcen und beinhaltet die Funktionalität für die zuvor genannten AMP HTML Components. Um schnelles Surfen zu ermöglichen, werden alle externen Ressourcen asynchron geladen. Hiermit wird das Rendering der Website nicht blockiert und die Schnelligkeit erhöht. Zeitgleich findet eine Vorberechnung des Layouts für jedes Element statt. Langsame CSS-Selektoren werden dagegen deaktiviert.
  • Google AMP Cache stellt ein Proxy-basiertes Content-Delivery-Network dar, das alle benötigten AMP-Dateien liefert. Hierfür werden die AMP-HTML-Seiten genutzt, die in einem Zwischenspeicher abgelegt werden. Die Leistung wird durch Google AMP Cache dabei automatisch verbessert.
    Um hohe Geschwindigkeiten und eine maximale Effizienz zu erzielen, werden alle Dateien (HTML, JS, CSS) über eine schnelle HTTP2.0- Verbindung geladen. Zusätzlich ist es per Google AMP Cache möglich, die Funktionstüchtigkeit der AMP-Seite zu validieren.

Wie man AMP für das CMS-System Drupal verwendet, möchte ich Dir in den nächsten Abschnitten genauer erläutern. Die Anleitung wurde mir dabei von der Werbeagentur kartinka aus Erfurt bereitgestellt:

Wie wird das AMP Modul für Drupal installiert?

Um AMPs zukünftig für die eigene Website nutzen zu können, müssen diese zunächst implementiert werden. Hierbei sollten die folgenden Schritte beachtet werden:

Benötigte Module:

  1. Zunächst brauchst Du den Composer Manager, wie er von Drupal bereitgestellt wird, um PHP-Bibliotheken zu verwalten, die von Modulen benötigt werden.
  2. Darüber hinaus brauchst Du das AMP Modul, welches von der Firma Lullabot entwickelt wird. Dieses dient als Basis Modul zur Nutzung von AMPs und stellt einen Ansichtsmodus zur Verfügung. Zusätzlich beinhaltet dieses Modul alle benötigten AMP-spezifischen Tags.
  3. Das AMP Theme (ebenfalls von Lullabot entwickelt) stellt das Basistheme für AMPs dar. Dieses läuft parallel zum herkömmlichen Theme der Website, greift jedoch lediglich die AMPs auf.

Das AMP-Theme stellt in gewisser Weise daher ein herkömmliches Theme dar, das durch ein zusätzliches AMP-Markup spezifiziert wurde, jedoch weiterhin so flexibel anpassbar ist, wie jedes andere Drupal Theme.

AMP Installation für Drupal in 5 Schritten:

Zunächst wird für jedes Drupal-8-Projekt (Modul), welches auf externe Bibliotheken zugreifen will, eine composer.json-Datei benötigt, die alle Abhängigkeiten beinhaltet. Bei dem genannten AMP-Modul ist die AMP Library solch eine Abhängigkeit. Sind diese grundsätzlichen Dinge beachtet, kann die Installation erfolgen:

  1. Installiere Composer auf dem Server (hier am Beispiel des Hosters all-inkl):
    • per SSH auf den Server anmelden
    • curl -sS https://getcomposer.org/installer | php
  2. Installiere das Modul Composer Manager über Drush:
    • drush dl composer_manager
    • drush en composer_manager
  3. Lade das AMP Modul und das AMP Theme herunter & aktiviere es:
    • drush dl amp amptheme
    • drush en amp amptheme
  4. Initialisierung des Composer Managers:
    • wechsel per SSH in das Verzeichnis:
      modules/composer_manager/scripts/
    • die Initialisierung erfolgt über: php init.php
    • Im Backend (/admin/reports/composer-manager) werden jetzt alle benötigten Bibliotheken angezeigt
  5. Bibliotheken aktualisieren:
    • Wechsel in das Root-Verzeichnis der Drupal-Installation
    • Bitte beachte: Einige Bibliotheken brauchen mindestens PHP 5.5.0
    • Zur Sicherheit führe diese Aktion daher mit einer höheren PHP-Version, z.B. PHP 7, aus: php70 composer drupal-update
    • alle benötigten Bibliotheken werden nun installiert oder auf den neusten Stand gebracht
    • der Befehl sollte nach jeder Modulinstallation ausgeführt werden, da neue Dependencies bestehen können.

Konfiguration:

Mit der Konfiguration führst Du den letzten Schritt zur AMP-Website aus.

Die Basiseinstellungen können ganz einfach unter
/admin/config/content/amp
vorgenommen werden.

Hier kannst Du wählen, welche Inhaltstypen AMPs nutzen können und welches Theme für die AMPs verwendet werden soll.

Ebenso lassen sich Einstellungen für Google Analytics, Google Adsense und Google Doubleclick vornehmen.

Denke auch an die Einstellungen im Inhaltstyp, wie dem Aktivieren des AMP-View Modes oder der Positionierung der Felder im View Mode.

Ebenso sollten Blöcke im AMP-Theme angeordnet werden, um die Konfiguration abzuschließen.

Sind alle Einstellungen gelungen kann, nach dem Anlegen des entsprechenden Inhalts, auf die AMP – Seite über www.example.com/node/nid?amp zugegriffen werden.

Welches Theme gibt es speziell für AMP-Seiten?

Aktuell ist für AMP-Seiten ein Basistheme (AMPtheme) vorhanden, das die wichtigsten Komponenten für AMPs beinhaltet. Dieses ist flexibel auf die Bedürfnisse der Betreiber anpassbar und kann erweitert werden. Das Basistheme dient damit als Grundlage für umfangreichere Themes.

Welche Vorteile von AMPs gibt es für Drupal?

Neben den stark verkürzten Ladezeiten, die fast keine Verzögerung beim Öffnen einer Website bieten und dem deutlichen Geschwindigkeitszuwachs, liegt der Vorteil von AMP-Seiten vor allem im SEO Bereich.

AMP-Seiten werden im oberen Bereich der Suchergebnisse bei Google angezeigt, wodurch mehr Menschen auf Ihre Website aufmerksam werden. Können Sie zudem noch durch kaum merkliche Ladezeiten überzeugen, dann erhöhen sich die Klicks auf Ihre Website deutlich.

Als Rankingfaktor ist AMP – im Gegensatz zu https – noch nicht in den Algorithmus von Google aufgenommen, das ist aber sicher nur eine Frage der Zeit.

Welche Aussichten hat AMP auf Drupal 7?

Das AMP-Modul wird hauptsächlich als Contributed Module für Drupal 8 entwickelt.

Parallel dazu wird aber auch ein Backport für Drupal 7 entwickelt, wodurch auch Nutzer älterer Systeme von den Vorteilen von AMP profitieren können.

Fazit

Wenn Du im Bereich des mobilen Surfens auf Schnelligkeit setzen möchtest, dann kommt Du am neuen AMP-Standard von Google kaum noch vorbei.

Zwar mag für viele Webseitenbetreiber die Implementierung von AMP noch Neuland sein, eine Auseinandersetzung mit der Thematik lohnt sich jedoch, wenn Du die eigenen Nutzer auch in Zukunft mit einem positiven Surferlebnis auf ihren mobilen Endgeräten überzeugen und Ihrer Konkurrenz einen Schritt voraus zu sein.

Hast Du AMP bei Dir schon integriert oder planst dies zu tun?

5 Kommentare zu „Wie Du Google´s Accelerated Mobile Pages (AMP) mit Drupal erstellst“

  1. Verstehe ich das also richtig das wenn ich bereits eine Seite habe und diese um AMP erweitern möchte, ich quasi mein aktuelles Theme komplett im AMP Theme nachbauen muss?

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

More To Explore

>
Scroll to Top