PORTAL und PPS Knowledge Base

Accelerated Mobile Pages (AMP)

Owned by Franziska Franz, created
Last updated: 2024-10-25 by Ilker Oygün
5 min read

Bei AMP handelt es sich um ein HTML-Framework, das von Google initiiert wurde, und speziell für mobile Endgeräte und schnelle Ladezeiten ausgelegt ist. AMP-Seiten werden in Googles Content Delivery Network (CDN) inklusive aller Bilder und Scripts gecached, wodurch die Seite zusätzlich schneller geladen wird.

Ist das AMP-Modul im PEIQ PORTAL aktiv, so können Beitragsdetailseiten auch als AMP-Variante ausgeliefert werden.

Funktionalitäten der Accelerated Mobile Pages

  • HTML-Framework zur Verkürzung von Ladezeiten auf mobilen Endgeräten

  • Auslieferung über Googles Content Delivery Network

  • Anzeige über den AMP-Viewer von Google

Inhaltsverzeichnis

Was ist AMP und wie funktioniert es?

Mit AMP (Abkürzung für Accelerated Mobile Pages) wurde im Rahmen eines Open Source Projekts unter Federführung Googles ein neuer Standard geschaffen, der darauf abzielt, Ladezeiten auf mobilen Endgeräten zu verkürzen.

AMP-Seiten werden als zusätzliche Version der bestehenden Webseite erstellt und müssen der AMP-HTML-Spezifikation entsprechen.

Damit die AMP-Seiten so schnell laden, spielen mehrere Faktoren eine Rolle, u.a.:

  • Asynchrones JavaScript: Damit können Inhalte sofort geladen werden, ohne dass externe Skripte das Laden blockieren. Sollen Werbung oder Codes von Drittanbietern eingebunden werden, so geschieht dies über iFrames. Diese werden erst nach dem Aufbau der Inhalte geladen.

  • Limitiertes CSS: Alle Style-Informationen müssen direkt in die Seite geschrieben werden, das CSS darf nicht größer als 50 Kilobyte sein.

  • Statische Größe für Ressourcen: Für Elemente wie Bilder werden feste Dimensionen bzw. Seitenverhältnisse angegeben zur Vermeidung von Verschiebungen beim Nachladen.

  • Priorisierte Requests und Laden von Ressourcen:

    • Schriften werden priorisiert heruntergeladen: Das AMP-System legt fest, dass keine HTTP-Requests ausgeführt werden, bis die Schriften heruntergeladen sind. Damit werden Requests blockiert, die den Browser daran hindern, Schriften herunterzuladen und der Seitenaufbau beschleunigt.

    • AMP lässt nicht zu, dass Extensions (z. B. für Elemente wie Lightboxes oder Social-Einbettungen) das Rendern der Seite blockieren.

    • Priorisiertes Laden von Ressourcen: In AMP werden als erstes nur die Teile geladen, die direkt nach dem Klick verfügbar sein müssen. Bilder und Anzeigen werden nur geladen, wenn sie wahrscheinlich vom Nutzer gesehen werden (z. B. weil sie am Anfang der Seite stehen).

  • Prerendering: Mithilfe von Prerendering werden Teile einer AMP-Seite geladen, bevor diese explizit von dem bzw. der Benutzer:in ausgewählt werden. Wenn der bzw. die Benutzer:in die AMP-Seite schließlich z. B. über die Google Suche auswählt, ist die Seite ggf. schon verfügbar und wird unmittelbar geladen. Beim Prerendering von AMP-Seiten wird nur jener Teil der Seite vorgeladen, der für den bzw. die Benutzer:in ohne Scrollen sichtbar ist (“above the fold”), wobei CPU-lastige Elemente, wie z. B. iframes von Drittanbietern, ausgespart bleiben.

  • Caching und AMP CDN: Wenn Google eine AMP-Seite erkennt, wird diese auf einem Proxyserver im Content Delivery Network (CDN) gecached. Inhalte können so weltweit schnell zur Verfügung gestellt werden, da die erforderlichen Dokumente für den Seitenaufbau aus nur einer Quelle geladen werden. Zudem wird dabei direkt bei Abruf der AMP-Seite geprüft, ob diese funktioniert und die Anforderungen erfüllt. Somit wird garantiert, dass AMP-Seiten zuverlässig funktionieren.

Auffindbarkeit und Auslieferung der AMP-Seiten

AMP-Seiten gehosted von PEIQ

Die AMP-Variante der Beitragsdetailseite kann aufgerufen werden, indem an die URL des Beitrags “/amp” angehangen wird (Mögliche Referrer z. B. nach Aufruf über eine Kurationsfläche müssen zunächst entfernt werden). Bei Aufruf über “Beitragsurl/amp” wird die AMP-Seite über die PEIQ Webserver ausgeliefert.

AMP-Seiten gehosted von Google

Damit die Google-Suche die AMP-Variante einer Beitragsdetailseite findet, verweist die non-AMP-Seite auf die AMP-Seite (und umgekehrt):

In der nicht-AMP-Variante wird mithilfe des <link rel=”amphtml”>-Tag im <head> auf die AMP-Variante verwiesen:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Umgekehrt zeigt die AMP-Variante mithilfe des <link rel=”canonical>-Tags auf die nicht-AMP-Variante der Beitragsdetailseite:

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Der canonical-Tag ist ein Standard-Instrument, um Inhalte gegenüber Suchmaschinen als bevorzugt über andere indexierte duplizierte Inhalte hervorzuheben und findet nicht nur im Zusammenhang mit AMP Einsatz.

