Der Nachrichtenkonsum über mobile Endgeräte wächst rapide. Immer mehr Menschen informieren sich unterwegs. Fahrten mit Bus, Bahn Taxi und auch der Cafe-Besuch oder die Pause zwischendurch werden dafür genutzt, um schnell die neuesten Nachrichten abzurufen. Mobile Endgeräte wie Smartphone oder Tablet machen es möglich. Zeitungen, Magazine, Fachzeitschriften, Newsportale, Blogs arbeiten fieberhaft daran, ihre Online-Angebote dem wachsenden Bedarf anzupassen. Die Digitalisierungsquote (der E-Paper-Anteil am Gesamtverkauf), liegt vielfach bereits im zweistelligen Bereich. Dabei gilt es, die Website-Inhalte mobile-tauglich aufzubereiten. Zum einen sollte sich die Darstellung der Webseiten automatisch an die unterschiedlichen Größen der meist kleinformatigen Bildschirme anpassen – Stichwort „Responsive Webdesign“. Die andere große Herausforderung betrifft den Aspekt: Ladezeit. Denn mobil hat man in der Regel wesentlich langsamere Datenverbindungen als z.B. mit dem heimischen/beruflichen W-LAN-Netz. Schneller Seitenaufbau ist das A und O.

Aus diesem Grund hat Google im Oktober 2015 die Einführung des Open-Source-Projekts Accelerated Mobile Pages (AMP) angekündigt, mit dem sich die Leistung und das Benutzererlebnis mobiler Webseiten deutlich verbessern lassen. Ende Februar 2016 wurden die ersten AMP-Seiten eingeführt. Im Folgenden möchte ich Ihnen vorstellen: Was man unter Accelerated Mobile Pages (AMP) versteht, wie Accelerated Mobile Pages das Mobile-Web verändern und wie Sie Accelerated Mobile Pages nutzen können, um die Ladezeiten Ihrer Webseite für mobile Endgeräte zu optimieren.

Themenübersicht

Wie lassen sich mobile Webseiten durch AMP beschleunigen?

 

Das Open-Source-Projekt Accelerated Mobile Pages zielt darauf ab, die Inhalte von mobil aufgerufenen Webseiten bis zu viermal schneller aufrufen zu können. Man erzielt diesen „Geschwindigkeitsvorteil“, indem man das Datenvolumen auf ein absolutes Minimum reduziert. Eine AMP-Webseite basiert auf einem reduzierten Seitenquellcode und enthält lediglich die wichtigsten Bestandteile einer Webseite, wie: Texte, Bilder und Navigationselemente. Dazu hat Google einen neuen, sehr performanten HTML-Code (Google AMP HTML) sowie eine eigene JavaSkript-Bibliothek (AMP JS Library) entwickelt. Alle AMP-konformen Beiträge werden über das sogenannte Open-Source Framework AMP HTML ausgeliefert.

Eine AMP-Seite öffnet in zwei Schritten: Zuerst werden die Seitenbestandteile geladen, die direkt nach dem Anklicken des Beitrags sichtbar sein müssen. Alle weiteren Seiteninhalte werden nachgeladen. Frustrierende Wartezeiten können so auf ein absolutes Minimum reduziert werden, denn AMP-Webseiten können Sie schon während des Ladevorgangs lesen. Und noch einen Vorteil bieten Ihnen Accelerated Mobile Pages: Die Inhalte von AMP-kompatiblen Webseiten werden direkt schon in den Suchergebnissen nachgeladen. Der Leser wird nicht weitergeleitet, sondern bleibt direkt auf der Google-Seite. Smart Caching von Google beschleunigt dabei nochmals die Auslieferung der Seite.

“AMP HTML is a new way to make web pages that are optimized to load instantly on users’ mobile devices. It is designed to support smart caching, predictable performance, and modern, beautiful mobile content. Since AMP HTML is built on existing web technologies, and not a template based system, publishers continue to host their own content, innovate on their user experiences, and flexibly integrate their advertising and business models — all within a technical architecture optimized for speed and performance.”
www.ampproject.org

