Beschleunigen Sie Ihre Drupal-Website mit AMP

AI-Translated

Raman

Drupal

Veröffentlicht am 25 Jun, 2018

8 Minuten Lesezeit

Die Zahl der mobilen Nutzer, die auf das Internet zugreifen, nimmt stetig zu, was Content-Publisher dazu zwingt, eine bessere Nutzererfahrung zu bieten. Diese mobilen Nutzer haben möglicherweise eine begrenzte Bandbreite mit geringeren Internetgeschwindigkeiten und Low-End-Geräten.

Ein Standard, der auf bestehenden Technologien aufbaut, um das Laden von Webseiten auf mobilen Geräten zu beschleunigen.

Infolgedessen können Werbung, Pop-up-Angebote, ausgefallenes CSS und schweres JavaScript oft zu einer trägen Erfahrung für diese Nutzer führen. Als Publisher müssen Sie jedoch Ihre Inhalte monetarisieren und gleichzeitig sicherstellen, dass Sie keine Kompromisse bei der Qualität der Nutzererfahrung eingehen. Welche Möglichkeiten haben Sie?

Native mobile Anwendungen

Native mobile Apps bieten im Vergleich zu ihren Web-Pendants eine schnellere und interaktivere Erfahrung. Sie lassen sich besser in das Betriebssystem des Mobilgeräts integrieren und bieten eine vertraute UI & UX. Sie sind jedoch plattformabhängig und ihre Entwicklung und Wartung sind mit Kosten verbunden.
Interne Leistungsoptimierungen

Sie können Strategien zur Leistungsoptimierung anwenden, wie z. B. das Caching statischer Inhalte auf beliebten CDNs wie Cloudflare, das Bündeln und Minimieren von CSS und JS sowie das Bereitstellen der optimierten Mediendateien. Dafür benötigen Sie Ressourcen und ein erfahrenes Entwicklerteam.
Plattformen wie Facebook Instant Articles und Apple News

Sie stellen Publishern ihre Plattformen zur Verfügung, um ihre Inhalte bereitzustellen und die Monetarisierung durch Werbung zu ermöglichen. Ihr größter Nachteil ist jedoch, dass sie an ihre Plattformen gebunden sind.
Google AMP

Google AMP (Accelerated Mobile Pages) ist ein Open-Source-Projekt, das sich auf die Bereitstellung einer schnelleren Inhaltsauslieferung und Seitenwiedergabe konzentriert. Das Beste daran ist die Integration mit bestehenden CMS wie Drupal und Wordpress.

Was genau ist AMP und wie funktioniert es?

AMP ist im Wesentlichen ein Standard, der auf bestehenden Technologien aufbaut und darauf ausgelegt ist, das Laden von Webseiten auf mobilen Geräten zu beschleunigen. Dies geschieht durch die Anwendung bestimmter Einschränkungen und die Bereitstellung eines Proxy-basierten CDN zum Zwischenspeichern Ihrer Seiten.

Wenn Ihre Webseiten diesen Standards entsprechen, können sie von Google zwischengespeichert werden und in den Suchergebnissen und Karussells mit dem AMP-Logo erscheinen, was darauf hinweist, dass sie eine schnelle Erfahrung bieten.

Beobachtung des Blitzsymbols bei den priorisierten Suchergebnissen auf Google — *Beachten Sie das Blitzsymbol bei den priorisierten Suchergebnissen auf Google.*

Dies ist eine sehr allgemeine Beschreibung, und es gibt eine Menge technischer Details unter der Haube. Lassen Sie uns einige der Grundlagen verstehen, bevor wir uns ansehen, wie wir AMP in Drupal nutzen können.

Sie erstellen zwei Kopien Ihrer Seiten – eine reguläre und eine, die dem AMP-Standard entspricht. Die reguläre Seite muss ein spezielles Tag enthalten, das auf die AMP-Seite verweist (die Crawler und Bots suchen danach).

<link rel="amphtml" href="http://www.example.com/page?amp">

