Accelerated Mobile Pages

Accelerated Mobile Pages (AMP) ist ein quelloffenes, plattformübergreifendes Framework, mit dessen Hilfe die Ladegeschwindigkeit mobiler Websites deutlich erhöht werden kann. AMP basiert auf der Reduktion von CSS und JavaScript, einem Content Delivery Network sowie angepasstem HTML. Unterstützt wird das Accelerated Mobile Pages Project von Google.

Hintergrund

Die mobile Internetnutzung steigt weltweit rasant an. Aus diesem Grund wird die Zukunft des Internets in vielen Bereichen mobil sein. Webinhalte werden dann überall mit tragbaren Geräten konsumiert. Auch Mobile Commerce wird selbstverständlich von der zunehmenden mobilen Internetnutzung betroffen sein. Die Änderung der Surfgewohnheiten hat letztlich Auswirkungen auf die Websitegestaltung sowie die Anpassung der Technik für die Bereitstellung von Websites. Um die Usability so hoch wie möglich zu gestalten, sollten mobile Websites vor allem schnell laden. Laut einer Erhebung aus dem Jahr 2015 halten mehr als 50 Prozent der Befragten in Deutschland eine Ladezeit von 3 Sekunden oder weniger bei mobilen Websites für ausreichend.[1]

Eine andere Studie hat ergeben, dass die Bounce Rate auf über 50 Prozent steigt, wenn eine mobile Website sich in mehr als 10 Sekunden aufbaut.[2] Besonders dramatisch wirken sich Unterschiede in der Lagegeschwindigkeit bei Online-Shops aus. Hier können wenige Sekundenbruchteile darüber entscheiden, ob ein Besucher zum Käufer wird oder nicht. Die Geschwindigkeitsoptimierung sollte demnach unbedingt in die Mobile Optimierung integriert werden. Google selbst hat schon 2010 betont, wie wichtig die Ladegeschwindigkeit von Websites für eine positive Nutzererfahrung ist, indem der „Page Speed“ zum Rankingfaktor deklariert wurde.[3]

Geschichte

Das Accelerated Mobile Pages Project wurde im Oktober 2015 ins Leben gerufen.[4] Die Grundlage für die Gründung der Open-Source-Initiative bildeten Gespräche und Diskussionen zwischen Publishern und Technologieunternehmen, in welchen immer wieder der Bedarf an schnell ladenden mobilen Inhalten zum Hauptthema wurde. Die Initiatoren, darunter Google, WordPress und Adobe, hatten zum Ziel, ein komplettes mobiles Öko-System zu schaffen. Dieses System sollte sowohl für Publisher als auch für Entwickler, Nutzer und Verbraucherplattformen Vorteile bringen. Weitere Technikpartner sind das Soziale Netzwerk Pinterest, der Kurznachrichtendienst Twitter und LinkedIn. Zu den Publishern, welche AMP als erste einsetzten, gehören in Deutschland die „Zeit“ und die „Frankfurter Allgemeine Zeitung“, in den USA unter anderen die „Washington Post“, „Buzzfeed“, in England der „Guardian“und in Spanien „El Pais“.

Aufgrund des quelloffenen Ansatzes ist zu erwarten, dass sich AMP ähnlich wie auch damals das Android-Betriebssystem für Smartphones schnell verbreitet und etabliert. Durch die Ankündigung, AMP-Websites ab Februar 2015 zu indexieren, hat Google Webmastern weltweit einen zusätzlichen Anreiz gegeben, das Framework einzusetzen. Es wird sogar vermutet, dass Google AMP-Seiten in den SERP kenntlich macht, ähnlich wie es schon beim Hinweis „Für Mobilgeräte“ der Fall ist.[5] In diesem Video erklärt HTML5-Entwickler Paul Bakaus ausführlich und anschaulich das AMP-Projekt sowie die Vorzüge der Technik.


Funktionsweise

Die Ladegeschwindigkeit einer Website hängt in erster Linie von der Größe der zu ladenden Dateien ab. AMP versucht deshalb, die gesamte Größe einer Webseite auf ein Minimum zu reduzieren. Zugleich werden die Inhalte der AMP-Website gecacht und auf einem Proxyserver bereitgestellt. Greift ein Nutzer auf die Inhalte zu, werden sie über ein Content Delivery Network ausgeliefert. Der Quellcode von AMP-Websites kann von allen Servern interpretiert werden.

  • AMP HTML: Der HTML-Quellcode wird bei AMP angepasst und reduziert. Pro Seitenaufruf erfolgt darüber hinaus nur ein http request.
  • AMP JavaScript: AMP-Websites verwenden ausschließlich asynchrones JavaSript. Hierdurch kann die Seite schneller gerendert werden, weil das Laden nicht durch JS-Ressourcen blockiert wird. Wird JavaScript von Drittanbietern eingebunden, erfolgt die Implementierung über iframes.
  • AMP CDN: Auf Proxyservern weltweit wird ein Cache von AMP-Websites angelegt. Die Inhalte können auf diese Weise über ein Content Delivery Network ausgegeben werden, das auf http 2.0 basiert. Das CDN prüft außerdem, ob die AMP-Website auch funktionsfähig ist.

