Es gehört schon der Vergangenheit an, dass das Web zu langsam war und wir geduldig warten mussten, bis eine Seite endlich geladen wird. Unsere Welt dreht sich mittlerweile heute so schnell, dass Nutzer auch vom Internet mehr Geschwindigkeit erwarten. Laut Studien entscheidet ein Besucher in nur wenigen Sekunden, ob er weitere Seiten aufrufen möchte oder nicht. Gerade die langsame Ladezeit gilt als der wichtigste Faktor, warum Websites sofort verlassen werden. Wie bekannt hält die Ladezeit länger als 3 Sekunden die meisten Besucher davon ab, sich auf der Website aufzuhalten. Also, diese Zeitspanne darf nicht überschritten werden, wenn man im Internet erfolgreich sein möchte.

Da das Surfen im Internet immer häufiger über Mobilgeräte als über Desktop-PCs stattfindet, sollte man sich darum kümmern, dass Inhalte auch bei Nutzern schneller ankommen, die mit Smartphones oder Tablets online sind. Besonders im hochkompetitiven E-Commerce-Bereich sollte kein Weg an mobiloptimierten Seiten vorbeiführen, wenn man wettbewerbsfähig und auf der Höhe der Zeit bleiben will.

Das Responsive Design und die Entwicklung von Websites nach dem Mobil First-Prinzip sind dazu berufen, für das optimale Nutzererlebnis auf allen Devices zu sorgen. Accelerated Mobile Pages (AMP) bilden eine weitere reizvolle Lösung, welche sich explizit auf die Geschwindigkeit richtet und macht es möglich, langsame Ladezeiten auch bei niedriger Internet-Bandbreite zu umgehen. In diesem Beitrag möchten wir näher auf diese Technologie eingehen und klären, wie du AMP für deinen Magento-Shop umsetzen kannst, damit deine Besucher keine Sekunde länger warten müssen.

Was sind AMPs und ihre Vorteile gegenüber herkömmlichen Seiten

Accelerated Mobile Pages (zu Deutsch: beschleunigte Mobilseiten) ist Googles Open-Source-Projekt, das 2015 in Kooperation mit Twitter entstand. Die Teilnehmer waren daran gelegen, im Hinblick auf das veränderte Nutzerverhalten die Usability im mobilen Web zu verbessern. Bei AMP handelt es sich um einen neuen Standard, der das Surfen auf Mobilgeräten mit der maximalen Geschwindigkeit ermöglicht, indem eine abgespeckte Version einer Ausgangsseite erstellt wird. Mit AMP-Seiten werden mobile Inhalte in vierfach schneller Geschwindigkeit geladen. Die Ladezeit-Optimierung lässt sich durch ein stark verringertes Datenvolumen erzielen, was der reduzierte HTML-, CSS- und JS-Code ermöglicht. Die AMP-Technologie basiert auf drei Säulen:

AMP HTML ist eine speziell entwickelte Variante des HTML-Codes, die einige Elemente durch AMP-Tags ersetzt. Zum Beispiel wird für Bilder statt des “img”-Tags das “amp-img”-Tag genutzt. Cascading Style Sheets (CSS) sind auf AMP-Seiten auch stark eingeschränkt.

AMP JavaScript stellt ein JavaScript Framework dar, dass für Mobilseiten gedacht ist. Es ermöglicht das asynchrone Laden von AMP-Seiten, indem die Seitenteile in bestimmter Reihenfolge erscheinen. Zuerst werden sichtbare Elemente geladen, der restliche Teil kommt erst hinzu, wenn ein Nutzer zu scrollen beginnt.

AMP Cache - Es geht um ein proxybasiertes Content Delivery Network (CDN), das dafür sorgt, dass AMP-Versionen von Seiten auf Google-Servern gespeichert und Nutzern in der ganzen Welt lokal zur Verfügung gestellt werden. Im CDN erfolgt die Anpassung von Inhalten für diverse Bildschirme. Der AMP Cache prüft zudem die AMP-Seiten auf eventuelle Fehler.

