The Good, The Bad, The Ugly – Die Vor und Nachteile von AMP (Accelerated Mobile Pages)

Beschreibung zum kostenlosen Online Marketing Webinar

AMP ist eine tolle Sache um Webseiten schneller zu machen. Aber die strengen Vorgaben und Einschränkungen, die Google für gültige AMP-Webseiten führen manchmal dazu, dass die Seite hässlich wird, dem Besucher nicht das bietet, was er sucht, ihm nicht die volle Funktionalität einer Tollen Webseite zur Verfügung stellt oder manchmal sogar dazu, dass die Seite langsamer ist also die nicht-AMP Seite.
Ich zeige die Vor- und Nachteile von AMP und eine mögliche, spannende Alternative um Webseiten extrem schnell zu machen.

Video zum Webinar

Webinar Termin:

19.12.2017

11:00 Uhr - 11:45 Uhr

Was Du nach dem Webinar gelernt hast:

  • Was die Vor- und Nachteile von AMP sind.
  • Wie man Webseiten ohne AMP extrem schnell machen kann

Zielgruppe:

  • Fortgeschritten

The Good, The Bad, The Ugly – Die Vor- und Nachteile von AMP

User lieben es, wenn sie auf dem Smartphone schnell das angezeigt bekommen, was sie suchen, Google liebt schnelle Websites und manche Programmierer von Websites machen einen Sport daraus, diese Websites soweit zu optimieren, bis man 100 von 100 möglichen Punkten bekommt. Wenn man sich mit diesen, durchaus sinnvollen Thema, näher beschäftigt, dann kommt sehr schnell die Sprache auf AMP. Die Abkürzung steht in diesem Fall für: Accelerated Mobile Pages, also beschleunigte mobile Seiten.

Dabei ist AMP ein gelungener Ansatz, um Websites schneller zu machen. Der Startschuss fiel im Oktober 2015. Vertreter von Google, WordPress und Adobe haben das Projekt AMP ins Leben gerufen, um mit Accelerated Mobile Pages ein komplettes mobiles Ökosystem zu schaffen, so dass Inhalte auf mobilen Endgeräten schneller ausgespielt werden und der User so auch schneller die Antworten bekommt, die er im Internet über sein Smartphone sucht.

Doch Schnelligkeit hat ihren Preis, denn strenge Vorgaben und gewisse Einschränkungen bei den Möglichkeiten führen dazu, dass gültige Accelerated Mobile Pages Websites „hässlich“ oder manchmal auch langsam wird, dem User unter Umständen nicht das liefert, was er erwartet und die eingeschränkte Funktionalität die User Experience beeinflusst.

Gregor Meier zeigt im Webinar die Vor- und Nachteile von AMP und eine mögliche Alternative, um Websites extrem schnell zu machen.

Bleib sauber auf dem Weg

Jede Website basiert auf einem Programmcode. Dieser Code sagt dem Browser, was wie dargestellt werden soll. Doch oft schleichen sich Fehler im Programmcode ein, bzw. es werden bestimmte Deklarationen mit eingebunden, die auf der Website nicht genutzt werden. Fehler und nicht genutzte Deklarationen sorgen dafür, dass Websites langsamer als nötig werden. Das heißt, ein sauber programmierter Code ist extrem wichtig, sorgt für Geschwindigkeit und ist die Grundlage für Accelerated Mobile Pages.

Doch was sind AMPs eigentlich. Einfach ausgedrückt ist AMP ein HTML-Derivat, das speziell für die Erstellung und Wiedergabe von mobilen Websites gedacht ist. Doch wie bekommt man 100 von 100 möglichen Punkten? Nun, da braucht es viel Erfahrung und Detailarbeit, doch Accelerated Mobile Pages macht es hier konsequent einfach. Bei AMPs setzt man auf einfache Elemente, keine externen Quellen und einen hochoptimierten Code. So müssen die Größen von Bildern im Code hinterlegt werden, so dass die Seite gleich von Anfang an korrekt gerendert und abgebildet wird. Um das zu erreichen, setzt man auf optimierte AMP-Scripte und AMP-Tags.

Doch betrachten wir AMP aus drei unterschiedlichen Perspektiven, nämlich:

  • The Good,
  • The Bad,
  • The Ugly.

The Good

Die Vorteile von Accelerated Mobile Pages liegen auf der Hand, denn in erster Linie geht es darum, wirklich geilend Content zuerst auszuliefern – Cockies und Co. kommen dann an zweiter Stelle, da diese für den User meist irrelevant sind.