Die AMPed-Version dieser Seite muss in AMP-HTML (einer eingeschränkten Version von HTML) geschrieben sein, eine externe JavaScript-Bibliothek (https://cdn.ampproject.org/v0.js), etwas Boilerplate-JavaScript-Code und einen Link zur regulären Version der Seite enthalten.

<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://www.example.com/page.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>Hello, World!</body>
</html>

Es gibt viele Einschränkungen und Vorschriften in AMP HTML, z. B. bezüglich der Verwendung spezieller AMP-Tags wie <amp-img> (anstelle des regulären <img>-Tags), die verwendet werden, um sicherzustellen, dass die Größe des Bildes vor dem Laden bekannt ist, um das Springen beim Laden zu verhindern.

<amp-img src="image.jpg" width="640" height="320"></amp-img>

Es beinhaltet Unterstützung für Anzeigen und Analysen mit den Tags <amp-ad>, <amp-analytics> und <amp-pixel>. Weitere Einschränkungen sind die Nichtverwendung von benutzerdefiniertem JavaScript und nur interne Stylesheets mit einer Größe von bis zu 50 KB. Die vollständige Liste dieser Einschränkungen und verfügbaren Komponenten finden Sie unter www.ampproject.org.

Nun, in Drupal gibt es wie üblich ein beigetragenes Modul, das sich um all dies für uns kümmert. Aber bevor wir es konfigurieren und implementieren, lassen Sie uns sehen, wie wir AMP für unsere Drupal-Site erhalten.

Herunterladen und Installieren von AMP in Drupal

Wir benötigen im Grunde 4 Dinge – die AMP PHP-Bibliothek, das AMP-Theme, AMP und Schema.org Metatag. Token wird jedoch als Abhängigkeit für AMP und Metatag für Schema.org Metatag benötigt. Der beste Weg, sie herunterzuladen, ist die Verwendung von Composer, da es alle Abhängigkeiten für uns verwaltet.

$ composer require drupal/amp
$ composer require drupal/amptheme
$ composer require drupal/schema_metatag

Jetzt können wir die Module und das Theme entweder mit drush, drupal console oder der Admin-UI aktivieren.

$ drush en token metatag schema_metatag amp -y
$ drush en amptheme ampsubtheme_example -y

Oder

$ drupal module:install token metatag schema_metatag amp
$ drupal theme:install amptheme ampsubtheme_example

Implementieren von AMP in Drupal

Wir müssen ein paar Dinge verstehen, bevor wir AMP auf unserer Drupal-Site aktivieren und konfigurieren.

Die AMP-Seiten funktionieren nur für die Knotenseiten, d. h. Seiten mit der URL /node/{nid} oder /node/{alias}. Standardmäßig ist es deaktiviert und wir müssen AMP für die erforderlichen Inhaltstypen (oder Knoten-Bundles) aktivieren.

Beschleunigen Sie das Laden Ihrer Webseiten, monetarisieren Sie Ihre Inhalte und verbessern Sie die Endbenutzererfahrung, indem Sie AMP implementieren.

Das AMP-Modul bietet einen "AMP"-Anzeigemodus für unseren Knoteneinheitstyp. Dieser Anzeigemodus ist nur zugänglich, wenn wir einen "amp"-Parameter in unserer Anfrage hinzufügen.

    Reguläre Seite :  {your-drupal-site}/node/{nid}
    AMP Version  :   {your-drupal-site}/node/{nid}?amp=1

Wir müssen ein Sub-Theme des AMP-Themes verwenden. Ein "ExAMPle"-Basistheme wird zusammen mitgeliefert, damit wir es ausprobieren können. Dieses Theme wird nur im AMP-Anzeigemodus verwendet. Es wird dringend empfohlen, ein Sub-Theme mit dem AMP-Basistheme zu erstellen.

Aktivieren und Konfigurieren von AMP

Wie bereits erwähnt, müssen wir AMP für die Inhaltstypen oder Knoten-Bundles aktivieren. Sie benötigen es möglicherweise nicht für jeden Inhaltstyp. Um es zu aktivieren, führen Sie die folgenden Schritte aus:

Navigieren Sie zu Verwalten → Konfiguration → AMP-Konfiguration.
Klicken Sie auf "AMP in benutzerdefinierten Anzeigeeinstellungen aktivieren" für den Inhaltstyp, für den Sie AMP aktivieren möchten.

Aktivieren von AMP für einen Inhaltstyp
Erweitern Sie die benutzerdefinierten Anzeigeeinstellungen, aktivieren Sie "AMP" und klicken Sie auf "Speichern".
Jetzt können wir ein AMP-Theme auswählen und optional unsere Analytics-, Adsense- oder DoubleClick-ID hinzufügen. Sie können auch AMP-Pixel für Tracking-Zwecke verwenden. Dies ist ähnlich wie bei E-Mail-Trackern.

Aktivieren Sie zusätzlich die Debugging- und Power-User-Optionen während der Entwicklung. Sie liefern nützliche Statistiken und Warnungen, falls unsere Seite nicht den AMP-Standards entspricht. Die AMP PHP-Bibliothek durchläuft unsere gesamte HTML-Seite und konvertiert alle Nicht-AMP-Tags und -Elemente in ihre Gegenstücke oder entfernt sie. Dies ist nützlich, da unsere Seite potenziell nicht unterstützte AMP-Tags enthalten könnte, wenn der Editor HTML in WYSIWYG einfügen darf, und Google dies bestrafen würde.

Klicken Sie abschließend auf "Konfiguration speichern", wenn Sie fertig sind.

Eine letzte Sache, um die wir uns kümmern müssen, sind die Felder unseres AMP-Anzeigemodus. Das AMP-Modul bietet Feldformate, die wir nach Möglichkeit verwenden müssen, um die Standards einzuhalten.

Navigieren Sie zu Verwalten → Struktur → Inhaltstyp → {your-content-type}.
Klicken Sie auf die Registerkarte "Anzeige verwalten" und wählen Sie den AMP-Anzeigemodus aus.
Wählen Sie nun die AMP-Feldformate wie AMP Iframe, Bild, Zusammenfassung oder Gekürzt, Text oder Video für die jeweiligen Feldtypen aus. Wenn Sie dies nicht tun, wird entweder die PHP-Bibliothek diese Felder vollständig entfernen oder Ihre Seite wird nicht validiert.

Anwenden von AMP-Feldformatierern im AMP-Anzeigemodus
Klicken Sie auf "Speichern", um den Anzeigemodus zu speichern.

Validieren unserer AMP-Seite

Nachdem wir AMP aktiviert haben, lassen Sie uns die regulären und die AMP-Seiten vergleichen. Besuchen Sie die Knotenseite des Bundles, für das Sie AMP aktiviert haben, z. B. /node/10. Dies ist unsere reguläre Seite. Um die AMP-Version dieser Seite anzuzeigen, fügen Sie einen "amp"-Parameter hinzu, d. h. /node/10?amp=1.

AMP-Anzeigemodus des Inhaltstyps mit dem ExAMPle-Sub-Theme — *AMP-Anzeigemodus des Inhaltstyps mit dem Example-Sub-Theme*

Beachten Sie, dass das ExAMPle-Sub-Theme auf die Seite angewendet wurde und es sehr roh und einfach aussieht. Sie möchten wahrscheinlich Ihr eigenes Sub-Theme erstellen, indem Sie das AMP-Basistheme erweitern. Sie können sich auf die Implementierung des ExAMPle-Sub-Themes beziehen, aber vergessen Sie nicht die Einschränkungen für Stylesheets beim Anwenden von CSS.

Lassen Sie uns abschließend dieses HTML mit einem Validator unter https://validator.ampproject.org/ validieren.

*Validieren des Quellcodes unserer AMP-Seite*

Wenn Sie die von der AMP PHP-Bibliothek bereitgestellten Statistiken aktiviert haben, sollten Sie außerdem einen HTML-Kommentar direkt am Ende des Quellcodes sehen.

<!-- =AMP-STATS-FOOTER=
Full HTML document processed by AMP PHP Library (https://github.com/Lullabot/amp-library) at Thu, 26 Apr 2018 17:47:02 +0530
 Time Taken: 203.312 milliseconds (1 second = 1000 milliseconds)
 Number of html tags processed: 252
 PHP Peak memory usage before calling convertToAmpHtml: 20.109 MiB
 PHP Peak memory usage at the end of  convertToAmpHtml: 20.949 MiB 
 * Please note that time taken will increase significantly if you don't have opcache enabled or have XDEBUG enabled.
   Also note that the library downloads initial portions of images to determine dimensions for amp-img tags. 
   If your network is slow, your library processing time will increase and network download time may dominate total time taken for library processing.
=END-AMP-STATS-FOOTER=-->

Wenn Sie das Debugging aktiviert haben, können Sie zusätzlich Warnungen und mögliche Korrekturen anzeigen, indem Sie den Parameter &warnfix=1 in der Anfrage anhängen.

Wir haben AMP nun erfolgreich für unseren Inhaltstyp aktiviert. Jetzt können die Seiten von Google in seinem Proxy-basierten CDN zwischengespeichert werden.

Fazit

Durch die Implementierung von AMP können Sie das Laden Ihrer Webseiten beschleunigen, Ihre Inhalte monetarisieren und vor allem die Endbenutzererfahrung verbessern. Es kann auch zu besseren Suchrankings führen, da Google den AMP-Seiten eine höhere Priorität einräumt.

Es ist jedoch keine Lösung für alles und hat seine eigenen Einschränkungen. Es wurde auch wegen der Tatsache kritisiert, dass letztendlich der gesamte Webverkehr über Google fließt und es daher in der Lage ist, mehr Nutzer im Internet zu verfolgen. Trotzdem implementieren viele beliebte Medienunternehmen wie BBC News, CNN, The Guardian und The Verge AMP, um ihre mobilen Nutzer besser zu bedienen. Unabhängig davon, ob Sie sich für AMP entscheiden oder nicht, sollten Sie auf jeden Fall in Erwägung ziehen, die Erfahrung des ständig wachsenden mobilen Publikums zu verbessern.