Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
  • CMS
Lorenz Hohmann 2. Oktober 2019

Google AMP – Wie Du Accelerated Mobile Pages in WordPress implementierst

Google Amp und Wordpress

AMP (Accelerated Mobile Pages) ist ein Projekt von Google, welches die Ladezeiten von mobilen Websites deutlich beschleunigen soll. Dabei wird eine abgeleitete HTML Struktur verwendet und unnötige Stylings und Skripte fallen weg. Aber was genau ist das und wie kann ich AMP für meine WordPress Seite nutzen? Das klären wir in diesem Artikel!

Was sind Google AMP Websites?

Accelerated Mobile Pages bedeutet zu deutsch „beschleunigte Mobilseiten“ und ist genau das. Deutlich schnellere Webseiten für mobile Endgeräte. Das Open-Source Project wurde 2015 von Google angekündigt und 2016 veröffentlicht.

Dabei ist das Projekt die richtige Antwort auf den Fakt, dass die mobilen Internetnutzer immer mehr werden. Weit mehr als die Hälfte aller Suchanfragen kommen über mobile Endgeräte. Und diese Entwicklung wird in den nächsten Jahren noch weiter voranschreiten.

Zu Erkennen sind AMP Seiten an dem kleinen Blitz Symbol (rot markiert) hinter der URL. Vielleicht sind Dir solche Suchergebnisse schon einmal aufgefallen?

Wenn man ein solches Suchergebnis anklickt sind diese nahezu direkt geladen. Wie das funktioniert, dazu später mehr.

Das folgende Bild ist ein Vergleich der „normalen“ Version im Gegensatz zur AMP Version. In diesem Beispiel ist kaum ein Unterschied zu erkennen, da die AMP Version fast identisch zur „normalen“ Version ist. Theoretisch kann diese Version aber komplett anders aussehen.

Trotz der Ähnlichkeit lädt die AMP Seite viel schneller, aber woran liegt das?

Wie funktioniert AMP?

Für AMP Seiten muss der Webseitenbetreiber eine spezielle Version der Website erstellen (alle Infos findest Du in diesem Artikel). Diese Version besteht aus einem schlanken HTML Code, etwas CSS (nicht mehr als 50 KB) und asynchronem JavaScript Code. Asynchron deshalb, damit alle Inhalte ohne Verzögerung geladen werden können und keine JavaScript Code das Laden verlangsamen kann.

Neben diesen drei Komponenten ist der Cache ein sehr großer Pluspunkt in Sachen Ladezeit. Sobald Google die AMP Version einer Website erkennt, wird diese im Content Delivery Network (CDN) von Google oder Bing gespeichert. Klick ein Benutzer jetzt ein AMP Ergebnis an, muss Google die Daten nur noch aus dem eigenen Cache laden – das passiert binnen weniger Sekunden oder im besten Fall sogar Millisekunden – und an den Benutzer ausgeliefert werden.

AMP Cache Grafik
Quelle: https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/

Mittlerweile ist es auch Möglich Werbung auf Accelerated Mobile Pages zu schalten, dabei wird die Werbung aber nicht wie gewöhnlich direkt in die Website eingebunden, sondern über ein iFrame, um das Rendering nicht zu blockieren. Google Adsense hat dafür unter anderem spezielle Anzeigen, die automatisch auf AMP Seiten eingesetzt werden können.

Kritik am APM Projekt

Das AMP Projekt hat einige Vor- aber auch einige Nachteile. Dadurch solltest Du vor der Einbindung in Deine Website besonders achten und prüfen, ob AMP die richtige Wahl für Dich ist.

1. Ladezeit vs. Funktionen

Der größte Pluspunkt ist die sehr kurze Ladezeit, welche die Absprungrate der Besucher verringert. Keiner mag lästige Ladezeiten. Dafür entfallen bestimmte Funktionen, wie Kommentarfelder auf einer AMP Seite komplett – es wird aber auch weniger Datenvolumen des Besuchers verbraucht.

2. Hervorhebung der Suchergebnisse

Durch den auffälligen Blitz in den Suchergebnissen ist der Besucher vielleicht eher geneigt, auf Deine Seite zu kommen. Allerdings hat Google Karusselle (s. Bild) mit den „wichtigsten“ Seiten eingeführt. Wenn man ein solches Ergebnis anklickt, kann man über einen einfachen Swipe zum nächsten Ergebnis gelangen. Dabei kann es passieren, dass man direkt bei der Konkurrenz landet, und das will man im Normalfall nicht.

Google AMP Karussell

3. Design (CSS)