Mit anderen Worten: Das, was der User wirklich sehen will, wird ihm auch als erstes präsentiert.

Doch AMP bietet noch zwei weitere Vorteile. Zum einen werden schnelle und fehlerfreie Seiten mit AMP von Google bevorzugt und ggf. auch direkt im Google-Cache aufgenommen, bzw. Newsseiten werden, Dank AMP, im AMP-Karussell von Google aufgenommen. Das bedeutet, dass diese News bevorzugt und häufiger ausgespielt werden, was am Ende für mehr Besucher und Klicks gut ist. Doch damit das passiert, muss die Website alle AMP-Vorgaben erfüllen.

Erste Anlaufstelle ist die Google Search Console. Hier bekommt man in der passenden Übersicht eine Aufstellung über alle festgestellten AMP-Fehler. Eine gute Hilfe, um sich an die Fehlerbehebung zu machen. Wichtig hierbei ist, dass wirklich alle Fehler behoben sein müssen, damit die Seite bei Google im Cache landet, bzw. im AMP-Karussell aufgenommen wird. Aus diesem Grund ist das Thema AMP für Newsseiten extrem wichtig und spannend, denn wenn Google eine Suchanfrage feststellt, die offensichtlich nach News sucht, dann werden in den Suchergebnissen zusätzlich auch passende Beiträge aus dem AMP-Karussell ausgespielt. Am Ende bedeutet das für die Newsseiten mehr Traffic – doch das hat seinen Preis. Dazu später mehr im Abschnitt: The Bad.

Accelerated Mobile Pages vs. Mobile First

Ein Unterschied zuerst. Accelerated Mobile Pages und Mobile First haben zwei unterschiedliche Ansätze, und verfolgen vom Prinzip her auch komplett unterschiedliche Ziele.

  • Bei Mobile First liegt der Fokus darauf, Websites responsive zu programmieren, so dass diese auf allen Formaten, also Desktop, Tablet oder Smartphone, bestmöglich abgebildet werden.
  • AMP hingegen ist ein eigener abgetrennter Weg und reduziert hierbei die Möglichkeiten auf das Wesentliche. Für den User heißt das, dass er schnell die gewünschten Inhalte bekommt, und dabei Bandbreite und Datenvolumen geschont wird.

Bei der Erstellung der Website bedeutet das aber auch, dass der Produktionsprozess getrennt wird. Auf der einen Seite steht AMP, das ausschließlich für die Darstellung auf Smartphones gedacht ist, und auf der Seite kann man sich voll und ganz auf die Produktion der Desktop-Variante konzentrieren. Gerade unter WordPress wird das, mit dem Einsatz eines AMP-Plug-Ins ermöglicht. Klar, WordPress ist in Bezug auf CMS fast schon ein Quasistandard, außerdem ist WordPress Mitinitiator der AMP-Initiative.

Mit dem passenden Plug-In kann man auf einfache Art und Weise aus dem vorhandenen Content eine AMP-Version extrahieren. Zwar hat man hier keine weitere Möglichkeit mehr, um in den Code einzugreifen, doch es ist die schnellste Art, um einen korrekten Code für AMP zu generieren.

Was bringt das alles?

Soviel sollte bis jetzt klar sein … Accelerated Mobile Pages sorgt dafür, dass Inhalte schneller auf mobilen Endgeräten dargestellt werden. Das passiert zum einen, da die Inhalte auf das Wesentliche reduziert– und dabei auf einige Möglichkeiten verzichtet werden. Zum anderen aber auch, weil perfekte AMP-Sites im Google-Cache für den schnellen Download vorgehalten werden. Dadurch werden Inhalte blitzschnell auf dem Endgerät angezeigt. Technisch sieht das so aus, dass Google eine Kopie der Website im eigenen Cache speichert. Wird nun eine passende Suchanfrage gestellt, dann werden einige Inhalte dieser Seite schon auf Verdacht im Hintergrund, direkt aus dem Cache, auf das Smartphone übertragen. Wird nun tatsächlich auf den Link geklickt, dann erscheint praktisch sofort der wichtigste Teil des Inhalts, der Rest wird sofort nachgeladen.

An dieser Stelle wird auch schnell deutlich, wo die Grenzen von Accelerated Mobile Pages liegen. Bei einem Online-Shop, mit teilweise dynamischen Inhalten, funktioniert dieses Prinzip nicht, denn dynamische Inhalte funktionieren bei Websites, die aus dem Google-Cache ausgespielt werden, nicht. Auch dazu gleich mehr.

