Die mobile Kompatibilität Ihrer Website ist ein wichtiger Bestandteil Ihres Webdesigns. Mit dem Accelerated Mobile Pages (AMP)-Framework bleiben Sie nicht nur mit den neuesten Trends auf dem Laufenden, sondern steigern auch Ihren Website-Traffic und sichern sich einen Vorsprung vor der Konkurrenz.

Einführung

Mobile Geräte haben den Desktop bei der Nutzung aller webbezogenen Aktivitäten langsam überholt. Der Wandel verlief schrittweise, aber wirkungsvoll. Tatsächlich machten mobile Geräte im Jahr 2018 über 50 % der weltweiten Nutzung aus und übertrafen den Desktop schließlich um 45 %.
Dieser Trend war beständig und stark genug, um Google zur Schaffung des Accelerated Mobile Pages (AMP)-Projekts zu motivieren, einem Open-Source-Projekt zur Optimierung von Websites für das mobile Surfen.

AMPs sind im Wesentlichen Seiten, die ein sehr spezifisches Framework basierend auf vorhandenem HTML verwenden, um den Informationsaustausch mit Browsern zu optimieren und so ein nahtloses, schnelleres und effizienteres Benutzererlebnis zu schaffen. Mit anderen Worten: Die Seitenladegeschwindigkeit ist nahezu augenblicklich.

Das AMP-Framework wurde von einer großen Community aus Fachleuten entwickelt und von Google unterstützt. Es funktioniert perfekt mit allen Browsern und lässt sich nahtlos in die gängigsten Content-Management-Systeme (CMS) wie WordPress und Drupal integrieren. Damit ist es eine sinnvolle Alternative für Unternehmen, die ihre Websites an das heutige Zeitalter der Mobilfreundlichkeit anpassen möchten.

Angesichts der großen Zahl von Smartphone-Benutzern werden sich die Ergebnisse hinsichtlich Datenverkehr und Besucherbindung durch die Einführung von AMPs für Ihre Website drastisch verbessern.

Bei beschleunigten mobilen Seiten dreht sich alles um Geschwindigkeit. Das gesamte Projekt basierte auf der Idee, dass mobile Nutzer schnellere Ergebnisse erwarten, daher sollten für die Smartphone-Nutzung optimierte Seiten mit optimaler Geschwindigkeit geladen werden. Dies bedeutet natürlich, dass einige der komplexeren Backend-Programmierungen pragmatisch reduziert werden mussten, um die Effizienz zu steigern.

1. Wie sorgen AMPs also dafür, dass Seiten schneller geladen werden?

Erstens wird der Inhalt ständig gerendert. Normale Seiten folgen einer durch den zugrunde liegenden Code festgelegten Ladereihenfolge, die der Browser buchstabengetreu befolgt und jeden Teil nacheinander rendert. Das bedeutet, dass der nächste Inhalt der Seite erst geladen wird, wenn bestimmte Ladekriterien erfüllt sind. Ein Drittanbieterskript (z. B. eine Anzeige) kann beispielsweise länger zum Laden benötigen und den gesamten Rendering-Prozess blockieren. Wie Sie sich vorstellen können, verlangsamt dies den gesamten Prozess.

Das AMP-Framework löst dieses Problem, indem es alle Komponenten gleichzeitig lädt und gleichzeitig keine Skripte zulässt, die die goldene Regel des parallelen Renderings beeinträchtigen könnten. Im Wesentlichen werden alle interaktiven Funktionen auf der Seite von benutzerdefinierten AMP-Elementen verwaltet, die so konzipiert sind, dass sie die Leistung nicht beeinträchtigen.

Das bedeutet natürlich nicht, dass Ihre Seiten nicht auch JavaScript nutzen können. Es gibt Möglichkeiten, dynamische und interaktive Inhalte in AMP zu erstellen, solange Sie dabei vorsichtig vorgehen.

