AMP für TYPO3 & Magento | kirchbergerknorr

AMP - Der Turbo für mobile Websites

Mobile Internet und Mobile Commerce sind nicht mehr wegzudenken. Jedoch verlassen 53% der Besucher einer mobilen Website diese wieder, wenn das Laden der Seite länger als drei Sekunden dauert.

Das AMP-Format

Mit Accelerated Mobile Pages (AMP) hat Google ein Format etabliert, das mobile Inhalte deutlich schneller ausliefert. AMP können im Verbund mit TYPO3, Magento oder sonstigen Systemen zum Einsatz kommen. Entwickelt wurde das AMP-Format als Open-Source-Initiative in Zusammenarbeit mit Social Media-Plattformen und Medien- und Verlagshäusern. Ursprünglich wurde es für Newsportale mit extrem hohem Traffic entwickelt, um den Aufbau der Seiten wesentlich zu beschleunigen.

Verringerte Ladezeiten von mobilen Websites ermöglichen ein schnelleres Surfen und dadurch ein besseres Nutzererlebnis. Um dies zu erreichen, wird zum einen die Datengröße der Website durch Verschlankung des HTML-Codes reduziert. Zum anderen werden noch während des Suchvorgangs Inhalte und Webseiten als Grundgerüst vorgeladen. Bilder und Videos werden dabei als Platzhalter geladen und erst beim Aufrufen der Seite durch die echten Elemente ersetzt. Im Vergleich zu mobiloptimierten Seiten im Responsive Design können AMP-Inhalte laut Google 4x schneller geladen werden und das auch bei Anbindungen mit geringer Bandbreite. Außerdem verbrauchen sie nur ein Zehntel des Datenvolumens. Websites im AMP-Format werden in den Suchergebnissen mit einem Blitzsymbol dargestellt.

Was steckt dahinter?

AMP basieren auf einem verschlankten HTML-Code, der Reduktion von CSS und JavaScript sowie einem Content Delivery Network (CDN). Der Quellcode von AMP-Websites kann dabei von allen Servern interpretiert werden. Um AMP zu nutzen, muss eine alternative Version der Website erstellt werden, die traditionellem HTML ähnelt, aber stark auf das Notwendigste reduziert wird. Diese alternative Seite wird mit einer Adresse benannt, die wie folgt aufgebaut ist: namewebseite.com/namewebseite/amp. Die einfachste Version einer AMP HTML-Datei sieht wie folgt aus:

Aufbau aus drei Komponenten

AMP HTML

AMP-HTML ist ein HTML-Quellcode, der einerseits reduziert und andererseits durch benutzerdefinierte AMP-Eigenschaften modifiziert wurde. Nur wenige Tags sind erlaubt und werden durch ein Präfix kenntlich gemacht, z.B. <amp-img> statt <img>. Die Anzahl der http-Requests wird auf ein Minimum reduziert. CSS kann nur eingeschränkt verwendet werden und zwar als Inline CSS mit einer Größe von maximal 50 KB.

AMP JS

AMP-Websites verwenden ausschließlich asynchrones JavaScript. Kein Seitenelement kann so die Darstellung eines anderes behindern. Die AMP JS Library steuert das Laden von einzelnen Ressourcen und sorgt unter anderem für ein schnelles Rendering der AMP-Seite. Außerdem werden dort AMP-spezifische Tags bereitgestellt.

AMP Content Delivery Network (CDN)

Die Inhalte von AMP-Websites werden gecached und auf Proxyservern weltweit bereitgestellt. Über dieses Content Delivery Network (CDN) - als Verbund regional verteilter Server - lassen sich besonders große Mediendateien ausliefern. Ein CDN ist hoch performant und verfügt über skalierende Speicher- und Auslieferungskapazitäten. Googles Cache-Server basieren auf HTTP 2.0 für maximale Effizienz. Dort werden die Inhalte nicht nur gespeichert, sondern auch optimiert. Darüber hinaus erfolgt die Prüfung, ob die AMP-Website auch funktionsfähig ist.

Fazit

Das AMP-Format sorgt für wesentlich kürzere Ladezeiten und verbessert so die User Experience der Besucher. Die Absprungrate wird verringert. Man kann stark davon ausgehen, dass die Ladezeitoptimierung eine Rolle beim Google-Ranking spielt. So können AMP-Websites durch bessere Sichtbarkeit in den Suchergebnissen dazu beitragen, die Besucherzahlen zu erhöhen.

Accelerated Mobile Pages eignen sich vor allem für Website-Betreiber, die über viel Content verfügen wie News-Seiten, Blogs oder Online-Datenbanken. AMP lassen sich mit TYPO3, Magento und anderen Systemen umsetzen. Prinzipiell kann das Format für jedes Unternehmen von Vorteil sein, das Inhalte schnell und mobiloptimiert verteilen und mobilen Traffic erhöhen will. So können z.B. Landingpages im AMP-Format als Kampagnen und Bestandteil der Suchmaschinenoptimierung Sinn machen. Der deutliche Trend Richtung Mobile Internet und Mobile Commerce macht AMP auch für Online-Shops attraktiv. Allerdings nur für Teilbereiche, da die Technologie nur auf statische Inhalte anwendbar ist. Im E-Commerce führen lange Ladezeiten oft zum Abbruch des Einkaufs. So könnten AMP-Inhalte im Mobile Commerce bald Einzug halten, um durch kurze Ladezeiten die Conversion Rate zu erhöhen, die Customer Experience zu verbessern und ein besseres Ranking zu erzielen.