Seit 2018 gilt die Ladezeit auf Mobilgeräten als offizieller Rankingfaktor bei Google. Deshalb haben die schnell ladenden Mobilseiten bessere Chancen, höhere Positionen in den Suchergebnissen zu erreichen. Im Vergleich zu Websites, die nach dem Mobil Frist-Prinzip gebaut wurden, werden AMPs aufgrund des reduzierten Datenvolumens an mobile Nutzer viel schneller ausgegeben.

AMP-Seiten werden in SERPs oben im separaten Block angezeigt. Darüber hinaus signalisiert Google zusätzlich mit einem Blitz-Icon, dass es um beschleunigte Seiten geht. Dass Google Nutzer auf AMPs aufmerksam macht, trägt zu besserer Auffindbarkeit einer Website und somit zur Traffic-Zunahme bei.

Durch enorme Beschleunigung können Nutzer Inhalte auf Mobilgeräten hürdenlos konsumieren. Das sollte sich positiv auf wichtige Analyse-Werte auswirken. Websites, die bereits AMPs einsetzen, fahren sich weniger Probleme mit der Absprungrate ein und verzeichnen höhere Conversions.

Für mobile Anfragen optimierte Seiten können problemlos sowohl für CMS-Websites als auch für Shopsysteme wie Magento erstellt werden.

Du kannst mit der Online-Werbung verdienen, indem du Anzeigenblöcke auf deinen Seiten platzierst: AMPs unterstüzen Google Ads, Google Ad Manager und AdSense.

Vorteile zusammengefasst:

• AMPs werden in SERs hoch aufgelistet
• Verbesserte Auffindbarkeit
• Beschleunigte Mobilseiten bringen mehr Traffic
• Optimierte Nutzererfahrung auf Mobilgeräten
• Höhere Conversion Rate
• Implementierung von Google Analytics
• Optionen zur Monetarisierung
• AMPs lassen sich einfach umsetzen
• AMPs funktionieren auch bei langsamer Internet-Verbindung

Nachteile, die durch die Nutzung von AMPs entstehen können

Die vielversprechende Technologie ist zwar in der Lage, das Surfen auf mobilen Seiten userfreundlicher gestalten, bringt jedoch neben erwähnten Vorteilen auch schwache Stellen mit sich.

Ob sich die Implementierung von AMP lohnt, wird seit Jahren heiß diskutiert. Die Online-Marketer und Webentwickler sind hier nicht einstimmig. Das ist eine ganze Weile her, als am Projekt-Start die Implementierung von CTAs, Social-Media-Buttons, Warenkörben und weiteren Formularen auf AMP-Seiten unmöglich war. Das verhinderte Interaktionen der Nutzer und wirkte sich auf Conversion Rate und die Kundenbindung negativ aus. Vor einigen Jahren war es auch unmöglich, Elemente des Corporate Designs in eine AMP-Seite zu integrieren.

Die Entwicklung der AMP-Technologie geht inzwischen stetig weiter. Seit über 4 Jahren erfuhr das Framework wesentliche Verbesserungen und jetzt eignet sich nicht nur für Newsportale, sondern auch Websites jeder Art, einschließlich Onlineshops. Es stellt nun kein Problem mehr dar,  Produkte zu kaufen, Likes zu geben oder Newsletter zu abonnieren. Gestalterisch muss man auch keine starken Kompromisse mehr eingehen. Grundsätzlich lässt sich heute der Funktionsumfang von AMPs nahezu beliebig erweitern.

Derzeit werden eher andere Aspekte diskutiert. Die Kritik bezieht sich hauptsächlich auf die steigende Abhängigkeit von Google. Nicht alle Website-Betreiber wären bereit, nach Regeln des Technologie-Giganten zu spielen, trotzdem will man auf die Wettbewerbsvorteile nicht verzichten, welche AMPs mit sich bringen. Darüber hinaus bleibt die Frage des Datenschutzes für europäische Website-Betreiber ungeklärt, weil Nutzerdaten auf Servern des Content Delivery Networks landen, ohne dass man nach einer Zusage gefragt wird.