Zeit für ein kleines Zwischenfazit

Accelerated Mobile Pages setzt darauf, die wesentlichen Inhalte schnell auszuliefern, klare Vorgaben und Bedingungen zwingen zu einem Clean Code, doch am Ende bedeutet das auch, auf einige Möglichkeiten zu verzichten und, dass die Website inhaltlich statisch ist.

Das bringt uns zu: The Bad

Nachdem alle guten Punkte und Vorteile dargestellt sind, kommen wir nun zu den Nachteilen und Einschränkungen. Es werden derzeit keine dynamischen Inhalte ausgespielt. Dadurch werden unter Umständen Werbeanzeigen, die außerhalb von Google AdWords generiert werden, werden nicht angezeigt. Das heißt, dass nur noch klassische Banneranzeigen geschaltet werden, und so ggf. Damenhygieneartikel von Männern angeschaut werden, oder Bierwerbung erscheint, und wird von Frauen angeschaut– wobei Frauen natürlich auch Bier trinken. Vielmehr geht es hier um das Prinzip, dass Anzeigen nicht mehr dynamisch auf den jeweiligen Empfänger zugeschnitten werden können. Am Ende bedeutet das, dass es eine stärkere Abhängigkeit von Google gibt, gerade im Hinblick auf Google Ads und Google Analytics.

Besonders schwerwiegend ist dieser Umstand zum Beispiel für Nachrichtenredaktionen. Hier gibt es Paywalls und Anzeigen von anderen Display-Networks, die einen besseren Verdienst liefern, als zum Beispiel Google AdSense. Nachrichtenredaktionen müssen hier also ganz genau abwägen und selbst entscheiden.

Zum Schluss: The Ugly

Doch auch Accelerated Mobile Pages hat seine schmutzige, dunkle Seite. Nicht alles läuft wie geplant und manche Ergebnisse sind einfach nur noch erstaunlich.

Zum Beispiel sollten Weiterleitungen so weit wie möglich vermieden werden, denn jede Weiterleitung kostet Zeit. Doch auch eine Umleitung auf AMP ist eine Weiterleitung. Letztlich sind das die kleinen Stolpersteine, die eine 100 von 100-Punkte-Bewertung unmöglich machen. Doch diese Bewertung ist nicht der heilige Gral – am Ende zählt der real gemessene Speed einer Website.

Genau an dieser Stelle wird es seltsam, denn es gibt Situationen, unter denen AMP-Seiten langsamer ausgespielt werden, als gut optimierte mobile Seiten. Einige Tests mit webpagetest.org haben sogar zum Vorschein gebracht, dass AMP-Seiten doppelt so viel Zeit zum Laden gebraucht haben, als gut optimierte mobile Seiten. Das ist … erstaunlich, denn eigentlich sollte ja genau das vermieden werden. Wenn man sich an Standards hält, dann ist eine mobile Website oft eine bessere Lösung.

Her mit den Alternativen

Will man auf Alternativen setzen, dann heißt es, auf Standards zu setzen. Am besten gelingt das, wenn man sich auf die Rosinen konzentriert, diese herauspikt und optimiert. Konkret heißt das, auch hier Bildgrößen anzugeben, CSS auf das reduzieren, was tatsächlich benutzt wird, JavaScript vermeiden, auf globale Skripte zu verzichten und above-the-fold Content zuerst auszuliefern.

Es läuft auf zwei Punkte hinaus:

1. Sie sind der Herr Ihrer Daten und
2. Sie müssen entscheiden, was der User zuerst zu Gesicht bekommt.