Der große Vorteil von AMP besteht darin, dass die Ladegeschwindigkeit einer Website exakt vorausberechnet und skaliert werden kann. Zu weiteren Optimierungen gehört auch die Angabe exakter Dateigrößen für Bilder oder andere eingebundene Medien. Wird eine AMP-Website geladen, kann die Technik die einzelnen Downloads priorisieren. Hierfür werden neben den Dateigrößen auch die Positionen der einzelnen Dateien im Quellcode interpretiert.

Auch CSS-Dateien sind von der Geschwindigkeitsoptimierung betroffen. CSS darf zum Beispiel nur inline und bis zu einer Maximalgröße von 50 Kilobyte implementiert werden.

Einsatzmöglichkeiten

Accelerated Mobile Pages sind grundsätzlich nicht auf einen bestimmten Bereich im Web beschränkt. Es sind sowohl E-Commerce-Anwendungen für AMP-Websites als auch spezielle Anmeldeformulare oder Paywalls denkbar. Die Initiatoren verzichten auf eine vorherige Beschränkung. Von der Integration von AMP-Websites in die Google-Suchergebnisse sind vorerst (Stand Dezember 2015) nur News-Publisher betroffen. Denkbar sind langfristig aber auch Online-Shops, die spezielle AMP-Produktseiten anbieten oder Reisedienstleister, die zum Beispiel die Buchung über schnelle AMP-Websites für mobile Internetnutzer vereinfachen. Da es keine Einschränkungen hinsichtlich der Plattform oder des Verwendungszweckes gibt, werden in den nächsten Jahren sicherlich viele verschiedene Anwendungsmöglichkeiten entstehen.

Anpassungen am HTML-Code

Um AMP-Websites umzusetzen, muss HTML im Quellcode modifiziert werden. Medien-Tags werden zum Beispiel mit „amp“ ergänzt.

  • Bilder: amp-img
  • Videos: amp-video
  • Audio-Dateien: amp-audio
  • iframes: amp-iframe

Beispiel für ein Video:

<amp-video src="topvideo.jpg" alt="mein top video" height="500" width="800"></amp-video>

Diese Tags sind verpflichtend für AMP-Websites:

Dokumententyp:
<!doctype html>
Top-Level-Tag
<html>tag (<html amp> funktioniert auch)

<head> und <body> Tags

Canonical Link im <head>-Bereich:
<link rel="canonical" href="Original-URL" /> </pre

Codierung im <head>-Bereich: <pre><meta charset="utf-8"> 
Viewport im <head>-Bereich:
<meta name="viewport" content="width=device-width,minimum-scale=1">
Verweis auf AMP-CDN im <head>-Bereich:
<script async src="https://cdn.ampproject.org/v0.js"></script>
Angabe der Deckkraft:
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> 

Während das rel-Attribut sowie der Canonical Tag auf gewöhnlichen Websites nicht verpflichtend sind, müssen AMP-Seiten diese beiden Elemente im <head>-Bereich enthalten.

rel-Attribut: Crawlern wird damit gezeigt, dass es auch eine AMP-Websiteversion für die vorliegende Seite gibt.

Beispiel:

<link rel="amphtml" href="https://www.meinedomain.de/ampseite-der-komplettenseite.html">


Canonical-Tag: Der Canonical-Tag auf der AMP-Website verweist auf die herkömmliche Original-Website

<link rel="canonical" href="https://www.meinedomain.de/kompletteseite.html">


Aktuell besteht noch keine konkrete Handlungsempfehlung von Google, wie rel-Tags für AMP-Websites mit weiteren rel-Tags zum Beispiel beim App Indexing kombiniert werden. Auch zur Kombination mit hreflang gibt es noch keine deutlichen Hinweise (Stand Dezember 2015). Sofern die AMP-Seite die einzige existierende Webseite mit diesem Inhalt ist, verweist der Canonical-Tag auf sie selbst.

<link rel="canonical" href=" https://www.meinedomain.de/ampseite-der-komplettenseite.html ">

Nutzen für Mobile Marketing

AMP-Websites sollen innerhalb von Millisekunden geladen werden. Da vom schnellen Laden auch Werbeanzeigen betroffen sind, können Advertiser mit AMP darauf hoffen, dass ihre Werbemittel die User Experience nicht negativ beeinflussen. Denn heute stören Werbebanner oder Interstitials häufig bei der mobilen Internetnutzung.

Das AMP-Framework erlaubt es, viele verschiedene Werbeformate zu nutzen. Somit wird Werbern bei dieser Technik ein breites Inventar an Werbemöglichkeiten zur Verfügung stehen. Da AMP plattformunabhängig eingesetzt werden können, sind Werber nicht nur auf ein Unternehmen beschränkt, wenn sie Anzeigen schalten wollen.

Einzelnachweise

  1. Nutzererwartungen an die Ladezeiten von Webseiten auf Mobiltelefonen de.statista.com Abgerufen am 17.12.2015
  2. Case study: Mobile pages that are 1 second faster experience up to 27% increase in conversion rate soasta.com Abgerufen am 17.12.2015
  3. Using Site Speed in Web Search Ranking googlewebmastercentral.blogspot.co.uk Abgerufen am 17.12.2015
  4. Introducing Accelerated Mobile Pages googleblog.blogspot.de Abgerufen am 17.12.2015
  5. Google Search Will Integrate AMP Pages In Feb. 2016, May Get Ranking Boost searchengineland.com Abgerufen am 17.12.2015

Weblinks

KATEGORIE