1. Blog

3 Vorteile von Google AMP in der mobilen Suche

Im Oktober dieses Jahres hatten die „Accelerated Mobile Pages“, kurz AMP, ihr 1-jähriges. Die Initiative von Google, die das mobile Web schneller machen soll, hat sich seitdem weit verbreitet, zumindest unter den großen Publishern: Mit Washington Post, Gizmodo und Wired sind große US-Onlinemedien mit an Bord.

3 Vorteile von Google AMP in der mobilen Suche

Nutzer von Wordpress.com haben AMP out-of-the-box, eigene WordPress-Installationen können ein Plugin installieren. Ähnliche Lösungen sind für weitere Content-Management-Systeme, Static Site Generator und Build Tools vorhanden oder können mit ein wenig Aufwand programmiert werden.

Viele Gründe, die Initiative AMP und die Technologie dahinter ernst zu nehmen. Doch was ist das überhaupt? Wie funktioniert es? Und was sind die Vorteile?

Was sind Accelerated Mobile Pages (AMP)?

Das AMP-Projekt ist zwar vom Suchmaschinengiganten Google initiiert, wird aber als Open-Source-Project geführt, so das sich weltweit jeder Entwickler daran beteiligen kann.

Die verwendeten Technologien sind nicht neu: HTML, CSS und Javascript. Allerdings gibt es im Gegensatz zu „normalen“ (mobilen) Seiten eine Reihe zusätzlicher Regeln und Einschränkungen, an die sich Entwickler halten müssen, damit eine Seite als AMP validiert.

Das Ziel: Mobile Webseiten sollen deutlich schneller laden, als es bisher der Fall ist. Laut einer von Google zitierten Studie verlassen 40% der Nutzer eine Webseite die länger als 3 Sekunden lädt. AMP soll dies verhindern.

Wie funktioniert AMP?

Grundsätzlich besteht die Initiative Accelerated Mobile Pages (AMP) aus zwei Technologien:

  1. AMP-Code
  2. Google AMP Cache

AMP-Code

AMP-Code ist HTML, CSS und Javascript. Also alles ganz normal, oder nicht? Nicht ganz. Eine HTML-Datei muss nach einem bestimmten Schema aufgebaut sein.

Die CSS-Styles müssen in der HTML-Datei inkludiert sein und nicht alle CSS-Properties sind erlaubt. Eigener Javascript-Code ist nicht möglich, aber die Implementierung der Javascript-basierten AMP-Tags, die asynchron geladen werden und somit nicht das Rendering der Seite blockieren.

So sieht ein Bild-Tag in AMP-HTML aus:

1
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Eine bestehende Webseite lässt sich damit nicht unbedingt 1:1 in AMP-HTML umsetzen. Daher und aus anderen Gründen wird selten AMP für die komplette Webseite verwendet. Meistens werden News-Beträge oder Blog-Posts „zusätzlich“ zur normalen responsive Seite in einer AMP-Version zur Verfügung gestellt.

Damit dadurch kein Duplicate Content entsteht und Google auch die AMP-Version der Seite findet, erfolgt eine Kennzeichnung im Code durch <link> Tags im <head> der Seite:

Normale Seite:

1
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

AMP-Seite:

1
<link rel="canonical“ href=“https://www.example.com/url/to/full/document.html">

Eine vollständiges Tutorial und weitere Beispiele findet man auf der Webseite zum AMP-Projekt.

Tipp
Es gibt zwei Wege AMP-Seiten zu validieren. Zum einen über die Entwickler-Konsole von Chrome, indem an die URL der AMP-Seite #development=1 anhängt (via ampbyexample.com). Zum anderen über den AMP-Validator im Web.

Google AMP Cache

Durch die Kennzeichnung im Quelltext, wie zuvor beschrieben, ist es Google und anderen Unternehmen möglich, zu identifizieren, ob eine AMP-Version einer Seite existiert und wo diese zu finden ist.

Ist eine AMP-Version der jeweiligen Seite vorhanden, macht der Google AMP Cache folgendes. Er speichert die Seite auf einem Google-Server ab und kann diese von da aus nach Bedarf vorgerendert ausliefern. Das kann je nach Fall (siehe Vorteile von AMP) die „gefühlte“ Geschwindigkeit von AMP enorm erhöhen.

3 Vorteile von AMP

Die Vorteile von AMP liegen mehr im Google AMP Cache und in der Integration in der mobilen Google-Suche und weniger im „echten“ Geschwindigkeitszuwachs.

Nicht-optimierte Seiten profitieren zwar ganz klar von den Code-Optimierungen, welche durch die Restriktionen von AMP gegeben sind. Je nach Fall kann aber eine auf Pagespeed optimierte Seite, ohne AMP, ebenso schnell oder gar schneller laden. Ist die Standard-Version nicht gleich AMP-Version, also wenn zwei Versionen zu einer Seite existieren, sollte ohnehin noch die „normale“ Seite auf Geschwindigkeit optimiert werden.

Die Vorteile von AMP:

1. Listing im „Top stories carousel
Das macht insbesondere bei news-getriebenen Inhalten Sinn und kann zu einer Verbesserung der Distribution und mehr Traffic über Mobile führen.

2. Kennzeichnung in der mobilen Google-Suche
AMP-Seiten werden in den Suchergebnissen der mobilen Suche mit dem ikonischen Blitz gekennzeichnet, so das der Nutzer weiss, das diese Seite schnell lädt.

3. Schnellere Ladezeit in der mobilen Google-Suche
Bei Klick auf ein AMP-Suchergebnis wird die Seite über den Google AMP Cache vorgerendert ausgeliefert. Schneller geht es nicht. (Übrigens: Das betrifft nur die erste Seite. Surft der Nutzer weiter auf der Webseite, kommt er in den Genuss der normalen Seite mit der normalen Geschwindigkeit.)

Einige der Regeln und Einschränkungen von AMP-HTML lassen sich auch in „normales“ HTML übertragen. Ein guter Gedankenanstoß für die Pagespeed-Optimierung einer Webseite.

Ist AMP Pflicht?

Nein, aber je nach Inhalt der Webseite schon für einen Teil der Seiten (News/Posts) anzuraten. Die Integration und Bevorteilung in der mobilen Google-Suche hat in diesem Jahr zugenommen.

Es ist davon auszugehen, das Pagespeed und auch AMP immer mehr in das mobile Ranking von Webseiten mit einfliessen, ob direkt oder indirekt durch eine Reduzierung der Absprungrate. Die Nutzer werden ungeduldiger und wollen Informationen lieber gestern als morgen. Wer vorne dabei bleiben will, sollte - mit oder ohne AMP, dem Mantra von AMP „Content is King, User-Experience is Queen“ folgen.