Einige Grundlagen im Schnelldurchlauf

  • Bilder machen Websites langsam, doch wenn schon im Code die Bildgröße angegeben wird, hat das einen großen Vorteil. Beim Rendern wird das Bild in der korrekten Größe von Anfang an so berücksichtigt, dass die nachzuladende Seite nicht immer neu gerendert werden muss. Mehr noch, wird dem Browser gleich von Anfang an die richtige Größe mitgeteilt, dann wird die Fläche so freigehalten, dass die Texte im Browser nicht immer springen. Für die User Experience ist das ein deutliches Plus, vor allem wenn der User schon mit dem Lesen angefangen hat.
  • Bei CSS wird immer erst der gesamte Code geladen, und dann interpretiert. Doch es gibt einige Stylesheet-Definitionen, die auf einem Smartphone nicht gebraucht werden, nämlich die Darstellung für Drucker.
  • Für die erste und schnellste Darstellung geht es zuerst darum, H1- und H2-Titel zu definieren und die Schriftart festzulegen. Am Ende sind das nur 20 oder 30 Zeilen Code, um die es zuerst bei der Auslieferung des Contents geht. Doch nicht optimierter Code enthält gut und gerne 200 bis 300 Zeilen Code – und der kostet bei der Interpretation und Ausführung Zeit – viel Zeit!
  • Gerade unter WordPress ist das meist etwas komplizierter, doch die Arbeit lohnt sich. Das Problem hierbei ist, dass sich manche Plug-Ins gegenseitig beeinflussen, bzw. sogar im Wege stehen. Doch auch hier gibt es unter WordPress Lösungen. Mit den entsprechenden Plug-Ins ist es möglich, auf einzelnen Seiten bestimmte Scripte auszuschließen bzw. zu deaktivieren. Mehr noch, denn einige Inhalte lassen sich auch so in den Footer verschieben, dass diese erst am Ende geladen und dargestellt werden. Dadurch kann man Einfluss auf die Reihenfolge der Darstellung nehmen, und für den User zuerst die relevanten Inhalte ausspielen.
  • Eine weitere Hilfe bietet das Plug-In „Dust me“ für den Browser Firefox. Mit diesem Plug-In kann eine ganze Seite komplett durchleuchtet werden. Im Detail geht es darum herauszufinden, welche CSS-Deklarationen benutzt, welche nur teilweise benutzt und welche CSS-Deklarationen überhaupt nicht verwendet werden. Am Ende bietet das Plug-In die Möglichkeit, um einen optimierten CSS-Code zu exportieren, der nur die CSS-Deklarationen enthält, die auch tatsächlich benutzt werden. Dieser Code kann dann für die Veröffentlichung genutzt werden, und man verzichtet spielend auf einige Hundert Deklarationen, die nicht benötigt werden.
  • Einen etwas anderen Ansatz, um den CSS-Code zu optimieren, geht das Online-Tool Critical Path CSS Generator. Hier werden einzelne Seiten optimiert, zum Beispiel die Startseite oder eine Landingpage. Hierbei wird die aktuelle URL der Site eingegeben, und dann wird der Inhalt auf Herz und Nieren geprüft, so dass am Ende ein bereinigter CSS-Code steht. Eine einfache Möglichkeit, um den Code zu optimieren, denn am Ende steht der Inhalt, den man wirklich benötigt.
  • Mit den passenden WordPress Plug-Ins lassen sich einzelne Inhalte in den Footer verschieben. Der Vorteil hierbei ist, dass diese Inhalte auch erst zum Schluss geladen werden. Dadurch kann man, zumindest in gewisser Weise, steuern, dass die wichtigsten Inhalte sofort ausgespielt werden, und alle weiteren Inhalte kommen später.

Zusammenfassung

Accelerated Mobile Pages macht Websites rasend schnell und kann, an den richtigen Stellen und für die passenden Inhalte, für einen echten Schub an Traffic und Klicks sorgen. Optimierte und fehlerfreie Websites bekommen ein besseres Ranking, landen im Idealfall im Google-Cache und werden nochmals, bei passender Suchanfrage, um einiges schneller ausgeliefert.

Auch die Trennung von mobilen Inhalten und Webseiten, die auf Desktop-Rechnern dargestellt werden, bringt Vorteile mit sich. Mit AMP ist das Thema relativ klar und einfach zu realisieren, so dass man sich am Ende mehr auf die Gestaltung für Desktops konzentrieren kann.

Doch am meisten profitieren Anbieter von News, wenn die Infos wie Accelerated Mobile Pages ausgeliefert werden, denn wenn man hier perfekt aufbereitete Infos liefert, dann landet man auch im AMP-Karussell von Google, was am Ende auch hier für mehr Traffic sorgt. Allerdings muss hierbei zuerst entscheiden werden, wie man mit der Anzeigenschaltung umgeht, denn dynamische Inhalte und Inhalte von anderen Display-Networks fallen hierbei weg.

