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.

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:

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.
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.
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>\nTop-Level-Tag <html>tag (<html amp> funktioniert auch)\n<head> und <body> Tags\nCanonical Link im <head>-Bereich:\n<link rel="canonical" href="Original-URL" />\nCodierung im <head>-Bereich:\n<meta charset="utf-8">\nViewport im <head>-Bereich:\n<meta name="viewport" content="width=device-width,minimum-scale=1">\nVerweis auf AMP-CDN im <head>-Bereich:\n<script async src="https://cdn.ampproject.org/v0.js"></script>\nAngabe der Deckkraft:\n<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