Accelerated Mobile Pages (AMP) » So rendert man mobile Websites heute

Accelerated Mobile Pages (AMP) - Was ist das?

Einigen Entwicklern schien dies ebenfalls gehörig auf die Nerven zu gehen, weshalb sie das AMP Projekt ins Leben gerufen haben. Mit diesem erweiterten HTML Markup wird:

Die Reihenfolge der zu ladenden Inhalte gesteuert.
Der Zeitpunkt, wann die Inhalte geladen werden, auf den „above the fold“-Bereich getriggert.
Die Anzahl der Requests reduziert, was letztendlich der Ladegeschwindigkeit zugute kommt.

Einfach gesagt: Die Inhalte und der Content werden immer nur dann geladen, wenn sie sich im sichtbaren Bereich der Website befinden, während das Precaching bzw. Prerendering der noch nicht sichtbaren Inhalte das Gefühl vermittelt, als würde man in einer nativen App navigieren.

Auch die mobile Google Suche soll noch in diesem Jahr auf Accelerated Mobile Pages (AMP) umgestellt werden! Unter g.co/ampdemo kann die Version bereits ausprobiert werden.

Wann sind Accelerated Mobile Pages (AMP) sinnvoll?

AMP eignet sich NICHT zum Entwickeln interaktiver mobile Webapplikationen, es eignet sich aber bestens dafür, statische Inhalte dieser zu optimieren. Entweder man erstellt neue AMP-optimierte Landingpages und referenziert via Canonical darauf, oder man ersetzt die bereits indexierten Seiten durch Accelerated Mobile Pages (AMP) Code und referenziert das Canonical auf sich selbst.

Welche Voraussetzungen müssen erfüllt sein?

Es gibt gewisse Regeln und Attribute, um die das Standard HTML Grundgerüst erweitert werden muss:

Genauere Infos dazu findet ihr in der AMP Dokumentation.

Accelerated Mobile Pages (AMP) sind viel strikter als klassisches HTML

Der Code muss 100% valide sein, da die Seiten sonst nicht von Google angenommen werden.
Um Requests zu minimieren, kann und darf CSS nur im head der Website implementiert werden, wobei der Code eine Größe von 50kb nicht überschreiten darf.
Sämtliche JavaScripts müssen asynchron geladen werden.
Canonical auf sich selbst verweisend ist Pflichtangabe.

Wer sollte sich angesprochen fühlen?

Die durchschnittliche Ladezeit heutiger Websites liegt bei 10 Sekunden (!!!) während 60% der User bereits nach 3 Sekunden abspringen. Ein vernünftiges Gratis-Tool zur Messung der Ladezeiten ist Pingdom. Als Vorreiter zählt hier – wie so oft – die Website von Wikipedia, die ich testweise durch das Tool geschossen habe.

Ausschlaggebend sind vor allem die Anzahl der Requests und die Pagesize! Wenn es also um reine Inhaltsseiten geht, würde ich durchaus Wikipedia als Benchmark heranziehen und versuchen, möglichst viel abzuspecken.

Ich verwende viele extrem hochauflösende Bilder

Ein Bild ist ein Bild und muss natürlich als Ganzes heruntergeladen werden, da nützt uns die beste Website der Welt nichts. Hier ein paar Tipps:

Die Auflösung der Bilder sollte sich nach der Größe des Containers richten, in den dieses eingebettet wird.
Vor allem bei Fotos bzw. jpg Dateien eine Bildkomprimierung verwenden -> dabei können bis zu 25% an Dateigröße ohne Qualitätsverlust eingespart werden.
Das richtige Bildformat für die diversen Websiteelemente verwenden.

Erwartungshaltung heutiger User

Der nachstehende Satz spricht für sich, ich habe dem nichts mehr hinzuzufügen… 🙂
„In 2006, the average online shopper expected a web page to load in 4 seconds. Today, that same shopper expects your page to load in 2 seconds or less.“
[Quelle: Cheat Sheet: Everything you wanted to know about web performance but were afraid to ask]

Pagespeed ist ein wichtiger Google Ranking-Faktor

Wenn man sich etwas länger mit den Top 10 Rankings der Google Suche auseinandergesetzt hat, bemerkt man eine gewisse Verbindung zwischen Rankings, Pagespeed und Nutzersignalen. Eine Studie von Searchmetrics macht diesen Ansatz umso plausibler! Demnach finden sich vor allem in der mobilen SERP auf Google die schnelleren Seiten auf den Top 4 Positionen.

Die 10 häufigsten Ursachen für schlechten Sitespeed und wie Sie diese umgehen können, haben wir in diesem Blog bereits an anderer Stelle beschrieben.

Jede Sekunde zählt

Amazon betreibt mittlerweile sehr tiefe und gute Marktforschung, von der wir einiges lernen können. Ihnen ist es gelungen, eine Formel aufzustellen, die zeigt inwiefern Pagespeed mit Conversions korrelieren.

Währenddessen haben Google, Yahoo und Bing herausgefunden, dass schnellere Ladezeiten zu weniger Suchanfragen führen. Demnach macht es wohl sehr viel Sinn, dass Google schnellere Websites bevorzugt, denn schnellere Websites machen User schneller happy und das entspricht genau Googles Philosophie.

Ich hoffe ich konnte dem ein oder anderen Leser eine Entscheidungsgrundlage geben, ob sich eine Investition lohnt oder nicht. In diesem Sinne – auf ein schnelleres Jahr 2016.