Noch einige Themen aus der FAQ-Runde

  • Das WordPress-Plug-In für AMP liefert den passenden Code, allerdings ohne das man hier groß eingreifen kann.
  • Feste Bildgrößen haben natürlich eine Auswirkung beim responsive Design, weshalb man hier idealerweise nach mobiler Nutzung und Darstellung auf Desktop-Rechnern unterscheidet.
  • Beim responsive Design kann man die vorhandenen Tags manuell durch AMP-Tags ersetzen.
  • Für Online-Shops ist AMP derzeit nicht geeignet, da via AMP keine dynamischen Inhalte unterstützt werden. Erst wenn Google hier etwas ändert, kann AMP auch für Online-Shops attraktiv sein.
  • Google hat kürzlich interne Test gefahren, um festzustellen, ob AMP-optimierte Seiten mit Google AdWords bessere Ergebnisse liefern, doch derzeit geht man hier mit keinen Informationen an die Öffentlichkeit.
  • Für Landingpages kann eine AMP-Optimierung absolut sinnvoll sein, doch das muss von Fall zu Fall geprüft werden.

The Good, The Bad, The Ugly – Die Vor- und Nachteile von AMP

User lieben es, wenn sie auf dem Smartphone schnell das angezeigt bekommen, was sie suchen, Google liebt schnelle Websites und manche Programmierer von Websites machen einen Sport daraus, diese Websites soweit zu optimieren, bis man 100 von 100 möglichen Punkten bekommt. Wenn man sich mit diesen, durchaus sinnvollen Thema, näher beschäftigt, dann kommt sehr schnell die Sprache auf AMP. Die Abkürzung steht in diesem Fall für: Accelerated Mobile Pages, also beschleunigte mobile Seiten.

Dabei ist AMP ein gelungener Ansatz, um Websites schneller zu machen. Der Startschuss fiel im Oktober 2015. Vertreter von Google, WordPress und Adobe haben das Projekt AMP ins Leben gerufen, um mit Accelerated Mobile Pages ein komplettes mobiles Ökosystem zu schaffen, so dass Inhalte auf mobilen Endgeräten schneller ausgespielt werden und der User so auch schneller die Antworten bekommt, die er im Internet über sein Smartphone sucht.

Doch Schnelligkeit hat ihren Preis, denn strenge Vorgaben und gewisse Einschränkungen bei den Möglichkeiten führen dazu, dass gültige Accelerated Mobile Pages Websites „hässlich“ oder manchmal auch langsam wird, dem User unter Umständen nicht das liefert, was er erwartet und die eingeschränkte Funktionalität die User Experience beeinflusst.

Gregor Meier zeigt im Webinar die Vor- und Nachteile von AMP und eine mögliche Alternative, um Websites extrem schnell zu machen.

Bleib sauber auf dem Weg

Jede Website basiert auf einem Programmcode. Dieser Code sagt dem Browser, was wie dargestellt werden soll. Doch oft schleichen sich Fehler im Programmcode ein, bzw. es werden bestimmte Deklarationen mit eingebunden, die auf der Website nicht genutzt werden. Fehler und nicht genutzte Deklarationen sorgen dafür, dass Websites langsamer als nötig werden. Das heißt, ein sauber programmierter Code ist extrem wichtig, sorgt für Geschwindigkeit und ist die Grundlage für Accelerated Mobile Pages.

Doch was sind AMPs eigentlich. Einfach ausgedrückt ist AMP ein HTML-Derivat, das speziell für die Erstellung und Wiedergabe von mobilen Websites gedacht ist. Doch wie bekommt man 100 von 100 möglichen Punkten? Nun, da braucht es viel Erfahrung und Detailarbeit, doch Accelerated Mobile Pages macht es hier konsequent einfach. Bei AMPs setzt man auf einfache Elemente, keine externen Quellen und einen hochoptimierten Code. So müssen die Größen von Bildern im Code hinterlegt werden, so dass die Seite gleich von Anfang an korrekt gerendert und abgebildet wird. Um das zu erreichen, setzt man auf optimierte AMP-Scripte und AMP-Tags.

Doch betrachten wir AMP aus drei unterschiedlichen Perspektiven, nämlich:

  • The Good,
  • The Bad,
  • The Ugly.

The Good

Die Vorteile von Accelerated Mobile Pages liegen auf der Hand, denn in erster Linie geht es darum, wirklich geilend Content zuerst auszuliefern – Cockies und Co. kommen dann an zweiter Stelle, da diese für den User meist irrelevant sind.

Mit anderen Worten: Das, was der User wirklich sehen will, wird ihm auch als erstes präsentiert.

Doch AMP bietet noch zwei weitere Vorteile. Zum einen werden schnelle und fehlerfreie Seiten mit AMP von Google bevorzugt und ggf. auch direkt im Google-Cache aufgenommen, bzw. Newsseiten werden, Dank AMP, im AMP-Karussell von Google aufgenommen. Das bedeutet, dass diese News bevorzugt und häufiger ausgespielt werden, was am Ende für mehr Besucher und Klicks gut ist. Doch damit das passiert, muss die Website alle AMP-Vorgaben erfüllen.

