Schnell wie der Blitz – das ist das Versprechen, mit dem das Open-Source-Projekt AMP sich im Technologiedschungel platziert. Zunehmend verwenden wir mobile Geräte zur Internetnutzung, der steigende Anteil des mobile Traffics ist unaufhaltsam. Schließlich ist es ungemein praktisch im Supermarkt nochmal kurz nachzuschauen welche Zutat jetzt noch für das geplante Abendessen fehlt oder kurz die Abfahrtszeiten der Bahn zu prüfen. Wir haben uns daran gewöhnt, dass das Internet unser ständiger Begleiter in allen Lebenslagen ist.
Doch lange Ladezeiten auf mobilen Geräten sind den Nutzern immer wieder ein Dorn im Auge. Kurz morgens in der Bahn die neuesten Meldungen des Tages überfliegen? Fehlanzeige, mobile Nutzer werden viel zu oft vom fast unerträglich langsamen Aufbau der Websites gebremst. AMP HTML soll hier Abhilfe schaffen. Frei nach dem Motto schnell, schneller, AMP.
Inhalt
Was sind Accelerated Mobile Pages?
„AMP“ ist die Abkürzung für Accelerated Mobile Pages, ein Open-Source-Projekt von Google, das sich zum Ziel gesetzt hat, die Ladezeit von Inhalten auf mobilen Geräten stark zu verkürzen – bis zu 85% schnellere Ladezeiten sind möglich. Hierfür wurde ein Framework entwickelt, bei dem alle Interessenten auf der Technologieplattform GitHub sich beteiligen können. Anstatt des regulären HTML-Tags <HTML> wird eine AMP-HTML-Seite mit dem bezeichnenden kleinen Blitz in <HTML ⚡> ausgezeichnet.
Da das Projekt von Google kommt, werden Websites die AMP verwenden in der mobilen Suche bevorzugt behandelt und gesondert angezeigt. Auch hat Google namhafte Partner für das Projekt gewonnen, der Contentgigant WordPress hat bereits letztes Jahr ein Plugin entwickelt, mit dem WordPress-Seiten sich um die AMP-Technologie erweitern lassen.
Websitebetreiber sollten also möglichst schnell in die neue Technologie einsteigen um nicht in den Rankings abgehängt zu werden. Es ist absehbar dass der Anteil des mobilen Traffics weiterhin wachsen wird, deswegen ist es sinnvoll die eigenen Websites nicht nur in Hinsicht auf responsive Design auf die Bedürfnisse der mobilen Nutzer anzupassen. Doch wie funktioniert die Technologie hinter AMP und wie kann man sie verwenden?
Wie funktioniert AMP?
Mit AMP werden durch verschiedene technische Vereinheitlichungen schnellere Ladezeiten erzielt. Dazu gehört die Einschränkung bestimmter Funktionen von JavaScript. „Erlaubt“ sind bei AMP nur asynchrone Scripte, bei denen Inhalte parallel geladen werden können. Dadurch werden Verzögerungen bei der Ladezeit vermieden da die Inhalte gleichzeitig und nicht hintereinander geladen werden.
Ein weiterer Kniff den sich AMP zunutze macht ist, dass die Größe aller Elemente vorab angekündigt werden. Sie kennen sicher den ärgerlichen Moment in dem sie auf einen Button auf einer mobilen Seite drücken wollen und der Button unter Ihrem Finger verschwindet weil ein nachgeladenes Bild die Länge der Seite verändert hat. Bei AMP müssen alle externen Ressourcen wie Bilder, Werbung und andere Elemente Ihre Größe bereits vor dem Laden ankündigen, AMP platziert dann Platzhalter auf der Seite. Dieses Vorgehen hat auch den Vorteil, dass die Ladezeit nicht mehr durch das Warten auf Elemente mit unbekannter Größe herausgezögert wird.
Durch die Optimierung der Darstellung werden ebenfalls weitere Verkürzungen der Ladezeit erzielt. Bei der Verwendung von AMP HTML werden nur zwei Arten der Animation zugelassen: Transparenz und Vergrößerung. Diese Animationen können komplett an den Prozessor des verwendeten Gerätes übergeben werden und der Browser wird entlastet. Dadurch werden keine Ressourcen des Browsers für Animationen abgezogen und die Seite schneller gerendert. Außerdem wird von Google ein eigener Cache speziell für AMP zur Verfügung gestellt, wodurch die Inhalte ebenfalls schneller übertragen werden. Einen Einblick in weitere technische Details erhalten Sie auf der offiziellen Seite des Projekts.
Wie nutze ich AMP für meine Seite?
Die einfachste Möglichkeit AMP für den eigenen Internetauftritt zu nutzen, ist die Verwendung des WordPress-Plugins. Falls Sie Ihre Seite nicht mit WordPress erstellt haben ist das Vorgehen etwas anders. In der Dokumentation des Projektes finden Sie alle Details die Sie brauchen um mit der Optimierung Ihrer Website loszulegen, die wichtigsten Punkte sind hierbei die speziellen HTML-Tags die unter Verwendung von AMP zum Einsatz kommen und die AMP JS library. Alle Details der Spezifikation erfahren Sie hier.
Damit haben Sie alles was Sie brauchen um auch Ihre Seite blitzschnell durchstarten zu lassen! Einige Impressionen wie AMP-Seiten im Vergleich zu regulären Seiten abschneiden gibt es hier: