Googles AMP: Es ist nicht so schwer, wie du denkst

Es kann eigentlich nicht schnell genug gehen. Du sitzt in der Bahn, scrollst durch die aktuellen News und was ist? Die Seite lädt nicht, langsames Netz. Laut Google verlassen 53% der Nutzer eine Seite sofort wieder, wenn sie länger als drei Sekunden lädt. Das ist besonders auf Mobilgeräten kritisch, denn der wachsende Anteil aller Nutzer ist am Smartphone unterwegs und die Bandbreite ist begrenzt.

Bessere Ladezeiten mit Google AMP

Verschiedenste Studien belegen, wie wichtig Ladezeit von Webseiten ist. Besonders schwierig ist die Optimierung für Smartphones, die oft drahtlos und mit langsamer 3G Verbindung auf der Suche nach Webinhalten sind. 2016 hat Google deshalb angefangen, mit seinen "Accelerated Mobile Pages" (AMP) die Ladezeit von Webseiten auf Mobilgeräten zu verringern. 

Angelehnt an den Mobile First Gedanken wird eine besonders schlanke Version der Webseite, ohne große Extras und Erweiterungen bereitgestellt. Die benötigte Bandbreite zum Laden dieser Seiten ist meist um ein vielfaches kleiner, als die, die für die Vollversion benötigt wird. Deshalb findest du auch hier mittlerweile alle Blog Artikel optional im AMP Format.

Wie funktioniert AMP

AMP versucht im Wesentlichen, durch eine Verschlankung des üblichen Webseiten-Aufbaus, allen überflüssigen Ballast über Bord zu werfen um sich auf die wichtigen Inhalte zu konzentrieren. 

Durch drei Hauptansätze erreicht AMP dieses Ziel:

1. Ein schlankes HTML Format, das sich einiger Features seines Vorbilds entledigt
2. Ein spezielles JS Framework, das auf asynchrones Laden setzt, damit das Rendering der Seite nicht behindert wird
3. Der Google AMP Cache, ein großes Content-Delivery-Network (CDN), das global Inhalte zur Verfügung stellen kann und dabei auf einen starken Cache zurückgreift, um Ladezeiten zu verkürzen

Das schlanke HTML Format verbietet einige Elemente aus seinem Vorbild und konzentriert sich weniger auf Gestaltung und Drumherum, sondern mehr auf den Inhalt. Mit AMP JS kommt ein schnelles optimiertes Framework, das sich bei Bedarf trotzdem erweitern lässt und dafür sorgt, dass deine Seite nicht durch externe Abhängigkeiten am Verrichten ihrer Dienste abgehalten wird. Das Herzstück von AMP bleibt jedoch der ultraschnelle und performanceoptimierte Cache.

Um dir das vor Augen zu führen habe ich hier diesen Blog Artikel als AMP Code für dich hinterlegt. 

Beim Durchsehen des Codes fallen sofort einige Einschränkungen auf:

1. Es wird vollständig auf Inline CSS verzichtet, die einzige Quelle für CSS ist der style-tag im Head
2. Es wird kein Third-Party JavaScript eingebunden, nur die Skripte von AMP selbst sowie Tracking sind erlaubt
3. Es wird auf dynamisches Styling / Content Loading verzichtet, um effizientes Caching zu ermöglichen

Bei einem entsprechenden Lighthouse Audit siehst du auch sofort den deutlichen Effekt:

Selbst AMP-Seiten anbieten

AMP ist also leichter als gedacht. Wenn du nun selbst Vorfreude aufgebaut hast, AMP zu benutzen, dann ist der Weg gar nicht mehr weit. Solltest du selbst Webentwickler sein, dann gibt dir AMP eine umfangreiche Anleitung an die Hand, um direkt durchzustarten.

Für alle, die technisch nicht unbedingt so versiert sind, ihre eigene Seite zu schreiben, oder für diejenigen, die sich darum gar keine Gedanken machen wollen, empfiehlt sich die Verwendung eines Content Management Systems wie Wordpress. Die meisten CMS kommen bereits mit einer eingebauten Unterstützung für AMP, für fast alle anderen bieten Plugins die entsprechenden Funktionalitäten.

Unterstützt deine Seite bereits AMP, nein? Worauf wartest du dann?