Erste Anlaufstelle ist die Google Search Console. Hier bekommt man in der passenden Übersicht eine Aufstellung über alle festgestellten AMP-Fehler. Eine gute Hilfe, um sich an die Fehlerbehebung zu machen. Wichtig hierbei ist, dass wirklich alle Fehler behoben sein müssen, damit die Seite bei Google im Cache landet, bzw. im AMP-Karussell aufgenommen wird. Aus diesem Grund ist das Thema AMP für Newsseiten extrem wichtig und spannend, denn wenn Google eine Suchanfrage feststellt, die offensichtlich nach News sucht, dann werden in den Suchergebnissen zusätzlich auch passende Beiträge aus dem AMP-Karussell ausgespielt. Am Ende bedeutet das für die Newsseiten mehr Traffic – doch das hat seinen Preis. Dazu später mehr im Abschnitt: The Bad.

Accelerated Mobile Pages vs. Mobile First

Ein Unterschied zuerst. Accelerated Mobile Pages und Mobile First haben zwei unterschiedliche Ansätze, und verfolgen vom Prinzip her auch komplett unterschiedliche Ziele.

  • Bei Mobile First liegt der Fokus darauf, Websites responsive zu programmieren, so dass diese auf allen Formaten, also Desktop, Tablet oder Smartphone, bestmöglich abgebildet werden.
  • AMP hingegen ist ein eigener abgetrennter Weg und reduziert hierbei die Möglichkeiten auf das Wesentliche. Für den User heißt das, dass er schnell die gewünschten Inhalte bekommt, und dabei Bandbreite und Datenvolumen geschont wird.

Bei der Erstellung der Website bedeutet das aber auch, dass der Produktionsprozess getrennt wird. Auf der einen Seite steht AMP, das ausschließlich für die Darstellung auf Smartphones gedacht ist, und auf der Seite kann man sich voll und ganz auf die Produktion der Desktop-Variante konzentrieren. Gerade unter WordPress wird das, mit dem Einsatz eines AMP-Plug-Ins ermöglicht. Klar, WordPress ist in Bezug auf CMS fast schon ein Quasistandard, außerdem ist WordPress Mitinitiator der AMP-Initiative.

Mit dem passenden Plug-In kann man auf einfache Art und Weise aus dem vorhandenen Content eine AMP-Version extrahieren. Zwar hat man hier keine weitere Möglichkeit mehr, um in den Code einzugreifen, doch es ist die schnellste Art, um einen korrekten Code für AMP zu generieren.

Was bringt das alles?

Soviel sollte bis jetzt klar sein … Accelerated Mobile Pages sorgt dafür, dass Inhalte schneller auf mobilen Endgeräten dargestellt werden. Das passiert zum einen, da die Inhalte auf das Wesentliche reduziert– und dabei auf einige Möglichkeiten verzichtet werden. Zum anderen aber auch, weil perfekte AMP-Sites im Google-Cache für den schnellen Download vorgehalten werden. Dadurch werden Inhalte blitzschnell auf dem Endgerät angezeigt. Technisch sieht das so aus, dass Google eine Kopie der Website im eigenen Cache speichert. Wird nun eine passende Suchanfrage gestellt, dann werden einige Inhalte dieser Seite schon auf Verdacht im Hintergrund, direkt aus dem Cache, auf das Smartphone übertragen. Wird nun tatsächlich auf den Link geklickt, dann erscheint praktisch sofort der wichtigste Teil des Inhalts, der Rest wird sofort nachgeladen.

An dieser Stelle wird auch schnell deutlich, wo die Grenzen von Accelerated Mobile Pages liegen. Bei einem Online-Shop, mit teilweise dynamischen Inhalten, funktioniert dieses Prinzip nicht, denn dynamische Inhalte funktionieren bei Websites, die aus dem Google-Cache ausgespielt werden, nicht. Auch dazu gleich mehr.

Zeit für ein kleines Zwischenfazit

Accelerated Mobile Pages setzt darauf, die wesentlichen Inhalte schnell auszuliefern, klare Vorgaben und Bedingungen zwingen zu einem Clean Code, doch am Ende bedeutet das auch, auf einige Möglichkeiten zu verzichten und, dass die Website inhaltlich statisch ist.

Das bringt uns zu: The Bad

