Yakuza112 ~ V4 Blog

Accelerated Mobile Pages

AMP ist ein plattformübergreifendes Open-Source Framework, mit dessen Hilfe die Ladegeschwindigkeit mobiler Webseiten deutlich erhöht werden kann.

Nachrichtenseiten, Partner  und Soziale Netzwerke und viele weitere haben AMP-HTML bereits integriert. Mit Twitter, WordPress, The New York Times, The Guardian, Pinterest und LinkedIn sind mittlerweile auch große Namen vertreten.
Ausgeliefert werden validierte AMP-Seiten indirekt über das CDN von Google, wodurch diese noch schneller bereitgestellt werden können. Zudem ermöglicht dies eine Darstellung der AMP-Seite als Kurzfassung in den Google-Suchergebnissen.

AMP-Seiten werden mit einem Blitz-Symbol in den Google Suchergebnissen gekennzeichnet

Durch ein Nachladen der Bilder (Lazy loading) werden zudem Ressourcen, die nicht benötigt werden, eingespart. Damit AMP diese Geschwindigkeitsoptimierung erzielen kann, wird eigenes Javascript, externes CSS sowie langsame HTML-Elemente verboten. AMP-Webseiten verwenden ausschließlich asynchrones Javasript. Hierdurch kann die Seite schneller gerendert werden, weil das Laden nicht durch Javascript-Ressourcen blockiert wird. Wird JavaScript von Drittanbietern eingebunden, erfolgt die Implementierung über iFrames.
Das so eingebundene Script wird im Hintergrund geladen, ohne dass der Parser durch das Herunterladen und Ausführen angehalten wird.

Der große Vorteil an AMP ist, dass nicht die komplette Webseite umgestellt werden muss, sondern das AMP zusätzlich zu der normalen Webseite bereitgestellt werden kann.
Sobald dies eingebunden ist, muss die AMP Version im „Canonical-Tag“ verlinkt werden, Google leitet dann automatisch mobile Nutzer um, Desktop Nutzer sehen weiterhin die normale Version der Seite.

 

Desktop Version

<link rel="amphtml" href="https://example.com/url/to/amp/document.html">

AMP Version

<link rel="canonical" href="https://example.com/url/to/full/document.html">

Auf Proxyservern weltweit wird ein Cache von AMP-Webseiten angelegt. Die Inhalte können somit auf diese Weise über den Google-CDN ausgegeben werden. Das CDN prüft außerdem, ob die AMP-Webseite funktionsfähig ist.

Der HTML-Quellcode wird bei AMP angepasst und reduziert. Pro Seitenaufruf erfolgt darüber hinaus nur ein HTTP Request.

53% der Besucher einer mobilen Webseite verlassen die Seite nach 3 Sekunden Ladezeit

Pre-rendering

Wenn ein Benutzer eine Google-Suche durchführt und AMP-fähige Ergebnisse zurückgegeben werden, werden einige dieser Ergebnisse im Hintergrund vorgeladen. Wenn der Benutzer auf ein vorgeladenen Ergebnis klickt, lädt die AMP-Seite somit sofort.

Pre-rendering funktioniert durch das Laden eines versteckten iFrames, auf der Suchergebnisseite, mit dem Inhalt der AMP-Seite und einem zusätzlichen Parameter, der angibt, dass das AMP-Dokument nur vogespeichert ist.

Links
AMP-Test
AMP-Vorschau Demo
AMP-Version dieses Beitrags