Nachteile auf einen Blick:

• Begrenzte Anzahl an verfügbaren Analyse-Diensten
• Verstoß gegen die DSGVO, weil Daten auf Googles Servern gespeichert werden
• Benutzerdefinierte Funktionalitäten erfordern die Einstellung eines Webstudios
• Abhängigkeit von Google
• AMPs können zwar auf allen Devices einschließlich Tablets und Desktop-PCs geladen werden, sind jedoch bei Google nur AMPs auf Smartphones verfügbar.

So machst du deinen Magento-Shop AMP-fähig

Die Möglichkeit, eine Website blitzschnell zu machen, ist ungemein attraktiv. Besonders für Magento-Shops, die als etwa schwerfällig gelten, würde AMP ein klarer Pluspunkt sein, weil lästiges Warten beim Laden entfällt.  Alle Magento-Websites können um AMP erweitert werden. Es gibt grundsätzlich einige Wege, deinen Magento-Shop auf Google AMP umzustellen.

• Manuell

Die manuelle Einrichtung von AMPs gilt als relativ einfach und kostet dich nichts. Wenn du über ein erforderliches Wissen verfügst, sieht es nicht nach viel Aufwand aus, um AMPs umzusetzen. Dafür sollst du das HTML-Markup nach offiziellen Empfehlungen erstellen und Seiten mit Hilfe des Validierungssystems überprüfen. Auf der Projekt-Website findest du sind grundlegende Schritte skizziert, um AMP in deine Website zu implementieren.

• Plugins

Wenn du dir das Leben aber nicht unnötig schwer machen willst, kannst du fertige Plugins nutzen, welche die Erstellung von AMP-Seiten automatisieren. Die existierenden Plugins sind allerdings kostenpflichtig zu haben. Wir haben nach kostenlosen Erweiterungen erfolglos gesucht. Wenn dir diese über den Weg gelaufen sind, würden wir gerne diese in unsere Liste aufnehmen.

• Magento Themes

Magento Themes mit der eingebauten AMP-Technologie stellen eine weitere Möglichkeit dar, einen Magento-Shop auf Mobilgeräten zu beschleunigen. Bei fertigen Vorlagen geht es um ein attraktives Shop-Design mit leistungstarken Features und Extensions, welches zudem AMP-Versionen für wichtige Seiten generiert. Du musst natürlich nicht einmal HTML editieren. Die Magento Vorlagen mit AMP kosten ca. 161 USD, bei Rabatt-Aktionen kannst du diese viel günstiger erwerben. Magetique gehört gerade zu derartigen Magento Themes. Auf der Details-Seite findest du genauere Infos über alle Features.

Magetique - Magento Theme mit AMP

Live Demo

Details

• Magento-Agentur

Du kannst dich nach wie vor an Entwickler wenden, um deinen Shop fit für AMP zu machen. Sollten deine individuellen Wünsche über die verfügbaren Theme- bzw. Plugin-Optionen hinausgehen oder manuelle Einrichtung für dich ein hartes Stück Arbeit ist, ist es ratsam eine Magento-Agentur wie netz98 oder KonVis zu beauftragen, die an deinem Shop individuell tüfteln.

Fazit 

Accelerated Mobile Pages sind einerseits eine lohnende Option, die bei richtiger Umsetzung deinen Magento-Shop voranbringen kann. Auf AMPs setzen viele bekannte Publisher und Verkaufsplattformen, darunter sind FAZ, The Guardian, eBay, Zalando, AliExpress u.a. Andererseits erfordert die Einrichtung und Bedienung von AMPs etwas Wissen. Geht es um besondere Wünsche und benutzerdefinierte Lösungen, kommst du ohne Profihilfe definitiv nicht aus. Es ist auch davon auszugehen, ob es unter deinen Kunden genug Mobilnutzer gibt.