AMP (Accelerated Mobile Pages)

Die meisten Suchanfragen werden heute über mobile Endgeräte wie Smartphones und Tablets ausgeführt. Dabei ist es für eine optimale Nutzererfahrung wichtig, dass Websites nicht nur auf dem Desktop, sondern auch auf kleinen Bildschirmen gut funktionieren. Ebenso große Bedeutung hat die Ladegeschwindigkeit von mobilen Websites. Um diese zu beschleunigen, wurde unter Leitung von Google das plattformübergreifende Open-Source-Framework Accelerated Mobile Pages (AMP) entwickelt.

Was ist AMP?

Häufig weisen Websites durch den Einsatz von verschachteltem HTML sowie eingebundenen CSS- und JavaScript-Elementen lange Ladezeiten auf. Gelangt ein Nutzer nun über ein mobiles Endgerät von der Suchmaschine auf eine langsam ladende und/oder nicht mobil optimierte Website, resultiert das in einer negativen Nutzererfahrung.

Um dem vorzubeugen, hat Google bei der Entwicklung von AMP die Zahl der verwendbaren HTML-Tags und CSS- sowie JavaScript-Elemente drastisch verringert. Zudem erfolgt die Auslieferung von Content-Elementen über ein von Google betriebenes, proxybasiertes Content-Delivery-Network (CDN). Das Verschlanken des Quellcodes resultiert in deutlich verkürzten Ladezeiten. Gleichzeitig ist eine unter AMP erstellte Website responsiv, wodurch sich der Inhalt der Größe des jeweiligen Bildschirms anpasst.

Die Entstehungsgeschichte von AMP

Der Startschuss für die Entwicklung von AMP erfolgte im Oktober 2015. Initiatoren waren neben Google das Open-Source-CMS WordPress sowie der Softwarekonzern Adobe. Sie wollten damit auf die steigende Nachfrage nach schnell ladenden mobilen Inhalten reagieren, die immer wieder Gegenstand von Gesprächen zwischen Publishern und Technologiekonzernen waren.

An der Entwicklung von AMP waren noch weitere Technikpartner beteiligt, darunter das Soziale Netzwerk Pinterest, die Karriereplattform LinkedIn und der Kurznachrichtendienst Twitter. Zum Launch des Open-Source-Frameworks boten verschiedene Publisher ihre Inhalte als AMP an. In Deutschland waren das die Onlineangebote der Tageszeitungen “Frankfurter Allgemeine Zeitung” und “Zeit” sowie “Spiegel Online”. International zählten die Newsplattform “Buzzfeed”, der Onlineableger der britischen Tageszeitung “Guardian” und die US-Zeitung “Washington Post” zu den Ersten, die AMP eingesetzt haben.

Das Funktionsprinzip von Accelerated Mobile Pages

Die maßgebenden Faktoren für die Ladegeschwindigkeit einer Website sind einerseits die Verbindungsgeschwindigkeit des Nutzers und andererseits die Größe der zu ladenden Datei. Auf die Bandbreite des Nutzers kann AMP keinen Einfluss nehmen. Durch das Verschlanken des Quellcodes gelingt es jedoch, die Dateigröße einer Website so weit zu reduzieren, dass diese auch bei Nutzern mit langsamer Internetverbindung schnell lädt.

Um dies zu erreichen, spielt neben dem Reduzieren von HTML, CSS und JavaScript der Einsatz eines Proxyservers eine große Rolle. Er speichert die Website zwischen und hält stets eine aktuelle Version von ihr bereit. Beim Aufruf durch den Nutzer erfolgt die Auslieferung über ein Content-Delivery-Network. Daraus ergibt sich zusätzlich der Vorteil, dass die Website unabhängig vom Standort des Nutzers fast gleich schnell lädt.

Das Framework baut auf drei Grundpfeiler auf:

Vorteile von Accelerated Mobile Pages

Mit AMP erstellte Websites bringen Vorteile, von denen Nutzer und Seitenbetreiber profitieren. Ein großer Vorteil ist die Verkürzung der Ladezeiten, insbesondere bei Nutzern, die mit geringen Bandbreiten wie 2G oder 3G surfen.

Schneller Seitenaufbau

Im Vergleich zu anderen mobilen Websites laden Accelerated Mobile Pages im Durchschnitt bis zu viermal schneller. Das liegt vor allem an Googles “Prerendering”. Das bedeutet, dass Google Websites, die in den Suchergebnissen mit einem Blitz als AMP-Website markiert sind, bereits in den SERPs vorladen, ohne dass der Nutzer sie schon aufgerufen hat. Das Resultat ist ein extrem schneller Seitenaufbau. Dieser führt wiederum zu einer niedrigen Absprungrate, was sich positiv auf die Einnahmen durch Verkäufe und Werbung des Seitenbetreibers auswirkt.

