Hack Your Business Podcast
Staffel 1, Folge 26: AMP, der Turboboost für deine Seite
Staffel 1, Folge 26: AMP, der Turboboost für deine Seite
AMP, der Turboboost für deine Seite

AMP, der Turboboost für deine Seite

AMP ist ein neuer Standard von Google, der Webseiten beschleunigen soll indem diese auf das Wesentliche beschränkt werden - ihren Inhalt.

Accelerated Mobile Pages

Hast du schon mal von AMP gehört? Also ich meine nicht diese großen Kisten, an denen man seine Gitarre anschließt und ordentlich Lärm macht, ich meine das AMP-Projekt.

Das AMP-Projekt hat einen offenen Standard entwickelt, der mobile Webseiten schneller machen soll. Ganz oben mit dabei: Google. An der Konzeption sind aber auch zahlreiche Content-Produzenten beteiligt.

Worum geht’s?
AMP steht für „Accelerated Mobile Pages“ also „Beschleunigte Mobile Seiten“. Und soll das Laden von Webseiten auf Mobilgeräten beschleunigen.

Funktionsweise

Das funktioniert eigentlich recht simpel.
Zusätzlich zur normalen Webseite, bietet der Betreiber der Seite auch eine AMP-Version an, welche ausschließlich mobil ausgeliefert wird. Dazu integriert man im Seitenkopf des Quellcodes einen Verweis auf die passende AMP-Seite.

Die Logik übernimmt dann der Browser, bzw. Google in den Suchergebnissen. Somit ist sichergestellt, dass auf dem Desktoprechner weiterhin die normale Seite dargestellt wird.

Die AMP-Seite ist nämlich ein wenig abgespeckt. Im Grunde ist sie eine normale HTML-Seite, der AMP-Standard kommt allerdings mit einigen Einschränkungen und Extras daher.

So wurden z.b. einige Elemente ausgetauscht, z.b. das Image-Tag, dessen HTML-Tag durch einen speziellen AMP-HTML-Tag getauscht wurde. Einhergehend mit diesen Änderungen, wurden auch ein paar restriktivere Regeln festgelegt. Um beim Bild zu bleiben: Hier MUSS man nun z.b. die Höhe und Breite des Bildes angeben.

Das ermöglicht es, die Seite bereits im korrekten Layout und Design anzuzeigen, BEVOR Elemente wie Bilder geladen wurden und trotzdem Seitensprünge zu vermeiden, die meist dann auftreten, wenn der Text schon da ist und dann auf einmal ein Bild aufploppt.

Bei AMP wird generell ein großes Augenmerk auf das Laden der Seite gesetzt. Zuerst werden nur Inhalte im sichtbaren Bereich also „Above the fold“ wie es so schön heißt, geladen. Wenn diese angezeigt werden und der User schon lesen kann, werden die restliche Inhalte nachgeladen.

Um das alles zu erreichen, muss man, neben dem speziellen HTML-Code auch noch eine JavaScript-Bibliothek einbinden, die diese Aufgaben übernimmt. Viel wissen muss man davon als Seitenbetreiber nicht, im Grunde reicht es, die Datei im Quelltext anzugeben.

Zusätzlich bietet Google noch die Option, die Seite auch im Google AMP-Cache abzulegen, was die Aufrufe noch schneller machen dürfte.

Warum sollte man das tun?

Lassen wir mal kurz die Technik Technik sein: Warum sollte man auch eine AMP-Version seiner Seiten anbieten?

Ganz klar, darüber hatte ich ja schon mal gesprochen, Geschwindigkeit ist das A und O - gerade mobil! Im Durchschnitt, verlassen 40% der User deine Seite, wenn sie nicht innerhalb von 3 Sekunden geladen ist

AMP beschleunigt deine Seiten ungemein, manchmal bemerkt man gar nicht, dass überhaupt ein Ladeprozess stattfindet. Und Google dankt dir das. In der mobilen Suche, werden Seiten, die AMP unterstützen hervorgehoben und ranken besser.

Außerdem sorgt AMP dafür, dass du deinen Content besser im Blick haben musst. Denn darum geht es. Beim AMP-Projekt, stehen Inhalte an oberster Stelle, dicht gefolgt von der Benutzbarkeit. Der Rest ist eher Beiwerk.

Einen Nachteil hat das Ganze noch für mich. Es ist quasi nicht gestattet zusätzliche JavaScript und Ähnliches zu laden, weshalb es derzeit kaum möglich ist, Besucherzahlen z.b. via Piwik zu messen. Aber hier wird es sicherlich auch noch Lösungen geben.

Wenn du jetzt sofort loslegen willst, kannst du entweder selber anfangen alternative AMP-Templates oder Seiten zu bauen oder du schaust mal nach, ob dein CMS vielleicht schon passende Plugins anbietet.

Allgemeines über AMP

Das AMP-Projekt
Was ist AMP?

WordPress-Plugins

AMP-Plugin
Analytics für AMP
Die AMP-Toolbox
Custom AMP
Project AMP

Feedback?

Schreib mir einen Kommentar oder schick mir ein Video via Snapchat

0
0
blog comments powered by Disqus