Asset-unabhängiges Layout. Normalerweise müssen Browser jedes Element einer Seite laden, bevor sie wirklich wissen, wie die Seite aussehen wird. Das liegt daran, dass das Layout verschiedene Bilder, Medienelemente und Skripte enthält, die geladen werden müssen, bevor ihre Größe und sogar ihre Wirkung auf die Seite bekannt sind. In AMP wird all dies über HTML abgewickelt, sodass der Browser bereits vor dem Laden dieser Elemente weiß, wie das Layout aussehen wird, da die Größe im zugrunde liegenden Code bereits festgelegt und vorbestimmt ist. Dies wird als „statisches Layout“ bezeichnet und ermöglicht das gleichzeitige Laden aller Seiten, ohne auf andere Ressourcen warten zu müssen.

Inline-CSS, größenbeschränkt. AMPs erlauben nur ein einziges Stylesheet. Durch die Begrenzung der CSS-Anzahl reduzieren sie HTTP-Anfragen auf nur eine. Darüber hinaus ist die CSS-Größe auf 50 Kilobyte begrenzt, was für ein gewisses Maß an Design ausreichend ist und den Entwickler dennoch zu sauberem und effizientem Code zwingt.

Schriftartoptimierung. Herkömmliche Websites warten, bis alles geladen ist, bevor sie die oft auf Seiten verwendeten, relativ großen Schriftarten herunterladen. Da AMP CSS und die Verwendung externer Skripte einschränkt, benötigt das System keine HTTP-Anfragen, bis die Schriftart heruntergeladen ist.

Minimale Neuberechnungen von Stil und Layout. Dies hängt wiederum damit zusammen, dass dynamische Skripte auf normalen Websites das Seitenlayout beeinflussen und es aufgrund von Benutzerinteraktionen ändern können. Dies wiederum zwingt den Browser, das Erscheinungsbild des Inhalts neu zu berechnen. Die durch das AMP-Framework vorgegebenen Beschränkungen reduzieren den Bedarf an solchen Berechnungen.

CPU- vs. GPU-Bildbeschleunigung. Wenn eine CPU eine Seite rendert, verwendet sie Ebenen für Bilder und sendet die Medien dann zur weiteren Verarbeitung an die GPU (Grafikkarte). AMP ermöglicht die direkte Verarbeitung von Bildern durch die GPU, was zu deutlich schnelleren Ladezeiten führt.

Priorisierung des Ressourcenladens. Das AMP-Framework priorisiert Ressourcen, die wahrscheinlich vom Benutzer gesehen werden. Das bedeutet alles, was über dem Falz liegt, aber auch Ressourcen, deren Bedeutung als vorhergesagt gilt. Diese können aufgrund des statischen Layouts vor dem Laden vorab abgerufen werden. Die Informationen sind grundsätzlich vorhanden und einsatzbereit, werden aber nur dann gerendert, wenn ein Benutzer sie tatsächlich sehen muss.

Wie bereits erwähnt, dreht sich bei AMPs alles um Geschwindigkeit. Das bedeutet, dass andere Aspekte der Seite der Performance untergeordnet sind. Ihr ideales Webdesign muss möglicherweise optimiert werden, wobei einige Details geopfert werden müssen, um die Geschwindigkeitsverbesserungen von AMP voll auszuschöpfen. Wenn Sie dieses Design nicht ändern möchten, wägen Sie Ihre Optionen sorgfältig ab und entscheiden Sie, ob Ihre mobilen Besucher eine Seite mit allen erdenklichen Extras oder eine, die fast sofort lädt, bevorzugen. Denken Sie daran: Im mobilen Zeitalter kann eine schnellere Befriedigung der Nutzererfahrung wertvoller sein.

2. Geringere Absprungrate