Wird die nicht-AMP-Variante der Beitragsdetailseite von Google gecrawelt, registriert Google, dass eine AMP-Variante der Seite vorhanden ist. Vorausgesetzt die AMP-Seite ist valide, speichert Google eine Kopie der veröffentlichten AMP-Seite im AMP-Cache. Jedes Mal, wenn ein bzw. eine Benutzer:in auf AMP-Inhalte aus dem Cache zugreift, werden diese automatisch aktualisiert. Der bzw. die nächste Benutzer:in sieht die neuen Versionen, sobald die Inhalte im Cache gespeichert wurden.

Neben der Funktion als Content Delivery Network, führt der AMP Cache auch einige Optimierungen durch, die das Laden der Seite zusätzlich beschleunigen, darunter:

  • HTML-Optimierungen, wie ideale Anordnung von Skripten, das Entfernen von doppelten Skript-Tags oder das Entfernen von unnötigen Quotes und Leerzeichen.

  • Rewriting von JavaScript URLs, um unbegrenzte Cache Time zu erreichen

  • Bildoptimierung

Quelle: “Why AMP Caches exist” von Paul Bakaus (sehr lesenswert, inkl. zugänglichem Erklär-Video); weitere Cache-Optimierungen siehe hier.

Beim Speichern der AMP-Seite im Cache schafft der Google AMP Cache eine eigene Subdomain für die Domain der gespeicherten AMP-Seite und kreiert eine eigene URL für die Kopie der AMP-Seite im Cache.

Konkretes Beispiel:

URL der nicht-AMP-Variante

https://meinbezirk.at/voecklabruck/c-freizeit/campen-ermoeglicht-soziale-distanz_a4128812/

AMP-URL auf PEIQ-Servern

https://meinbezirk.at/voecklabruck/c-freizeit/campen-ermoeglicht-soziale-distanz_a4128812/amp

AMP-URL im Google Cache

https://meinbezirk-at.cdn.ampproject.org/c/s/meinbezirk.at/voecklabruck/c-freizeit/campen-ermoeglicht-soziale-distanz_a4128812/amp

AMP-Viewer URL (Erklärung s.u.)

https://www.google.com./amp/www.meinbezirk.at/voecklabruck/c-freizeit/campen-ermoeglicht-soziale-distanz_a4128812/amp

AMP-Seiten: gehostetet vs. gecacht

Die URL im Google Cache ist nicht durch Benutzer:innen aufrufbar, sondern kann nur durch Plattformen (wie Google Suche, Google News) oder Apps aufgerufen werden.

Zugriff auf AMP-Seiten via AMP-Viewer

 

Stellt der bzw. die Benutzer:in eine Suchanfrage, die zu der AMP-Seite passt, zeigt Google diese in den mobilen SERPs an und kennzeichnet diese mit einem Blitzsymbol. An dieser Stelle wird ggf. schon im Hintergrund ein Prerendering (s.o.) der AMP-Seiten durchgeführt, damit diese bei Klick darauf, sofort laden.

Wenn Benutzer:innen in der Google-Suche auf einen AMP-Inhalt geklickt haben, kann dieser grundsätzlich auf zwei Arten angezeigt werden: Im AMP-Viewer (Standradmethode) von Google oder als Signed Exchange. Die AMP-Seiten von PEIQ werden ausschließlich im AMP-Viewer angezeigt.

Beim AMP-Viewer handelt es sich um die Standardmethode zur Auslieferung von im Google Cache gespeicherten AMP-Seiten. Aufgerufen wird dabei die Google AMP Viewer URL. Oben im AMP-Viewer wird jedoch die Domain des PORTALs angezeigt. Daran können die Benutzer:innen ablesen, wer den Inhalt ursprünglich veröffentlicht hat.

Was ist die Google AMP Viewer URL?

Die Google AMP Viewer URL ist jene, die in der URL Eingabe-Zeile des Browser angezeigt wird.

Auslieferung einer AMP-Seite über den AMP-Viewer: Google AMP Viewer UR vs. URL der Originalquelle (Bildquelle)

Die URL des Beitrags im Google AMP Viewer unterscheidet sich, um das Pre-Rendering des Beitrags in der Google Suche zu ermöglichen: Während der bzw. die Benutzer:in sich auf der SERP befindet, werden AMP-Seiten z. T. schon im Hintergrund in einem “versteckten” iFrame geladen. Wenn der bzw. die Benutzer:in auf ein AMP-Suchergebnis klickt, wird dieser iFrame angezeigt (und der Beitrag damit quasi sofort – ohne Ladezeit – angezeigt). Das bedeutet allerdings auch, dass der bzw. die Benutzer:in auf keine neue Seite wechselt, sondern sich nach wie vor auf der SERP befindet. Damit der bzw. die Benutzer:in – wenn er bzw. sie bspw. die Seite neu lädt – im AMP-Viewer bleibt und nicht auf der SERP landet, wird die URL automatisch angepasst. Allerdings muss die neue URL aus Sicherheitsgründen auf derselben Domain (google.com) ausgeliefert werden – weshalb der Beitrag im AMP-Viewer über die Google AMP Viewer URL ausgespielt werden. Über den initialen iFrame hinaus wird die Seite von der AMP Cache URL geladen (siehe auch Bild oben).

Aktivierung des Moduls

Im Rahmen der Aktivierung des Moduls kann zwischen zwei Modi gewählt werden:

 

Verwandte Seiten

 

Nur für PEIQ-Mitarbeiter:innen
https://peiq.atlassian.net/wiki/x/VQDVFg

Impressum