Weitere Informationen zum AMP-Projekt finden Sie unter www.ampproject.org/docs/get_started/about-amp.html

Für wen eignen sich Accelerated Mobile Pages

Accelerated Mobile Pages eignen sich in erster Linie für Anbieter von Informations- und Nachrichtenseiten, die ihren Lesern ein schnelles und damit nutzerfreundliches Leseerlebnis bieten möchten. Launchpartner des AMP-Projekts waren daher namhafte Medienhäuser und Blogplattformen wie z.B. Spiegel online (spiegel.de), Frankfurter Allgemeine Zeitung (faz.net), Bildzeitung (bild.de), Tagesschau (tagesschau.de) uvm.

Eine Übersicht der Partner des AMP-Projekts finden Sie unter ampproject.org

Nutzen auch Sie Accelerated Mobile Pages zu Ihrem Vorteil, um zum Beispiel Ihre Informationsseiten oder Blogartikel schneller und ansprechender an Ihre Besucher mit mobilen Endgeräten auszuliefern. Accelerated Mobile Pages sorgen nicht nur für ein nutzerfreundliches Leseerlebnis, mit AMP-konformen Webseiten sind Sie auch in puncto SEO gut aufgestellt. Zum einen hat Google bereits mit dem Mobile Update von April 2015 mobile-friendly-content zu einem wichtigen Ranking-Faktor gemacht. Das bedeutet, der Google Suchalgorithmus bevorzugt Webseiten, die eine gute Nutzererfahrung bieten. Zum anderen profitieren Sie mit Accelerated Mobile Pages von einer bevorzugten Platzierung in den Suchergebnissen auf mobilen Endgeräten, denn AMP-konforme Beiträge erscheinen oberhalb der generischen Suchergebnisse in einer eigenen Rubrik – den Top Stories.

Was sind die Unterschiede zwischen Accelerated Mobile Pages und Responsive Webdesign?

  • Pagespeed
    Responsive Webdesign hat das Ziel, die Darstellung einer Webseite automatisch optimal auf die Display-Größe des jeweiligen Endgerätes anzupassen. Kurz gesagt: ein Design für alle Formate, vom großformatigen Widescreen-Monitor bis zum kleinformatigen Smartphone-Displays. Im Vordergrund des Responsive Webdesigns steht größtmögliche Flexibilität. Doch Responsive Design hat einen großen Nachteil: Geschwindigkeit. Webseiten im Responsive Design haben nicht immer die schnellsten Ladezeiten.

Accelerated Mobile Pages dagegen sind ganz klar auf Geschwindigkeit angelegt. Seiteninhalte sollen den Besuchern mit mobilen Endgeräten möglichst schnell zur Verfügung stehen.

  • Statische und dynamische Inhalte
    AMP ist vorrangig für die schnelle Darstellung statischer Inhalte entwickelt worden, wie zum Beispiel Nachrichtenartikel, Blog-Posts und informative Inhalte. Responsive Design eignet sich dagegen auch für die Gestaltung benutzerdefinierter Anwendungen und von Web-Formularen.

 

Während AMP die Ladezeit von mobilen Webseiten verbessert, ist Responsive Design die ideale Lösung für Webdesigner, die großen Wert auf die Funktionalität von Web-Formularen oder benutzerdefinierte JavaScript-Anwendungen legen.

Welche Auswirkungen haben Accelerated Mobile Pages auf die organische und bezahlte Suche?

AMP-konforme Webseiten werden auf mobilen Endgeräten in der Rubrik Top Stories in Form eines Karussells oberhalb der Suchergebnisse angezeigt. Die klassischen organischen Suchergebnisse sowie auch bezahlte Anzeigen rücken dafür weiter nach unten und verlieren an Sichtbarkeit. Das zeigt, welche Bedeutung das AMP-Projekt für Google besitzt.