Aktuelle Untersuchungen von Google haben ergeben, dass mobile Benutzer nicht nur schnelle Ladezeiten erwarten, sondern dass ihre Erwartungen auch eine entscheidende Rolle bei ihrer Entscheidung spielen, zu bleiben.
Ihre Studie ergab, dass Ladezeiten von bis zu drei Sekunden eine Absprungrate von über 30 % aufweisen. Nach fünf Sekunden steigt die Absprungrate auf 90 %. Nach sechs Sekunden liegt die Rate bei über 100 %.

Für mobile Seiten bedeutet dies, dass Optimierung entscheidend ist, um zu bestehen und der Konkurrenz einen Schritt voraus zu sein. Nach dieser Logik und angesichts des Marktanteils des mobilen Surfens sind mobilfreundliche Websites entscheidend für den Erfolg eines Unternehmens. Durch nahezu sofortige Ladezeiten können beschleunigte mobile Seiten zum entscheidenden Differenzierungsfaktor für ein Unternehmen werden.

3. Höhere Leistung und Flexibilität

AMP ist nicht das einzige Framework zur Verbesserung der mobilen Website-Performance. Es bietet jedoch die größte Flexibilität beim Zugriff auf ein vereinfachtes Stylesheet und die besten Geschwindigkeitsergebnisse, da es auf der Idee basiert, dass mobile Nutzer ihre Inhalte sofort abrufen möchten.

Dies bedeutet zwar keineswegs, dass andere Alternativen – wie etwa Responsive Webdesign oder Progressive Web Apps – verworfen werden sollten, es ist jedoch wichtig zu betonen, wie wichtig es ist, dieser durchaus praktikablen Option die gebührende Aufmerksamkeit zu schenken.

4. Mobile Suchmaschinenoptimierung (AMP SEO)

Leistung und Geschwindigkeit sind zweifellos sehr wichtige Faktoren im Hinblick auf die Besucherbindung und -konvertierung, aber um den Verkehr auf Ihre Website zu lenken, müssen Sie in den Suchmaschinen ein gutes Ranking erzielen.

Wie bereits erwähnt, wird das AMP-Projekt von Google aufgrund des zunehmenden Trends zum mobilen Surfen unterstützt, was bedeutet, dass Google diesem Thema große Bedeutung beimisst. Tatsächlich führte der Suchmaschinenriese 2018 die Mobile-First-Indexierung ein, die Positionen basierend auf der Mobilfreundlichkeit von Seiten vergibt.
Das bedeutet, dass die üblichen Best Practices für effektives SEO im Rahmen Ihrer digitalen Marketingstrategie nicht mehr ausreichen. Wenn Sie Ihre Website mobilfreundlich gestalten und mithilfe des von Google unterstützten Frameworks optimieren, erhöht sich die Chance Ihres Unternehmens, in den Ergebnisseiten weiter oben zu ranken.

AMP-Seiten mit strukturierten Daten können im Top-Story-Karussell, im Rich-Results-Karussell, in Visual Stories und in Rich Results in mobilen Suchergebnissen erscheinen. Diese Ergebnisse können Bilder, Seitenlogos und andere interessante Suchergebnisfunktionen enthalten.

AMP: Ja oder Nein

AMPs haben natürlich auch Nachteile. Wie bereits erwähnt, können Sie Ihr normales Webdesign wahrscheinlich nicht vollständig reproduzieren, wenn es zu komplex und mit dynamischen Elementen überladen ist. Dies lässt sich mit geschickter Programmierung umgehen, erfordert aber Kreativität und Geduld.

Das Framework ermöglicht außerdem aufgrund der starken Abhängigkeit von zwischengespeicherten Informationen kein natives Google Analytics-Tracking. Dies kann jedoch auch mit relativ einfachen, leicht verfügbaren Lösungen gelöst werden.

Obwohl dies Streitpunkte gegen die Verwendung von AMPs sein können, besteht die einfache Wahrheit darin, dass Benutzer heutzutage eher dazu neigen, Geschwindigkeit über alles andere zu stellen. Daher kann es durchaus sein, dass Ihr Unternehmen bei der Abwägung der Dinge Pragmatismus der Ästhetik vorzieht.