Jede Millisekunde zählt! Verschiedenen Studien zufolge wirken sich längere Ladezeiten von Webseiten spürbar negativ auf Website-Kennzahlen wie Besuchszahlen und Conversion Rates aus. Besonders ungeduldig sind dabei Nutzende von mobilen Endgeräten. Damit Sie die Ladegeschwindigkeiten Ihrer Seiten optimieren können, bietet Google das Open-Source-System AMP (Accelerated Mobile Pages) an.

Was genau sich dahinter verbirgt und mit welchen Design-Optionen Sie das Potenzial von AMP optimal ausnutzen, erfahren Sie in diesem Beitrag.

→ Leitfaden zur Gestaltung einer barrierefreien Website [Kostenloser Download]

Was ist AMP?

Bei „Accelerated Mobile Pages“ handelt es sich um ein Open-Source-Projekt, das 2015 von Google ins Leben gerufen wurde. AMP zielen darauf ab, die Ladezeiten für mobile Webseiten zu verringern. Dazu werden separate Versionen der Seiten mit AMP-HTML erstellt, welche mit Caching und Dateiverkleinerungen arbeiten.

Warum Accelerated Mobile Pages nutzen?

Die stark beschleunigten Ladegeschwindigkeiten verbessern das Nutzererlebnis deutlich. Schließlich springen Mobile-Nutzende sehr schnell ab, wenn Seiten zu lange laden. Innerhalb der ersten drei Sekunden der Ladezeit erhöht sich die Absprungwahrscheinlichkeit auf mobilen Webseiten um 32 Prozent. Nach fünf Sekunden Ladezeit steigt die Wahrscheinlichkeit, dass Ihre Kundschaft abspringt, um ganze 90 Prozent.

Außerdem priorisiert Google AMP (zu erkennen am Blitz-Symbol) in seinen Suchmaschinenrankings. Die Technik kann also auch für die Platzierung in den Google-Suchergebnissen spürbare Vorteile bringen.

Seit 2021 ist allerdings ein deutlicher Rückgang bei der Google Priorisierung von Accelerated Mobile Pages festzustellen. Stattdessen fokussiert sich die Suchmaschine zunehmend auf die sogenannten Core Web Vitals.

Dabei handelt es sich um neue Metriken zur Messung der User Experience von Webseiten. Dennoch können AMP Seiten nach wie vor für die Suchmaschinenoptimierung genutzt werden, da sie sich auch positiv auf die Core Web Vitals auswirken.

Des Weiteren ist es mit Accelerated Mobile Pages möglich, viele unterschiedliche Werbemittel zu nutzen. Diese werden schnell geladen und sind somit für das Mobile Marketing hilfreich. Zudem arbeiten AMP plattformunabhängig, sodass Sie nahezu jedes Werbeformat nutzen können, das Ihnen von ihren Werbepartnern und Werbepartnerinnen bereitgestellt wird.

Wie funktioniert Accelerated Mobile Pages?

Grundsätzlich gilt: je größer und umfangreicher die zu ladenden Dateien, desto länger die Ladezeiten. Accelerated Mobile Pages haben daher zum Ziel, die Größe einer Website so gering wie möglich zu halten. Sie verkleinern die Dateien und cachen Inhalte so, dass diese auf einem Proxyserver zwischengelagert werden können. So muss die Website nicht jedes Mal von Grund auf neu geladen werden.

Stattdessen laden die Daten in Sekundenbruchteilen, was die Seitenladezeiten und damit auch die Bounce Rate (Absprungrate) spürbar reduziert. Server wie HTML, JavaScript und CDN sind in der Lage, den bereitgestellten Quellcode zu interpretieren und angemessen damit umzugehen.

Für welche Seiten eignet sich eine Accelerated Mobile Pages Version?

Ursprünglich wurden AMP vor allem für News-Seiten konzipiert, welche mit viel visuellem Material arbeiten. Inzwischen haben aber auch viele andere Betreibende den Nutzen der schnellen Ladezeiten für ihre Webseiten erkannt.

Insbesondere bei Online-Shops im E-Commerce hat sich das Prinzip schnell durchgesetzt. So nutzt beispielsweise die Auktionsseite eBay Accelerated Mobile Pages intensiv. Prinzipiell ist das Projekt aber für alle Anbietenden interessant, da schneller geladene Websites, eine geringere Absprungrate und potenziell bessere Rankings universelle Vorteile darstellen.

