Accelerated Mobile Pages: Weg mit dem Speck
Philipp Zeder
Kategorie:in
Entwicklung & Performance
Veröffentlicht am 18. Feb. 2016
Aktualisiert am 3. Juni 2021
Im vergangenen Oktober hat Google das Projekt Accelerated Mobile Pages (AMP) vorgestellt, das die Performance im mobilen Web dramatisch verbessern soll. Plattformen wie Twitter, LinkedIn oder Pinterest haben zur gleichen Zeit ihre Unterstützung angekündigt. AMP-Inhalte sollen ab Februar 2016 in den mobilen Suchresultaten von Google auftauchen. Wir erklären was AMP ist und für wen die Technik interessant ist.
Was ist AMP?
Das AMP-Projekt wurde von Google ins Leben gerufen, um Webinhalte schneller an Benutzer liefern zu können. Das Projekt macht sich dabei eine Light-Version von HTML zu Nutze, dem sogenannten «AMP HTML». AMP soll für statische Inhalte wie News-Artikel oder Blogbeiträge zum Einsatz kommen und gilt damit als Antwort auf Facebook Instant Articles. Im Gegensatz zu Facebook Instant Articles ist AMP open-source und wird von weiteren Plattformen wie Twitter, Pinterest oder LinkedIn unterstützt.
Facebook hat gestern angekündigt, dass das Instant Articles-Programm ab 12. April 2016 für alle Facebook-Seiten geöffnet wird.
Wo kommt AMP zum Einsatz?
Google will AMP nutzen, um Inhalte direkt in den Suchresultaten der eigenen Suchmaschine einzubinden. Die Vorschau von AMP-Inhalten wird dabei vor allen anderen Resultaten in Form eines Karussells angezeigt. Ähnlich werden sich Plattformen wie Twitter verhalten. AMP-Inhalte können damit ohne Weiterleitung direkt in der entsprechenden App angezeigt werden. Ein Segen für das Nutzererlebnis.
Seit 20. September 2016 erscheinen AMP-Inhalte in den Suchresultaten von Google.
Zusätzlich betreibt Google das AMP CDN, ein Content-Delivery-Network, das AMP-Inhalte weltweit verteilt und bereithält, um die Ladezeiten für Besucher weiter zu optimieren. Im Gegensatz zum restlichen Projekt ist AMP CDN nicht open-sourced und Informationen zum System sind noch spärlich gesät. Ob Twitter und Co. eigene CDNs für AMP-Inhalte bereitstellen werden, ist noch offen.
Strikte Diät, mehr Performance
Um die Performance von AMP-Inhalten hoch zu halten, sind die Möglichkeiten von AMP HTML und der zentralen JavaScript-Bibliothek AMP JS begrenzt. So sind in AMP-Dokumenten neben AMP JS externe Scripts nur erlaubt, wenn diese asynchron geladen werden. Zudem sind nicht alle CSS-Anweisungen erlaubt, müssen inline eingebunden sein und dürfen eine Gesamtgrösse von 50 kB nicht überschreiten. AMP-Inhalte unterliegen also einer strikten Diät.
Soll ich meine Inhalte als AMP anbieten?
Der zunehmenden Konzentration von Inhalten auf Plattformen wie Facebook, Twitter oder Google stehen vor allem jene Unternehmen kritisch gegenüber, die mit Online-Werbung ihr Geld verdienen. Die Möglichkeit, eigene Inhalte zu monetarisieren, ist sowohl bei Facebook Instant Articles als auch bei Accelerated Mobile Pages ein zentraler Bestandteil.
AMP macht für Websites Sinn, die Inhalte wie News-Artikel oder Blogposts anbieten. Wer jetzt schon AMP-Versionen seiner Inhalte bereitstellt, erhält die Chance, zuoberst in den Google-Suchresultaten aufzutauchen und schafft sich (zumindest vorerst) einen Vorteil gegenüber der Konkurrenz.
Die populärsten Content-Management-Systeme sind daran, AMP zu integrieren. Für WordPress sind bereits einige Plugins erhältlich, die die eigenen Blogpost in einer AMP-Version verfügbar machen. Das von Automattic mitentwickelte Plugin AMP kommt auch auf unserem Blog zum Einsatz. Und so sieht dieser Beitrag im AMP-Format aus.
Tutorial und weiterführende Lektüre
In der Dokumentation des Projektes finden Sie ein Tutorial, das Sie durch die Erstellung Ihrer ersten AMP-Seite führt. Weiterführende Informationen zu AMP finden Sie ausserdem auf der offiziellen Projekt-Website, dem GitHub-Repo und in der offiziellen Dokumentation.
Beteilige dich an der Diskussion
13 Kommentare
Hi Jakob, mir geht’s gleich. Ich habe es bisher ebenfalls nicht geschafft, selbst mit sehr gezielten Suchanfragen, AMPs in den Resultaten angezeigt zu bekommen. Ab 12. April sollen ja Instant Articles von Facebook für alle offen stehen. Ich bin gespannt, ob das als Anstoss dienen wird, dass wir auch bei Google AMPs gezeigt bekommen.
Aha! Das ist gut zu wissen. Lustig, dass bisher niemand im Netz danach gefragt hat. Es wird überall diskutiert ob die Entwicklung gut oder schlecht ist, aber niemand fragt wo man sie dann eigentlich sieht :)
Warten wir auf den 12. April!
Super – wir sind nun zurück in den 90ern!
Naja, ich persönlich habe AMP zwar bereits eingebunden, aber meine Meinung davon ist nicht allzu positiv. Klar werden Seiten so schneller geladen, aber aus meiner Sicht geht diese Entwicklung in die falsche Richtung. Das ist ungefähr so, als würde ein Automobilhersteller ein brandneues Auto entwickelt, in dem keine Klimaanlage, keine elektrischen Fensterheber und überhaupt gar nichts hat, ausser einen Motor, zwei Sitze und ein Lenkrad hat. Und alles nur um mehr Performance an den Start zu bringen. …und dabei noch fast jedem aufzuzwingen es zu nutzen.
Hi Peter, danke für Deinen Kommentar. Ich teile Deine Sorge, ob AMP wirklich der richtige Weg ist. Dass sich in der Sache aber etwas tun muss, steht für mich ausser Frage. Wenn Websites nur noch mit Ad- und Tracking-Blockern vernünftig genutzt werden können, muss sich etwas ändern. Wer weiss, vielleicht dient AMP auch als Grundlage für kommende W3C-Standards. Mit SPDY, das in HTTP/2 aufgegangen ist, hat das ja schon ganz gut geklappt.
Es spricht aber auch vieles gegen AMP:
HTML5 und CSS3 sind bereits sehr performant, wenn richtig eingesetzt
Es ist (noch) kein offizielle W3C Standard
Man ist von externe Ressourcen abhängig (Tracking)
Man ist auf JavaScript angewiesen, kein Fallback
Nur grosse Plattformen (Google, Facebook, Twitter…) werden unterstützt, Alternativen bleiben aussen vor
Internet ≠ Smartphones und Tablets; Bitte nicht zu Tode “optimieren”
HTML5 und CSS3 sind bereits sehr performant, wenn richtig eingesetzt
Richtig. Allerdings ist das ja immer öfter nicht der Fall, sprich Websites sind aufgeblasen und enthalten unnötigen Code. Dem soll AMP entgegenwirken.
Es ist (noch) kein offizielle W3C Standard
Richtig. Aber das kann ja noch werden, wenn es denn sein muss ;)
Man ist von externe Ressourcen abhängig (Tracking)
Richtig. Allerdings ist das ja auch gleichzeitig eine der Stärken von AMP. So muss der Client nicht bei jedem Aufruf einer neuer Domain die benötigten Scripts neu laden.
Nur grosse Plattformen (Google, Facebook, Twitter…) werden unterstützt, Alternativen bleiben aussen vor
Du meinst bei den Extensions? Da sollte ein entsprechender Pull-Request genügen, oder?
Internet ≠ Smartphones und Tablets; Bitte nicht zu Tode „optimieren“
Smartphones und Tablets sind nicht das ganze Internet, richtig. Aber der Anteil steigt und steigt. Warum soll man nicht für solche Geräte optimieren? Das muss ja nicht mit AMP sein.
Hallo Philipp,
danke für deinen Artikel! Der hat mich nicht nur mit neuen Infos versorgt, sondern mich zusätzlich neugierig gemacht. Aus dem Grund habe ich euer Blog eben bei Google PageSpeed Insights gegen mein Blog kontrastkammer.de antreten lassen. Das Ergebnis spricht nicht für eure Seite …
Wie kann es sein, dass euer Blog trotz AMP (und sehr vieler Bilder bei mir) im Mobil-Bereich nur gleich gut wie kontrastkammer ist? In der Desktop-Wertung ist kontrastkammer sogar etwas besser. Ich würde immer erwarten, dass eine solche Optimierung mehr bringen muss.
Was ich auch nicht verstanden habe, du aber vielleicht weißt: Wenn man ein AMP-Plugin in WordPress installiert: Wird dann etwas an der Permalink-Struktur verändert?
Ach ja: Was ist denn der Vorteil von AMP gegenüber einer Mobil-Seite, wie sie z. B. über ein Jetpack-Modul erzeugt wird?
Wintergrüße aus Hamburg
Jörn
Hi Jörn, danke für Deinen Kommentar.
Wie kann es sein, dass euer Blog trotz AMP (und sehr vieler Bilder bei mir) im Mobil-Bereich nur gleich gut wie kontrastkammer ist? In der Desktop-Wertung ist kontrastkammer sogar etwas besser. Ich würde immer erwarten, dass eine solche Optimierung mehr bringen muss.
Ich würde mich bei AMP-Inhalten noch nicht auf Google PageSpeed Insights verlassen. So stört sich der Test an den eingebundenen Google-Fonts und dem AMP JS, obwohl Google Fonts zu den freigegebenen Schriftanbietern gehört (siehe Abschnitt Custom fonts, https://www.ampproject.org/docs/reference/spec.html) und AMP JS der zentrale Teil einer AMP-Seite ist.
Ganz generell sind AMP-Inhalte grundsätzlich eigenständige URLs (die dank rel=”canonical” nicht als Double Content gelten), die keinen Einfluss auf die Performance der normalen URLs haben.
Was ich auch nicht verstanden habe, du aber vielleicht weißt: Wenn man ein AMP-Plugin in WordPress installiert: Wird dann etwas an der Permalink-Struktur verändert?
Nein, die Permalink-Struktur wird nicht verändert. Bei dem von uns verwendeten Plugin (https://github.com/Automattic/amp-wp) wird die AMP-Version eines Beitrags einfach mit einem angehängten “/amp” aufgerufen. Damit Plattformen die AMP-Version eines Beitrags finden, wird im «normalen» Beitrag ein Link-Tag im Header gesetzt. In diesem Blogbeitrag sieht der so aus:
<link rel="amphtml" href="https://www.cyon.ch/blog/Accelerated-Mobile-Pages/amp" />
Ach ja: Was ist denn der Vorteil von AMP gegenüber einer Mobil-Seite, wie sie z. B. über ein Jetpack-Modul erzeugt wird?
Ich kann mir durchaus vorstellen, die AMP-Version eines Artikels gleich als Mobil-Version für Smartphone-Besucher auszuliefern (unser Blog bzw. unsere Website ist ja noch nicht responsive). Vorerst ist AMP aber dafür gedacht, dass Google solche Beiträge direkt in den mobilen Suchresultaten anzeigen kann. Facebook macht das ähnlich mit den Instant Articles, damit Nutzer die entsprechende Plattform gar nicht mehr verlassen müssen um Beiträge zu lesen.
Hauptzielgruppe von AMP und Instant Articles sind Newsportale, Zeitungen, Medienunternehmen, usw. Ich denke aber, dass AMP auch für Blogger sehr interessant sein können. Vor allem, weil zu Beginn noch nicht viele Websitebetreiber AMP-Versionen ihrer Inhalte anbieten werden.
Hallo Philipp,
eine Anmerkung habe ich noch: Aufrufe auf AMP-Beiträge werden zumindest nicht vom bei mir verwendeten Klickzähler erfasst. Im schlechtesten Fall gilt das auch für andere Statistik-Tools. Sollte das stimmen, hätte man keine Infos über die Zahl der AMP-Aufrufe.
Jörn
Genau, für AMP-Inhalte müssen Statistiken separat konfiguriert werden. AMP bietet dafür die Extension amp-analytics die mit Google Analytics und alternativen Lösungen funktioniert.
Also AMP bietet eine ähnliche Möglichkeit an, wie Reader-Ansicht in iOS?
Ich denke AMP kann durchaus so genutzt werden. Der primäre Einsatzzweck ist (zumindest vorerst) die Einbindung in den Google-Suchergebnissen und auf Plattformen wie Twitter oder Pinterest.
Uns ist aufgefallen, dass wir bisher noch in keiner einzigen Suche AMP angezeigt bekommen haben. Wie schaut das bei euch aus? Wir haben inzwischen sogar schon einen Blogpost dazu verfasst, um mal zu hören ob wir die einzigen sind bei denen die AMP nicht bei Google auftauchen: Her mit den schnellen Seiten