Anbieter von Informationsseiten, die sich nicht für Accelerated Mobile Pages entscheiden, werden bei der Suche auf mobilen Endgeräten voraussichtlich deutlich an Sichtbarkeit einbüßen, was zu weniger Seitenaufrufen und Klicks führen wird. Das bedeutet: Websites mit statischen Informations-Inhalten sollten sich, um wettbewerbsfähig zu bleiben, für AMP entscheiden.

Wie sich die bezahlte Suche zukünftig auf den Suchseiten mobiler Endgeräte entwickeln wird, ist noch nicht ganz klar. Die traditionellen organischen Inserate werden auf der Ergebnisseite weiter nach unten wandern. Google plant jedoch Vermarktungsmöglichkeiten für AMP-konforme Beiträge. Welche Werbeformate dabei zum Einsatz kommen werden, bleibt abzuwarten.

Wie lässt sich AMP für Ihre Webseite umsetzen?

 

AMP ist ein Werkzeug zur Programmierung von schnell ladenden Inhalten auf mobilen Endgeräten. Dabei wurde gezielt darauf geachtet, dass alle Elemente, die die Ladezeit einer Webseite unnötig verzögern könnten, ausgeschlossen sind. Darunter fallen bestimmte HTML-Tags und Java Skripte, iframe uvm.
Selbst wichtige HTML5 Multimedia-Tags wie img, Video und Audio werden durch benutzerdefinierte Elemente wie Amp-img, Amp-Video- und Amp-Audio ersetzt. Die für AMP-konforme Seiten zugelassenen Java-Skripte wurden in einer eigenen JavaSkript-Bibliothek (AMP JS Library) zusammengefasst.
Sie können aber auch spezifische Erweiterungen wie zum Beispiel AMP-Youtube oder AMP-twitter sowie weitere genehmigte Erweiterungen verwenden.

Tutorials zu AMP

Google hat den gesamten Code auf GitHub unter github.com/ampproject/amphtml zur Verfügung gestellt sowie die AMP JS library unter https://github.com/ampproject/amphtml/tree/master/src.

Eine detaillierte Schritt-für-Schritt-Anleitung finden Sie unter www.ampproject.org/docs/get_started/create_page.html

Stellen Sie sicher, dass Ihre Website den Google-Richtlinien für AMP-Seiten entspricht, damit diese richtig in der Google-Suche angezeigt wird. Hier sind einige der wichtigsten Dinge, die Sie beachten müssen:

Wichtige AMP-Spezifikationen

  • Verweisen Sie von Ihrer normalen Seite auf die AMP-Version Ihrer Seite durch folgenden Tag:
    <Link rel = "amphtml" href = "https://www.IHRE-SEITE.DE/url/to/amp-version.html" />
    
  • Verweisen Sie von Ihrer AMP-Seite mit einem Canonical-Tag auf Ihre normale Seite:
    <Link rel = "canonical" href = "https://www.IHRE-SEITE.DE/url/to/regular-html-version.html" />
    
  • HinweisSollten Sie keine normale (Non-AMP) Seite angelegt haben, verweisen Sie auf der AMP-Seite mit dem Canonical-Tag auf sich selbst:
    <Link rel = "canonical" href = "https://www.IHRE-SEITE.DE/url/to/amp-document.html" />
    
  • Validieren Sie Ihre AMP-Seite
    Eine Anleitung zur Validierung Ihre AMP-Seite finden Sie hier
  • Komfortable AMP-konforme Anpassung von WordPress-Beiträgen
    WordPress-Inhalte lassen sich sehr einfach mit dem Plug-In AMP AMP-konform so aufbereiten, dass diese beschleunigt an mobile Besucher ausgeliefert werden. Die Installation können Sie, wie gewohnt, über das Dashboard vornehmen.

So können Sie prüfen, ob Ihre Accelerated Mobile Pages korrekt funktionieren

 