Fokussierung auf das Wesentliche

Ein weiterer Vorteil, von dem Nutzer wie auch Seitenbetreiber profitieren können, ist die Fokussierung auf das Wesentliche. Denn durch die wenigen zur Verfügung stehenden gestalterischen Elemente sowie die eingeschränkte Möglichkeit, externe Elemente in die Website zu integrieren, kommt dem Inhalt wieder größere Bedeutung zu. Der Gedanke, wie sich diese präsentieren oder am effektivsten monetarisieren lassen, rückt somit ein Stück in den Hintergrund.

Prominente Listings

Der größte Vorteil ergibt sich sicherlich durch das prominente Listing der Accelerated Mobile Pages in den SERPs. Entsprechend optimierte Nachrichtenartikel listet Google in einem Karussell, das noch über den organischen Ergebnissen angezeigt wird. Hohe Klickraten sind dadurch wahrscheinlicher als ohne AMP.

Screenshot von Google

Nachteile von AMP

Allerdings gibt es auch einige Nachteile im Zusammenhang mit AMP.

Fremde URL

Ein Nachteil, der jedoch eher auf Desktops und Tablets zum Tragen kommt, ist, dass beim Aufrufen von Accelerated Mobile Pages eine fremde URL in der Browserzeile erscheint. In diesem Fall ist es die von Google, da die Website hier im Cache abgelegt ist. Vielen Webentwicklern ist das suspekt. Außerdem könnten einige Nutzer verunsichert sein, dass beim Aufrufen einer ihnen bekannten Website plötzlich eine fremde URL angezeigt wird.

Keine Einbindung von Formularen

Eine von vielen Webdesignern als Nachteil empfundene Einschränkung von Accelerated Mobile Pages ist, dass sich keine Formulare einbinden lassen. Damit ist es beispielsweise nicht möglich, Nutzern die Möglichkeit zum Kommentieren oder zum Bestellen eines Newsletters zu geben.

Website auf Accelerated Mobile Pages umstellen

Bei der Nutzung eines Content-Management-Systems wie WordPress, Joomla oder Drupal lässt sich für die Umstellung ein kostenloses Plug-in nutzen. Für WordPress stellt beispielsweise Automattic das Plug-in “AMP for WordPress” zur Verfügung, das vom Seitenbetreiber installiert und aktiviert werden muss. Anschließend ist eine separate Version der Website verfügbar, die durch Verlinkung im Header der Desktop-Seite vom Crawler der Suchmaschine gefunden und sich indexieren lassen.

Um eine Website händisch auf Accelerated Mobile Pages umzustellen, ist mehr Arbeit nötig und Kenntnisse in HTML sowie CSS und JavaScript von Vorteil. So wird das HTML im Code abgewandelt. Bei Medien-Tags sieht das beispielsweise wie folgt aus:

• aus img wird amp-img
• aus video wird amp-video
• aus audio wird amp-audio
• aus iframe wird amp-iframe

Während Bilder und Mediendateien optional sind, ist der folgende Aufbau zwingend erforderlich:

• Doctype am Anfang jeder AMP Seite:

  <!doctype html>

• Top-Level-Tags:

  <html> oder <html amp>

• <head> und <body>-Tags müssen genutzt werden
• Canonical-Tag auf sich selbst, wenn nur AMP genutzt wird, oder auf die ursprüngliche URL:

  <link rel=“canonical“href=“https://beispiel.de/ursprüngliche-url-ohne-amp.html“ />oder<link rel=“canonical“href=“https://beispiel.de/amp-only.html“ />

• Als Zeichensatz muss <meta charset=“utf-8″> genutzt werden
• Viewport:

  <meta name="viewport" content="width=device-width,minimum-scale=1">

• Hinweis auf das CDN (im <head>):

  <head><meta charset="utf-8"><title>AMP Beispiel</title><link rel=“canonical“href=“https://beispiel.de/ursprüngliche-url-ohne-amp.html“ /><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">usw.<script async src=“https://cdn.ampproject.org/v0.js“></script></head>

• Angaben der Deckkraft (im [head]):

  <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-keyframe -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>

Weiterführende Links

• https://de.wordpress.org/plugins/amp/
• https://support.google.com/webmasters/answer/6340290?hl=de