Nachdem alle guten Punkte und Vorteile dargestellt sind, kommen wir nun zu den Nachteilen und Einschränkungen. Es werden derzeit keine dynamischen Inhalte ausgespielt. Dadurch werden unter Umständen Werbeanzeigen, die außerhalb von Google AdWords generiert werden, werden nicht angezeigt. Das heißt, dass nur noch klassische Banneranzeigen geschaltet werden, und so ggf. Damenhygieneartikel von Männern angeschaut werden, oder Bierwerbung erscheint, und wird von Frauen angeschaut– wobei Frauen natürlich auch Bier trinken. Vielmehr geht es hier um das Prinzip, dass Anzeigen nicht mehr dynamisch auf den jeweiligen Empfänger zugeschnitten werden können. Am Ende bedeutet das, dass es eine stärkere Abhängigkeit von Google gibt, gerade im Hinblick auf Google Ads und Google Analytics.

Besonders schwerwiegend ist dieser Umstand zum Beispiel für Nachrichtenredaktionen. Hier gibt es Paywalls und Anzeigen von anderen Display-Networks, die einen besseren Verdienst liefern, als zum Beispiel Google AdSense. Nachrichtenredaktionen müssen hier also ganz genau abwägen und selbst entscheiden.

Zum Schluss: The Ugly

Doch auch Accelerated Mobile Pages hat seine schmutzige, dunkle Seite. Nicht alles läuft wie geplant und manche Ergebnisse sind einfach nur noch erstaunlich.

Zum Beispiel sollten Weiterleitungen so weit wie möglich vermieden werden, denn jede Weiterleitung kostet Zeit. Doch auch eine Umleitung auf AMP ist eine Weiterleitung. Letztlich sind das die kleinen Stolpersteine, die eine 100 von 100-Punkte-Bewertung unmöglich machen. Doch diese Bewertung ist nicht der heilige Gral – am Ende zählt der real gemessene Speed einer Website.

Genau an dieser Stelle wird es seltsam, denn es gibt Situationen, unter denen AMP-Seiten langsamer ausgespielt werden, als gut optimierte mobile Seiten. Einige Tests mit webpagetest.org haben sogar zum Vorschein gebracht, dass AMP-Seiten doppelt so viel Zeit zum Laden gebraucht haben, als gut optimierte mobile Seiten. Das ist … erstaunlich, denn eigentlich sollte ja genau das vermieden werden. Wenn man sich an Standards hält, dann ist eine mobile Website oft eine bessere Lösung.

Her mit den Alternativen

Will man auf Alternativen setzen, dann heißt es, auf Standards zu setzen. Am besten gelingt das, wenn man sich auf die Rosinen konzentriert, diese herauspikt und optimiert. Konkret heißt das, auch hier Bildgrößen anzugeben, CSS auf das reduzieren, was tatsächlich benutzt wird, JavaScript vermeiden, auf globale Skripte zu verzichten und above-the-fold Content zuerst auszuliefern.

Es läuft auf zwei Punkte hinaus:

1. Sie sind der Herr Ihrer Daten und
2. Sie müssen entscheiden, was der User zuerst zu Gesicht bekommt.

