Software

Accelerated Mobile Pages

Accelerated Mobile Pages (AMP) ist ein quelloffenes, plattformübergreifendes Framework, mit dessen Hilfe die Ladegeschwindigkeit mobiler Webseiten deutlich erhöht werden können. 
Partner und Nachrichtenseiten wie Twitter, Pinterest, WordPress, LinkedIn, New York Times, The Guardian und viele weitere haben AMP-HTML bereits integriert.

Insgesamt wurden über 600.000 AMP-Webseiten erstellt. (#1)

Ausgeliefert werden validierte AMP-Seiten indirekt über ein CDN (Content Delivery Network) von Google, wodurch sie noch schneller bereitgestellt werden können und was die Darstellung einer Kurzfassung der AMP-Seite auf den Ergebnisseiten der Google-Suche ermöglicht.

Vorschau Seite

Bilder, welche nicht im Sichtfeld des Nutzers liegen, werden erst nachgeladen, sobald heruntergescrollt wird (Lazy loading).

Damit AMP diese Geschwindigkeitsoptimierung erzielen kann, wird eigenes Javascript, externes CSS sowie langsame HTML-Elemente verboten. AMP-Webseiten verwenden ausschließlich asynchrones Javasript. Hierdurch kann die Seite schneller gerendert werden, weil das Laden nicht durch Javascript-Ressourcen blockiert wird. Wird JavaScript von Drittanbietern eingebunden, erfolgt die Implementierung über iframes.
Das so eingebundene Script wird im Hintergrund geladen, ohne dass der Parser durch das Herunterladen und Ausführen angehalten wird.

Der Vorteil an AMP ist, dass nicht die komplette Webseite umgestellt werden muss, sondern das AMP zusätzlich zu der normalen Webseite bereitgestellt werden kann.
Sobald eingerichtet muss die AMP Version im „canonical“ Tag verlinkt werden, Google leitet dann automatisch mobile Nutzer um, Desktop Nutzer sehen weiterhin die normale Version der Seite.

 

Auf der Desktop Version:

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

Auf der AMP Version:

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

 

Verbotene Elemente AMP-Alternativen
Eigenes Javascript Javascript in iframes einbinden / Service Worker ** (zB für Push Benachrichtigungen)
Einbinden von Analytics-Providern amp-analytics-Tag
Einbinden von Werbenetzwerken Amp-ad Tag, amp-pixel-Tag, amp-sticky-ad Tag
Externes CSS CSS im head (maximal 50 KByte)
Inline-CSS (style-Attribut) CSS im head (maximal 50 KByte)
Schriftarten, die per Javascript eingebunden werden Schriftarten, die per CSS eingebunden werden
Bestimmte CSS Selektoren (*, :not())
Transition, alle CSS Animations-Elemente, außer transform und opacity transform, opacity
Formulare Formulare mit AMP-Modul
img-Tag amp-img-Tag
iframe-Tag amp-iframe-Tag
audio-Tag amp-audio-Tag
video-Tag amp-video-Tag
style type=“text/css“-Tag style amp-custom-Tag

** Die neue Service-Worker-API hingegen erlaubt es, eine JavaScript-Datei auch dann auszuführen, wenn die dazugehörige Webseite gar nicht geöffnet ist.

 

Auf Proxyservern weltweit wird ein Cache von AMP-Webseiten angelegt. Die Inhalte können auf diese Weise über ein CDN ausgegeben werden, das auf HTTP/2 basiert. Das CDN prüft außerdem, ob die AMP-Webseite auch funktionsfähig ist.

Viele populäre CMS unterstützen bereits AMP:

Canvas Drupal Fastcommerce Hatena
Marfeel Squarespace WordPress.com WordPress.org

 

Der HTML-Quellcode wird bei AMP angepasst und reduziert. Pro Seitenaufruf erfolgt darüber hinaus nur ein HTTP Request.

75% der mobilen Webseiten laden länger als 10 Sekunden
53% der Besucher einer mobilen Webseite verlassen die Seite nach 3 Sekunden Ladezeit

Wie funktioniert pre-rendering?

Wenn ein Benutzer eine Google-Suche durchführt und AMP-fähige Ergebnisse zurückgibt, werden einige dieser Ergebnisse im Hintergrund vorgeladen. Wenn der Benutzer auf ein vorgeladenen Ergebnis klickt, lädt die AMP-Seite sofort.

Pre-rendering funktioniert durch das Laden eines versteckten iframes auf der Einbettungsseite (der Suchergebnisseite) mit dem Inhalt der AMP-Seite und einem zusätzlichen Parameter, der angibt, dass das AMP-Dokument nur vogespeichert ist. Die JavaScript-Komponente, die den Lebenszyklus dieser iframes behandelt, heißt „AMP Viewer“.

 

Service Worker:
Mit Service Workern ist es somit also möglich, Funktionen im Hintergrund auszuführen – auch nach dem Verlassen einer Webseite. Eine der Einsatzmöglichkeiten der Service Worker, ist das Zwischenspeichern von Dateien im Hintergrund. Gerade bei der mobilen Nutzung der Internets sind Übertragungsraten nicht immer gleich gut. Ein Service-Worker-Script hat die Möglichkeit, im Hintergrund neue Inhalte zu laden – bei einer Nachrichtenseite zum Beispiel neue Artikel samt Bilder. Wird die Nachrichtenseite zu einem späteren Zeitpunkt aufgerufen, stehen die Inhalte bereits zur Verfügung.(#2)

Quellen:
#1: next-it-con Zeitschrift (Seite 64)
#2: drweb.de
ampproject.org
youtube.com

Bildquelle:
developers.googleblog.com

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.