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. Mit Hilfe von AMP lassen sich Websites, Ads, Mails oder Web Stories erzeugen.
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örten 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 haben 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. Google macht AMP-Seiten in den SERP kenntlich, ähnlich wie es schon beim Hinweis „Für Mobilgeräte“ der Fall ist.
Nachdem Google AMP-Websites in den SERPs priorisiert hat, wurde dieses Priorisierung mit der Einführung des Page-Experience-Updates im Juni 2021 zurückgenommen. Die technische Weiterentwicklung von Websites allgemein hat dafür gesorgt, dass auch mit „herkömmlichen“ mobil optimierten Websites hohe Ladegeschwindigkeiten erzielt werden können. Außerdem hat Google mit seinem Update die User Experience in den Fokus gerückt, welche Faktoren wie die Core Web Vitals berücksichtigt.
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.
Insgesamt bietet AMP vier verschiedene Umsetzungsformen:
- AMP Websites
- AMP Ads
- Web Stories
- AMP Mail
Damit wurde das Framework seit seinem Start um weitere Anwendungsmöglichkeiten ergänzt.
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).
- Canonical Link im-<head>Bereich:
<link rel="canonical" href="Original-URL" />
- Codierung im-<head>Bereich:
<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-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.
Nutzen für SEO: Stand 2021
Mit der Einführung von Accelerated Mobile Pages sollten Websites mit AMP von Google bevorzugt werden. Durch die Einführung des Page Experience Update im Juni 2021 hat Google die Bevorzugung von AMP-URLs in den mobilen SERPs rückgängig gemacht.[5]
Damit wurde 2021 nicht das Ende des AMP-Projekts eingeläutet. AMP bleibt eine Technik von verschiedenen Möglichkeiten, um schnelle mobile Websites zu erzeugen.
Google bietet Webmastern die Möglichkeit, mit einem Tool zu prüfen, wie der Umstieg von AMP auf eine bessere [Page Experience] möglich ist.[6]
Einzelnachweise
- ↑ Nutzererwartungen an die Ladezeiten von Webseiten auf Mobiltelefonen de.statista.com Abgerufen am 17.12.2015
- ↑ Case study: Mobile pages that are 1 second faster experience up to 27% increase in conversion rate soasta.com Abgerufen am 17.12.2015
- ↑ Using Site Speed in Web Search Ranking googlewebmastercentral.blogspot.co.uk Abgerufen am 17.12.2015
- ↑ Introducing Accelerated Mobile Pages googleblog.blogspot.de Abgerufen am 17.12.2015
- ↑ [ https://t3n.de/news/google-amp-vs-page-experience-1379793/ Keine Vorteile mehr durch AMP Google vollzieht Kehrtwende] t3n.de Abgerufen am 29.08.2021
- ↑ AMP Page Experience Guide amp.dev Abgerufen am 28.08.2021