Einige Grundlagen im Schnelldurchlauf

  • Bilder machen Websites langsam, doch wenn schon im Code die Bildgröße angegeben wird, hat das einen großen Vorteil. Beim Rendern wird das Bild in der korrekten Größe von Anfang an so berücksichtigt, dass die nachzuladende Seite nicht immer neu gerendert werden muss. Mehr noch, wird dem Browser gleich von Anfang an die richtige Größe mitgeteilt, dann wird die Fläche so freigehalten, dass die Texte im Browser nicht immer springen. Für die User Experience ist das ein deutliches Plus, vor allem wenn der User schon mit dem Lesen angefangen hat.
  • Bei CSS wird immer erst der gesamte Code geladen, und dann interpretiert. Doch es gibt einige Stylesheet-Definitionen, die auf einem Smartphone nicht gebraucht werden, nämlich die Darstellung für Drucker.
  • Für die erste und schnellste Darstellung geht es zuerst darum, H1- und H2-Titel zu definieren und die Schriftart festzulegen. Am Ende sind das nur 20 oder 30 Zeilen Code, um die es zuerst bei der Auslieferung des Contents geht. Doch nicht optimierter Code enthält gut und gerne 200 bis 300 Zeilen Code – und der kostet bei der Interpretation und Ausführung Zeit – viel Zeit!
  • Gerade unter WordPress ist das meist etwas komplizierter, doch die Arbeit lohnt sich. Das Problem hierbei ist, dass sich manche Plug-Ins gegenseitig beeinflussen, bzw. sogar im Wege stehen. Doch auch hier gibt es unter WordPress Lösungen. Mit den entsprechenden Plug-Ins ist es möglich, auf einzelnen Seiten bestimmte Scripte auszuschließen bzw. zu deaktivieren. Mehr noch, denn einige Inhalte lassen sich auch so in den Footer verschieben, dass diese erst am Ende geladen und dargestellt werden. Dadurch kann man Einfluss auf die Reihenfolge der Darstellung nehmen, und für den User zuerst die relevanten Inhalte ausspielen.
  • Eine weitere Hilfe bietet das Plug-In „Dust me“ für den Browser Firefox. Mit diesem Plug-In kann eine ganze Seite komplett durchleuchtet werden. Im Detail geht es darum herauszufinden, welche CSS-Deklarationen benutzt, welche nur teilweise benutzt und welche CSS-Deklarationen überhaupt nicht verwendet werden. Am Ende bietet das Plug-In die Möglichkeit, um einen optimierten CSS-Code zu exportieren, der nur die CSS-Deklarationen enthält, die auch tatsächlich benutzt werden. Dieser Code kann dann für die Veröffentlichung genutzt werden, und man verzichtet spielend auf einige Hundert Deklarationen, die nicht benötigt werden.
  • Einen etwas anderen Ansatz, um den CSS-Code zu optimieren, geht das Online-Tool Critical Path CSS Generator. Hier werden einzelne Seiten optimiert, zum Beispiel die Startseite oder eine Landingpage. Hierbei wird die aktuelle URL der Site eingegeben, und dann wird der Inhalt auf Herz und Nieren geprüft, so dass am Ende ein bereinigter CSS-Code steht. Eine einfache Möglichkeit, um den Code zu optimieren, denn am Ende steht der Inhalt, den man wirklich benötigt.
  • Mit den passenden WordPress Plug-Ins lassen sich einzelne Inhalte in den Footer verschieben. Der Vorteil hierbei ist, dass diese Inhalte auch erst zum Schluss geladen werden. Dadurch kann man, zumindest in gewisser Weise, steuern, dass die wichtigsten Inhalte sofort ausgespielt werden, und alle weiteren Inhalte kommen später.

Zusammenfassung

Accelerated Mobile Pages macht Websites rasend schnell und kann, an den richtigen Stellen und für die passenden Inhalte, für einen echten Schub an Traffic und Klicks sorgen. Optimierte und fehlerfreie Websites bekommen ein besseres Ranking, landen im Idealfall im Google-Cache und werden nochmals, bei passender Suchanfrage, um einiges schneller ausgeliefert.

Auch die Trennung von mobilen Inhalten und Webseiten, die auf Desktop-Rechnern dargestellt werden, bringt Vorteile mit sich. Mit AMP ist das Thema relativ klar und einfach zu realisieren, so dass man sich am Ende mehr auf die Gestaltung für Desktops konzentrieren kann.

Doch am meisten profitieren Anbieter von News, wenn die Infos wie Accelerated Mobile Pages ausgeliefert werden, denn wenn man hier perfekt aufbereitete Infos liefert, dann landet man auch im AMP-Karussell von Google, was am Ende auch hier für mehr Traffic sorgt. Allerdings muss hierbei zuerst entscheiden werden, wie man mit der Anzeigenschaltung umgeht, denn dynamische Inhalte und Inhalte von anderen Display-Networks fallen hierbei weg.

Noch einige Themen aus der FAQ-Runde

  • Das WordPress-Plug-In für AMP liefert den passenden Code, allerdings ohne das man hier groß eingreifen kann.
  • Feste Bildgrößen haben natürlich eine Auswirkung beim responsive Design, weshalb man hier idealerweise nach mobiler Nutzung und Darstellung auf Desktop-Rechnern unterscheidet.
  • Beim responsive Design kann man die vorhandenen Tags manuell durch AMP-Tags ersetzen.
  • Für Online-Shops ist AMP derzeit nicht geeignet, da via AMP keine dynamischen Inhalte unterstützt werden. Erst wenn Google hier etwas ändert, kann AMP auch für Online-Shops attraktiv sein.
  • Google hat kürzlich interne Test gefahren, um festzustellen, ob AMP-optimierte Seiten mit Google AdWords bessere Ergebnisse liefern, doch derzeit geht man hier mit keinen Informationen an die Öffentlichkeit.
  • Für Landingpages kann eine AMP-Optimierung absolut sinnvoll sein, doch das muss von Fall zu Fall geprüft werden.