Jede Millisekunde zählt! Verschiedenen Studien zufolge wirken sich längere Ladezeiten von Webseiten spürbar negativ auf Kennzahlen wie Besucherzahlen und Conversion Rates aus. Besonders ungeduldig sind dabei Nutzer von mobilen Endgeräten. Damit die eigenen Seiten schneller laden, bietet Google das Open-Source-System AMP (Accelerated Mobile Pages) an. Was genau sich dahinter verbirgt und mit welchen Designs Sie dessen Potenziale optimal ausnutzen, erfahren Sie in diesem Beitrag.

Was sind Google AMP und welche Vorteile haben sie für Marketer?

Bei den „Accelerated Mobile Pages“ handelt es sich um ein Open-Source-Projekt, das von Google ins Leben gerufen wurde. Das Prinzip beruht darauf, dass die Ladegeschwindigkeit einer Website durch die Entfernung von JavaScript erhöht wird. Text wird grundsätzlich zuerst geladen, alle weiteren Inhalte erst, sobald auch der Rest der Seite angezeigt werden kann. Wer AMP verwenden möchte, muss dafür eine separate Version seiner Seiten mit AMP-HTML erstellen.

Die stark beschleunigten Ladezeiten verbessern das Nutzererlebnis deutlich. Schließlich springen Mobile-Nutzer sehr schnell ab, wenn Seiten zu lange laden. Nach drei Sekunden erhöht sich die Absprungwahrscheinlichkeit um 32 Prozent, nach fünf Sekunden hat sie sich bereits verdoppelt. Außerdem priorisiert Google AMP (zu erkennen am Blitz-Symbol) in seinen Suchmaschinenrankings. Die Technik kann also auch für die SEO-Strategie spürbare Vorteile bringen.

Wie gut ist Ihre Website aufgestellt? Lassen Sie Ihre Seite jetzt prüfen und  entdecken Sie Optimierungspotenzial.

Für welche Seiten eignet sich eine AMP-Version?

Ursprünglich waren AMP vor allem für News-Seiten gedacht. Inzwischen haben aber auch viele andere Anbieter den Nutzen der schnell ladenden Seiten für sich 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 jeden Anbieter interessant, da schneller geladene Websites, eine geringere Absprungrate und potenziell bessere Rankings universelle Vorteile darstellen.

accelerated-mobile-pages-carousel-heise-online

Sechs Tipps, um AMP-Designs zu verbessern

1) „AMP Carousel“ einsetzen

Karussell-Elemente auf Webseiten bieten eine ideale Möglichkeit, verschiedene Produkte darzustellen. Dazu lassen sich unterschiedliche Content-Elemente (zum Beispiel Artikel-Teaser oder eine Produktvorschau) auf einer horizontalen Achse darstellen. Nutzer 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.

2) Verwandte Produkte und Beiträge anzeigen

Auf ähnliche Artikel, Produkte oder Beiträge zu verweisen, ist sinnvoll, um Nutzer tiefer in das eigene Angebot zu leiten und sie mit verschiedenen Aspekten des persönlichen Service vertraut zu machen. Außerdem lässt sich so die Verweildauer auf der Website erhöhen.

verwandte-artikel-in-accelerated-mobile-pagesEbenfalls ein Plus: Die konkreten Vorschläge können personalisiert an verschiedene Nutzerpräferenzen und vorheriges Nutzungsverhalten angepasst werden. Optimal ist dieses Element vor allem für Landing-Pages. Falls Nutzer hier nicht genau das finden, wonach sie gesucht haben, finden sie unter Umständen in den Vorschlägen eine 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-Komponente erhalten. So können Sie herausfinden, wie Nutzer sich auf Ihrer Seite bewegen: Welche Elemente führen zu vielen Conversions, welche lösen nur wenig Interaktionen aus?

So lassen sich mögliche Probleme identifizieren und beheben. Wichtig in Bezug auf den Traffic: Da Dokumente direkt aus dem AMP-Cache geladen werden, zahlen entsprechende Zugriffe nicht auf den Traffic ein. Es ist also völlig normal, dass die Zahlen hier geringer ausfallen.

4) Das integrierte Validierungstool nutzen

Nutzen Sie unbedingt das AMP-eigene Validierungstool, um zu überprüfen, ob der 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 nicht deaktiviert ist – sonst wird die Seite nicht gecrawlt und entsprechend auch nicht in den Google-Ergebnissen angezeigt.

5) Anzeigen innerhalb von AMP implementieren

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

anzeigen-in-accelerated-mobile-pages2-anzeigen-in-accelerated-mobile-pages

6) Erkenntnisse aus A/B-Tests ziehen

Seit 2016 unterstützen AMP mittels einer <amp-experiment>-Komponente explizit A/B-Tests. Sie können schlicht zwei Versionen einer Website erstellen und exakt festlegen, wie viel Traffic zu welcher Variante gelenkt werden soll. Mit der Erweiterung wurden außerdem auch erweiterte Analysemöglichkeiten bereitgestellt. So können ganz praktisch verschiedene Designs gegeneinander abgewogen werden.

In der Betonung von Einfachheit und der Reduzierung auf das Wesentlichste im AMP-Konzept liegen durchaus auch Nachteile. So stellt vor allem der sehr restriktive Code eine Beschränkung dar, da umfangreiche Designs mit dem AMP-Framework nicht unbedingt eins-zu-eins umgesetzt werden können.

Dennoch liegen die deutlichen Vorteile mit reduzierten Absprungraten und mehr Sichtbarkeit auf der Hand. Es lohnt sich also definitiv, eine AMP-Version der eigenen Website in Erwägung zu ziehen, insbesondere wenn das Design durch Tests und Analytics optimiert werden kann.

Neuer Call-to-Action (CTA)

Headerbild: Nattakorn Maneerat / iStock / Getty Images Plus

Ursprünglich veröffentlicht am 23. Juli 2019, aktualisiert am Juli 23 2019

Themen:

Webdesign