Sechs Tipps, um das Design von Accelerated Mobile Pages zu verbessern

Wenn Sie mit Accelerated Mobile Pages arbeiten möchten, sollten Sie diese so optimieren, dass die AMP Ihrer Zielgruppe einen größtmöglichen Nutzen bieten. Die folgenden Tipps können Ihnen dabei helfen.

1. „AMP Carousel“ einsetzen

Karussell-Elemente auf Webseiten bieten eine ideale Möglichkeit, verschiedene Content-Elemente wie Artikel-Teaser oder Produktvorschauen darzustellen, ohne viel Platz auf einer Webseite einzunehmen. Dazu werden diese innerhalb eines Seitenbestandteils auf einer horizontalen Achse dargestellt. Nutzer und Nutzerinnen können per Pfeiltaste oder Swipe zwischen den einzelnen Elementen wechseln.

Dieses Design-Element bietet sich besonders für die Startseite an, wo es als übersichtlicher Blickfänger die Aufmerksamkeit auf sich zieht. Auch auf Produktseiten können Sie es nutzen, um beispielsweise verschiedene Ansichten eines Produktes darzustellen.

2. Verwandte Produkte und Beiträge anzeigen

Auf ähnliche Artikel, Produkte oder Beiträge zu verweisen, ist sinnvoll, um Nutzer und Nutzerinnen dazu zu ermutigen, tiefer in Ihren Content einzutauchen. So können sie sich mit verschiedenen Aspekten Ihres Services vertraut machen. Ist Ihre Kundschaft motiviert, mehr Ihrer Inhalte anzusehen, steigt zudem ihre Verweildauer auf Ihrer Website.

Accelerated Mobile Pages Beispiel Ebay

Quelle: Screenshot Ebay

Ein weiterer Vorteil: Die konkreten Vorschläge können personalisiert an verschiedene Präferenzen und das vorherige Nutzungsverhalten der User und Userinnen angepasst werden. Optimal ist dieses Element vor allem für Landing-Pages.

Falls Nutzende über ein Suchergebnis auf Ihre Seite stoßen und dort nicht genau das finden, wonach sie gesucht haben, finden sie unter Umständen in den Vorschlägen eine passende Lösung oder Alternative.

3. AMP-Analytics nutzen

Kennzahlen zu AMP können Sie sowohl klassisch über Google Analytics als auch über eine eigene AMP-Analytics-Anwendung erhalten. So können Sie herausfinden, wie Nutzer und Nutzerinnen sich auf Ihrer Seite bewegen: Welche Elemente führen zu vielen Conversions, welche lösen nur wenig Interaktionen aus? So können Sie mögliche Probleme schnell identifizieren und beheben.

Wichtig in Bezug auf den Traffic: Da die Dokumente direkt aus dem AMP-Cache geladen werden, werden entsprechende Zugriffe nicht als Traffic gezählt. Es ist also völlig normal, dass die Zahlen hier geringer ausfallen.

4. Das integrierte Validierungstool nutzen

Nutzen Sie das AMP-eigene Validierungstool, um zu überprüfen, ob Ihr Code lückenlos funktioniert. Dazu müssen Sie lediglich #development=1 am Ende der Seiten-URL einfügen. Dabei werden auch Metadaten berücksichtigt.

Achten Sie außerdem unbedingt darauf, dass AMP-Crawling aktiviert ist. Ist die Funktion deaktiviert, indexieren die Google-Crawler Ihre Seite nicht und sie wird entsprechend nicht in den Google-Ergebnissen angezeigt.

5. Anzeigen innerhalb von Accelerated Mobile Pages implementieren

Via AMP existiert bereits ein Framework zur Nutzung von Werbeanzeigen. Die jeweilige Anzeige wird dann aus einem Container direkt mit dem Rest des Inhalts geladen. Innerhalb von <amp-ad> können Sie die gewünschte Höhe und Breite festlegen. Die kreativen Möglichkeiten sind hier vielfältig. So können Sie beispielsweise auch Videos oder reine Platzhalter für dynamische Anzeigen einpflegen.

Accelerated Mobile Pages Beispiel Running on Real Food

Quelle: Screenshot Running On Real Food

6. Erkenntnisse aus A/B-Tests ziehen