Das Struktured Data Testing Tool von Google bietet Ihnen die Möglichkeit, Ihre AMP-Artikel direkt zu testen. Das Struktured Daten Testing Tool besitzt einen Filter für „AMP Artikel“, der Ihnen detaillierte Fehlermeldungen zu nicht-konformen Aspekten anzeigt. Nutzen Sie dieses Tool, um Ihre Seiten zu überprüfen.

Die Vorteile der AMPs im Überblick

 

Zum Abschluss möchte ich noch einmal die Vorteile der Accelerated Mobile Pages zusammenfassen:

  • AMP sind deutlich schlanker als normale Webseiten – sie besitzen eine bis zu 10 Mal geringere Datenmenge und laden daher bis zu 4 x Mal schneller als gewöhnliche mobile Seiten.
  • AMPs haben eine bessere Sichtbarkeit: Webseiten, die den Google-AMP-Test bestanden haben, bekommen eine bessere Position in den Suchergebnissen oberhalb der regulären SERP.
  • Die Inhalte von AMP-kompatiblen Seiten werden direkt in den Suchergebnissen nachgeladen. Der Besucher muss die Google-Seite nicht verlassen. Google Caching beschleunigt nochmals die Ladezeiten.
  • AMP ist ein Open Source-Projekt: Der Quellcode, Code-Beispiele und Dokumentationen sind für jedermann frei verfügbar.
  • Die Contents bleiben Bestandteil der entsprechenden Webseite. Google speichert lediglich eine Cache-Version des AMP-konformen Beitrags ab.

Fazit

Accelerated Mobile Pages werden nicht nur den Pagespeed mobiler Webseiten verbessern, sondern haben auch das Potenzial, das Verhalten mobiler Anwender grundlegend zu ändern. Es gibt eigentlich keine Gründe, warum sich Verlage oder Betreiber von informativen Webseiten nicht für AMP entscheiden sollten: Die Implementierung ist einfach und Google hat bereits viele nützliche Tutorials und Ressourcen zur Entwicklung von Accelerated Mobile Pages zur Verfügung gestellt.

Was denken Sie über das Google-Accelerated-Mobile-Pages-Projekt? Werden Sie Ihre Webseite AMP-konform aufbereiten?

Bildnachweis: Fotolia, Lizenz: Host Europe

Wolf-Dieter Fiege

Wolf-Dieter Fiege ist Senior Specialist für Content Marketing & SEO und Chefredakteur des Blogs der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting sowie Serverprodukten in Europa.

4 thoughts on “Wie Sie mit Accelerated Mobile Pages die Ladezeit mobiler Seitenaufrufe beschleunigen

  1. Moin,
    das Leseerlebnis wird durch falsche Verlinkungen getrübt und wird aus SEO Sicht auch wenig Pluspunkte bringen.

    Link1:
    „https://www.ampproject.org/docs/get_started/create_page.html.“

    Link2:
    „http://https//developers.google.com/structured-data/testing-tool/“

    Wer findet den Fehler?

    Sonst hat der Artikel mir gut gefallen.

    viele Grüße
    Markus

    PS: Dies passiert, wenn man überarbeitet und gestresst ist. Wir empfehlen zwischendurch immer mal wieder eine Runde Tischtennis spielen. Das lockert, hält fit und macht den Kopf frei. 😉

  2. Braucht man/soll man für AMP eine spezielle Hosting-Umgebung nutzen? Wenn ja, welche? Oder kann man die AMP-Seiten ohne Probleme auf einem Standard-Server laufen lassen? Da AMP-Seiten statische Seiten sind, helfen Caching-PlugIns?

    • Hallo Alex,
      vielen Dank für die Frage. AMP-Seiten kann man problemlos mit einem Standard-Server betreiben. Du solltest Dich natürlich für einen Hoster entscheiden, der eine gute Erreichbarkeit und Bandbreite gewährleistet. Wähle am besten einen Anbieter, bei dem Dir diese Leistungen transparent in Form von Server-Level-Agreements garantiert werden.
      Mit besten Grüßen
      Wolf-Dieter

Schreibe einen Kommentar

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