Accelerated Mobile Pages (AMP) – mobile Websites jetzt noch schneller
Geschwindigkeit ist heute ein entscheidender Faktor für Internetnutzer. Die Ladezeit entscheidet mit darüber, ob Besucher auf einer Webseite bleiben oder nicht. Vor allem die zunehmende mobile Internetnutzung erfordert heutzutage schnelle mobile Websites.
Ein neues Framework soll jetzt für die nötige Geschwindigkeit sorgen. Das quelloffene Accelerated Mobile Pages Project sorgt dafür, dass mobile Internetseiten schneller laden, indem statische HTML-Inhalte gerendert werden. Google möchte bereits im Februar 2016 AMP-Websites in seine Suchergebnisse integrieren.
Dieser Artikel zeigt, was es mit Accelerated Mobile Pages auf sich hat und welche Auswirkungen das Framework auf die Suche haben könnte.
Das Ziel und die Funktionsweise von AMP
Das Ziel von AMP ist zunächst eine höhere Nutzerzufriedenheit mobiler Nutzer durch die Verringerung von Ladezeiten zu erreichen. Schon länger ist deutlich, dass in diesem Bereich Handlungsbedarf besteht: Laut Google verlassen circa zwei Fünftel aller Nutzer eine Website, wenn diese länger als drei Sekunden zum Laden benötigt. Mit AMP sollen Inhalte nun innerhalb von Millisekunden verfügbar sein. Auch aufwändigere Inhalte wie Videos oder hochauflösende Bilder werden schneller geladen.
:format(avif))
Die Funktionsweise von AMP ist relativ einfach erklärt. Inhalte einer auf ein Minimum an Quellcode reduzierten Website werden auf einem Proxyserver in einem Content Delivery Network zwischengespeichert. Von dort kann der Content schnell geladen werden, wenn das entsprechende Dokument über das Internet abgerufen wird. Dabei soll es bei AMP keine Rolle spielen, mit welchem Gerät (Smartphone oder Tablet) die Inhalte genutzt werden.
AMP basiert dabei auf drei Komponenten:
1. AMP HTML: Dabei handelt es sich um eine angepasste Form von HTML, die von allen Servern interpretiert werden kann. Pro Seitendownload gibt es immer nur einen http-request.
2. AMP JavaScript: AMP erlaubt nur asynchrones JavaScript. Auf diese Weise wird das schnelle Rendering der Website gesichert, da keine externen Ressourcen blockiert werden können. Third-Pary-JavaScript kann nur über iframes geladen werden, die das Rendering des Hauptinhalts ebenfalls nicht beeinflussen.
3. AMP Content Delivery Network: Über verschiedene Proxy-Server werden AMP-Dokumente erfasst und zwischengespeichert. Das Laden der Dokumente über das Content Delivery Network erfolgt über http 2.0. Zugleich wird geprüft, dass die AMP-Seite auch funktioniert.
Daneben sorgt weiteres Tuning für hohe Ladegeschwindigkeiten. So muss zum Beispiel die Dateigröße externer Datenquellen für Bilder, Werbeanzeigen oder iframes im HTML-Dokument angegeben werden. AMP bestimmt anhand dieser Daten, Position und Größe des jeweiligen Elements, bevor es heruntergeladen wird. Ebenso priorisiert AMP die Download-Dateien. Darüber hinaus sind nur Inline styles mit maximal 50 Kilobytes für CSS erlaubt.
Besonderheiten bei der Implementierung
Der HTML-Code von AMP-Webseiten sollte idealerweise an einigen Stellen angepasst werden. Dies gilt zum Beispiel für Quellen von Medien wie Bildern, Videos oder iframes. Alle Tags erhalten die Ergänzung "amp".
Bilder: amp-img
Videos: amp-video
Audio-Dateien: amp-audio
iframes: amp-iframe
Beispiel für eine eingefügte Bilddatei:
<amp-img src="meinbild.jpg" alt="Bild" height="400" width="800"></amp-img>
Achtung: Andere Tags wie "embed" sind bei AMP-Seiten nicht erlaubt. Eine vorläufige Liste mit benötigten Tags findest Du auf Github.
Folgende Tags werden für ein AMP-Dokument benötigt:
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" />
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>
Tipp: Darüber hinaus haben Publisher die Möglichkeit, ihre AMP-Seiten hinsichtlich der Farbgebung (Hintergrundfarben, Textfarben) zu optimieren. Hierzu steht das Element <style amp-custom> zur Verfügung.
Zwei HTML-Attribute aus der Suchmaschinenoptimierung spielen auch bei AMP-Dokumenten eine wichtige Rolle.
rel-Attribut: Hiermit wird Crawlern auf der herkömmlichen Website angezeigt, dass eine AMP-Seite existiert.
Im <head>-Bereich wird deshalb Folgendes eingefügt:
<link rel="amphtml" href="https://www.seite.de/ampseite-kompletteseite.html">
Canonical-Tag: Auf der jeweiligen AMP-Seite wird ein Canonical-Tag eingefügt.
<link rel="canonical" href="https://www.seite.de/kompletteseite.html">
Ist die AMP-Seite die einzige Version, wird diese als kanonische Seite definiert.
<link rel="canonical" href="https://www.seite.de/ampseite-kompletteseite.html">
Alle bisher verfügbaren JavaScript-Codes und weitere Hinweise zu AMP werden auf Github.com Entwicklern zur Verfügung gestellt.
AMP vs. Facebook Instant Articles
Das Accelerated Mobile Pages Project wird heute vielfach als Googles Antwort auf Facebooks Instant Articles bewertet. Grund genug, die beiden Systeme anhand zentraler Aspekte miteinander zu vergleichen.
Gleiches Ziel: Sowohl Instant Articles als auch AMP haben schnellere Ladezeiten zum Ziel, damit sich Informationen noch schneller verbreiten können. Facebook kündigte damals an, dass Instant Articles bis zu 10 Mal schneller laden würden als herkömmliche Artikel auf Facebook. Für das von Google unterstützte AMP existieren bis dato noch keine derartigen Aussagen.
Unterschiedlicher Host: Instant Articles werden auf der Facebook-Plattform gehostet. AMP ist ein Open-Source-System, das überall im Netz nutzbar sein soll. Die Inhalte der jeweiligen AMP-optimierten Website werden von den jeweiligen Publishern selbst gehostet.
Plattform: AMP-Websites werden ab Februar 2016 in die Google-Suche integriert. Facebooks Instant Articles bleiben nur über die Plattform abrufbar und werden nicht von externen Seiten indexiert.
Formate: Sowohl Instant Articles als auch AMP-Websites können hochauflösende Inhalte in Form von direkt startenden Videos oder Bildern enthalten. AMP soll zukünftig viele verschiedene Formate unterstützen, die in den AMP-HTML-Code implementiert werden können.
Wie geht es weiter?
Zunächst sind vor allem Publisher aus dem Nachrichtenbereich gefragt. In Deutschland haben zum Beispiel die "Frankfurter Allgemeine Zeitung" sowie die "Zeit" AMP-Versionen ihrer Artikel gestartet. Wer mit dem Smartphone auf "g.co/ampdemo" surft, kann die ersten Ergebnisse schon in der Google-Suche betrachten.
:format(avif))
Abbildung 1: Suchergebnisseite mit AMP-Seite bei Google zur Suchanfrage "paris".
:format(avif))
Abbildung 2: AMP-Seite der "Zeit".
Google soll laut Berichten planen, AMP-Websites zukünftig in den Suchergebnissen zu markieren, ähnlich wie es der Konzern bereits bei mobil-optimierten Seiten mit dem Hinweis "für Mobilgeräte" macht.
Als Open-Source-Projekt bietet AMP Programmierern weltweit die Chance, neue Anwendungen zu entwerfen und umzusetzen, unabhängig von einer bestimmten Plattform. Als Unterstützer von AMP kann Google damit ebenso wie beim mobilen Betriebssystem Android mit einer raschen Verbreitung des Frameworks rechnen. Da die Nutzung der Technik aufgrund des quelloffenen Ansatzes nicht nur Google vorbehalten ist, wird es allerdings spannend, welchen Nutzen andere Webunternehmen außer Google daraus ziehen werden.
Eines steht fest: Die Google-Suchergebnisse werden für mobile Internetnutzer dank AMP noch komfortabler. Mittelfristig müssen Nutzer, die nach News suchen, nicht einmal mehr die SERPs verlassen, um Nachrichten zu lesen. Mit AMP getunte News-Websites sind dabei vermutlich erst der Anfang. Wenn später auch Online-Shops mit AMP-Speed-Seiten ausgestattet werden, könnte selbst der Besuch der Hauptseite überflüssig werden, sobald der Kunde Zahlung und Bestellung ebenfalls über Google abwickelt.
Bis es dazu kommt, muss sich die AMP-Technik jedoch erst noch etablieren. Es gibt außerdem noch eine echte Speed-Bremse in Deutschland: Die mangelhafte LTE-Netzabdeckung. Auf diese hat selbst Google keinen Einfluss.
Sicher, dass Deine Website schnell genug ist?
Veröffentlicht am Dec 17, 2015 von Philipp Roos
:format(avif))
:format(avif))
:format(avif) "10 Stellschrauben für die Website Conversion Optimierung")
:format(avif))