Seit 2016 unterstützen AMP mittels einer <amp-experiment>-Komponente explizit A/B-Tests. Sie können einfach zwei Versionen einer Website erstellen und exakt festlegen, wie viel Traffic von den einzelnen Suchergebnissen auf welche Variante gelenkt werden soll.

Mit der Erweiterung stellt Google zudem eine größere Auswahl an Analysemöglichkeiten bereit. So können Sie beispielsweise unkompliziert verschiedene Designs und Website-Layouts gegeneinander abwiegen.

Kritik an Accelerated Mobile Pages

An den AMP Seiten ist trotz ihrer vielen Vorteile nicht alles positiv. Im Folgenden haben wir häufige Kritikpunkte für Sie zusammengetragen:

Durch den Einsatz von Accelerated Mobile Pages entstehen im Grunde zwei Versionen einer Website: eine für Desktop-Anwendungen und eine mobile Webseite. Webmaster und Webmasterinnen müssen sich somit nicht nur um die Pflege einer Seite kümmern, sondern immer beide Varianten im Blick haben. Das ist aufwändig und erfordert ein hohes Maß an Konzentration und Struktur.

Die Quellcodes von Accelerated Mobile Pages setzen ein gewisses Grundwissen zur technischen Funktionsweise von Websites im Allgemeinen und AMP im Speziellen voraus. Die Nutzung gelingt somit nicht intuitiv, sondern erfordert eine gewisse Einarbeitungszeit und Expertise.

Auch die Betonung von Einfachheit und die Reduktion auf das Wesentlichste im AMP-Konzept bringen Nachteile mit sich. Der restriktive Quellcode stellt so eine Beschränkung dar, welche die exakte Umsetzung umfangreicher Designs mit dem AMP-Framework teils verhindert. Viele der gängigen HTML-Elemente sind für AMP nicht zugelassen und müssen weggelassen oder durch AMP-Alternativen ersetzt werden.

Hinzu kommt, dass der Nutzen von Accelerated Mobile Pages für die Suchmaschinenoptimierung nicht final bestimmt werden kann. Lange Zeit hat Google AMP priorisiert, zieht sich von dieser Vorgehensweise aber mehr und mehr zurück. Der SEO-Nutzen von AMP Seiten ist somit längst nicht mehr so groß wie früher, auch wenn solche Seiten im Mobile Marketing nach wie vor eine hohe Relevanz haben.

Nicht zuletzt behalten Webseitenbetreibende bei Accelerated Mobile Pages nicht die volle Kontrolle über ihre Inhalte. Host ist nicht länger der eigene Server, sondern das AMP Project. Auch die Gestaltung des eigenen Webauftritts ist nicht mehr uneingeschränkt möglich, da sich Anwender und Anwenderinnen auf die bestehenden AMP-Designs beschränken müssen.

Dennoch liegen die deutlichen Vorteile der Accelerated Mobile Pages mit verbesserter Nutzererfahrung auf Ihrer Webseite, reduzierten Absprungraten und mehr Sichtbarkeit auf der Hand. Es lohnt sich also definitiv, eine AMP-Version der eigenen Website in Erwägung zu ziehen, vor allem dann, wenn Sie Ihr Design durch Tests und Analytics optimieren können.

Fazit: AMP bleiben relevant für das Nutzererlebnis

Insgesamt hat die Bedeutung von Accelerated Mobile Pages in den letzten Jahren abgenommen. Konnten sich Anwendende bis vor wenigen Jahren bei der Nutzung von AMP noch auf eine bevorzugte Behandlung durch Google verlassen, so müssen sie sich heutzutage beim Thema SEO stärker anstrengen, um die gewünschten Erfolge zu erzielen.

Aus Sicht der Nutzer und Nutzerinnen sind Accelerated Mobile Pages aber nach wie vor relevant, da sie für kurze Ladezeiten sorgen und so schnelles Surfen ermöglichen. AMP und speziell AMP-HTML werden daher in Zukunft zwar nur ein Werkzeug unter vielen sein, dank ihrer zahlreichen Vorteile aber beim Webdesign unverzichtbar bleiben.

New call-to-action

Titelbild: Nattakorn Maneerat / iStock / Getty Images Plus

 New call-to-action

Ursprünglich veröffentlicht am Sep 5, 2022 2:00:00 AM, aktualisiert am Januar 20 2023

Themen:

Webdesign