Das Design von AMP Seiten ist durch die Einsparung von CSS eher minimalistisch gehalten, man hat also nicht eine so starke Freiheit, kann aber auf der anderen Seite auch befreiend sein, alte CSS Lasten los zu werden.
Aber Achtung: Deine „normale“ Version der Website bleibt trotzdem bestehen, die AMP Version existiert nur zusätzlich!

Google AMP und WordPress

WordPress bietet eine Vielzahl an AMP Plugins an. Darunter gibt es ein offizielles Plugin von Mitwirkenden am AMP Projekt, welches gleichzeitig am meisten heruntergeladen wurde: Offizielles AMP Plugin.

Alternativ gibt es noch das Plugin AMP for WP, welches von anderen Entwicklern bereitgestellt wird.

Ich habe beide Plugins getestet und habe – für mich persönlich – festgestellt, dass Zweiteres (AMP for WP) die bessere Wahl ist. Beide sind gute Plugins, keine Frage. Allerdings haben mir beim offiziellen Plugin ein paar Einstellungsmöglichkeiten gefehlt. Im ersten Moment überrumpelt AMP for WP zwar etwas mit der großen Anzahl an Funktionen, welche Dir aber später wirklich sehr hilfreich sein können.

Installation und in Betriebnahme von AMP for WP

Zum Installieren kannst Du das Plugin über den Menüpunkt „Plugins -> Installieren“ suchen, installieren und aktivieren. Fertig! Schon jetzt sollten Deine einzelnen Seiten und Beiträge über den zusätzlichen Parameter /amp verfügbar sein.

Als nächstes solltest Du den Menüpunkt „Settings“ durcharbeiten und ein für Dich passendes Design auswählen.
Aufgepasst: Es gibt vier kostenlose Themes, weitere sind kostenpflichtig. Das ist aber kein Problem, da Du durch eigenes CSS die Themes weiter anpassen kannst.

Danach solltest Du alle Unterpunkte von „Settings“ durchgehen. Hier kannst Du Analysedienste, wie Matomo und Google Analytics einstellen, Platzierungen von Werbebannern einstellen, SEO Einstellungen vornehmen, und vieles, vieles mehr! Wirklich sehr umfangreich und für nahezu jedes Feature gibt es eine Option.

Hier gibt es auch keine Must-Have Settings. Jede Website ist anders und man muss entscheiden, welche Features sinnvoll sind und welche nicht. Eine exakte Beschreibung zu allen Funktionen, findest Du in der Dokumentation der Entwickler.

Werden meine AMP Seiten jetzt schon von Google erfasst?

Ja, das Plugin rendert Deiner „normalen“ Website einen Tag in den Header, der so aussieht:

<link rel="amphtml" href="https://example.com/amp/">

Dadurch weiß Google beim Crawlen Deiner Seite, dass eine AMP Version existiert und kann diese in den Suchergebnissen anzeigen. Um diesen Vorgang zu beschleunigen und auftauchende Fehler zu überprüfen, kannst Du Deine Seite kostenlos in der Google Search Console einreichen.

Wenn ein Artikel oder eine Seite als AMP Version zur Verfügung steht und man nach längerer Zeit Änderungen vornimmt, liegt die alte Version noch bei Google. In diesem Beitrag ist erklärt, wie man den Google AMP Cache manuell leert. Nach einer gewissen Zeit aktualisiert Google aber von alleine Deine Seiten.

Falls Du nach mehreren Monaten Nutzung AMP wieder deaktivieren möchtest, kannst Du dieser Anleitung folgen. Damit werden nach und nach alle AMP Seiten Deiner Website abgeschaltet und aus dem Google Cache entfernt.

Fazit

Accelerated Mobile Pages ist in meinen Augen die richtige Antwort auf immer mehr mobile Internetbenutzer und ist eine Win-Win-Situation für alle Beteiligten. Wobei sich über die Umsetzung streiten lässt und man individuell entscheiden muss, ob sich eine Einbindung von AMP lohnt und sinnvoll ist.

Wie auch bei den meisten Funktionen im Web ist man ja nicht an AMP gebunden, sondern kann, muss aber diese Funktion nicht nutzen. Durch die mittlerweile recht einfache Einrichtung, kann man das System auch testen und wenn es nicht gefällt, mit ein paar gezielten Handgriffen wieder deaktivieren.

Lorenz Hohmann

Lorenz ist Webentwickler & Server Administrator. Damit reicht sein Aufgabengebiet von der Gestaltung des Front-ends bis hin zum Schreiben von Shell-Skripten.

Schreibe einen Kommentar

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