Die 9 neuesten AMP-Updates, die die Benutzererfahrung über schnellere Seitenladegeschwindigkeiten hinaus verbessern

Seit Google 2015 AMP ankündigte, um die Seitenladegeschwindigkeit zu erhöhen und die mobile Benutzererfahrung insgesamt zu verbessern, hat das Open-Source-Framework weiter an Popularität gewonnen.

Darüber hinaus wurde das Framework erheblich aktualisiert, um eine Vielzahl von Elementen auf der Seite, bessere Funktionen und Optionen sowie verbesserte Schnittstellen zu unterstützen – alles, um die Benutzererfahrung weiter zu verbessern.

Hier sind einige der neuesten neuen AMP-Updates.

9 AMP-Updates, die Sie vielleicht noch nicht kennen

1. Unterzeichnete Börsen

Als AMP entstand, ging Google Kompromisse ein, um datenschutzfreundliche Webinhalte zum sofortigen Laden bereitzustellen. Einer davon war, dass die in Adressleisten angezeigten URLs mit „google.com/amp“ statt mit der Domain des Herausgebers begannen:

Dies war einer der prominentesten Kritikpunkte von AMP. Unternehmen wollten nicht, dass Google die AMP-URL anstelle der Domain anzeigt, von der die Inhalte tatsächlich stammen, da Domain-Namen für das Branding und die Veröffentlichung von Inhalten unerlässlich sind.

Im April 2019 kündigte Google eine Lösung an – eine Möglichkeit, die ursprüngliche URL des Inhalts anzuzeigen und gleichzeitig die sofortige Ladefunktion beizubehalten. Diese Lösung ist signierter Austausch.

Google sagt:

Ein signierter Austausch ist ein Dateiformat, das in der Web-Packaging-Spezifikation definiert ist und es dem Browser ermöglicht, einem Dokument zu vertrauen, als ob es zu Ihrem Ursprung gehört. Auf diese Weise können Sie Erstanbieter-Cookies und -Speicher verwenden, um Inhalte anzupassen und die Analyseintegration zu vereinfachen.

Am wichtigsten ist jedoch, dass signierte Börsen die echte URL des Herausgebers anzeigen, wenn Nutzer die Google-Suche verwenden und auf einen AMP-Link anstelle eines "http//google.com/amp"-Links klicken:

Dies ist aus zwei Gründen eine große Sache:

1. Der Domainname ist ein Kernbestandteil der Markenidentität
2. Es ist einfacher, AMP-Analysen mit Ihrer eigenen URL zu erhalten

(Hinweis: Google verlinkt nur dann auf signierte Exchanges, wenn der Publisher, der Browser und der Suchkontext dies alle unterstützen. Das bedeutet, dass Sie sowohl die signierte Exchange-Version als auch die nicht-signierte Exchange-Version Ihrer Inhalte veröffentlichen müssen.)

2. Serverseitiges Rendering (SSR)

Server-Side-Rendering (SSR) ist eine Technik, die Sie auf AMP-Seiten anwenden können, damit diese noch schneller geladen werden – sogar bis zu 50 % schneller.

SSR funktioniert durch die Verbesserung der First-Contentful-Painting-Zeiten (FCP) für Frameworks, die die Seite clientseitig rendern. Der Nachteil des clientseitigen Renderings besteht darin, dass zuerst das gesamte zum Rendern der Seite erforderliche JavaScript heruntergeladen werden muss, was die Ladezeit des Seiteninhalts verzögert und möglicherweise die Absprungraten erhöhen kann.

Als Lösung entfernt AMP SSR den AMP-Boilerplate-Code und rendert das Seitenlayout auf dem Server.

(Hinweis: Der AMP-Boilerplate-Code ist vorhanden, um Inhaltssprünge beim Laden von Seiten zu verhindern und Inhalte auszublenden, bis das AMP-Framework heruntergeladen und das Seitenlayout eingerichtet wurde. Aus diesem Grund leiden AMP-Seiten unter dem gleichen Problem wie andere clientseitige Frameworks – das Rendering ist blockiert, bis das JavaScript heruntergeladen ist.)

Durch Entfernen des Boilerplate-Codes führt AMP SSR zu 50 % schnelleren FCP-Zeiten.

AMP-Optimierungen mit SSR verstoßen gegen die Regeln der AMP-Spezifikation, wodurch das Dokument ungültig wird. Solange es jedoch während der Einrichtung mit einem Flag angezeigt wird, behandelt der AMP-Validator SSR-d AMP als gültiges AMP.

Derzeit sind zwei Tools für AMP SSR verfügbar:

1. AMP Optimizer — Eine NodeJs-Bibliothek zum Erstellen von optimiertem AMP
2. AMP Packager – Ago-Befehlszeilentool, das mit der Bereitstellung von signierten Exchanges verwendet werden kann

3. Eingabemaskierung

Das Online-Ausfüllen von Formularen kann so umständlich sein, dass Benutzer daran gehindert werden. Dies gilt eher für mobile Geräte, bei denen der Bildschirm kleiner und die Navigation schwieriger ist. Aber wie Sie wissen, sind Formulare unerlässlich, um Leads zu sammeln und Verkäufe abzuschließen.

Um das Ausfüllen des Formulars einfacher und zeitsparender zu gestalten, hat AMP die Eingabemaskierung aktiviert. Mit dieser Funktion können Entwickler Formatierungen wie Leerzeichen und Zwischenzeichen hinzufügen, was besonders praktisch ist, wenn Benutzer Daten, Zahlungsdetails, Telefonnummern usw. eingeben:

Da in der heutigen digitalen Welt immer mehr Menschen ihre Informationen online übermitteln, kann ein einfacheres und schnelleres System den entscheidenden Unterschied ausmachen.

4. Videooptimierung

Es wurden mehrere Videoverbesserungen eingeführt, um die vielen Vorteile von AMP zu erhöhen.

Docking
Videos auf mobilen Webseiten behindern oft die Sicht des Nutzers, wenn die Optimierung nicht richtig implementiert wird. Dies kann leicht zu einer schlechten Benutzererfahrung führen und sie davon abhalten, zukünftige Inhalte anzuzeigen.

Dieses neue Dock-Attribut minimiert das aktuell angesehene Video, wenn Benutzer auf der Seite nach unten scrollen, sodass sie Inhalte und Videos gleichzeitig und ohne Behinderung anzeigen können:

Sie können auch anpassen, wo und wie das Video andockt, um die beste Möglichkeit zu finden, Ihr Video dem Benutzer zu präsentieren.

Videoplayer
Ein weiteres neues Update ist <amp-video-iframe>, mit dem Sie einen benutzerdefinierten Videoplayer installieren können, der alle gewünschten AMP-Videoschnittstellenfunktionen enthält (Autoplay, Dock usw.).

Videoanzeigen
Videoanzeigen können auch in AMP integriert und optimiert werden – von jedem Video-Werbenetzwerk, das das IMA SDK unterstützt, sodass Sie sowohl Anzeigen als auch Einnahmen verfolgen können.

5. Optimierte Listen

AMP hat kürzlich zwei neue Komponenten hinzugefügt, um Listen auf Webseiten zu optimieren:

Größenänderung
Mit der <amp-list> können Sie angeben, wann der Listencontainer bei Benutzerinteraktion seine Größe ändern soll, um verschiedene Arten von Inhalten besser anzupassen (z. B. wenn die <amp-list> ein <amp-accordion> enthält, das ein Benutzer tippt ).

Unendliches Scrollen
Unendliches Scrollen ist jetzt verfügbar. Wenn Benutzer also das Ende einer Liste von Elementen (Suchergebnisse, Produktkarten usw.) erreichen, wird die Liste automatisch mit weiteren Elementen gefüllt:

Dies bietet Benutzern einen nahtlosen Zugriff auf mehr Inhalte von einer einzigen Seite, anstatt auf eine „Weiter“-Schaltfläche klicken und eine andere Listenseite besuchen zu müssen.

6. Integration von Drittanbietern

Cookies und Datenerfassung sind für Marken unerlässlich, um Benutzerinformationen aufzuzeichnen. Mit der DSGVO wurden die Regeln zur Dateneinwilligung und zum Datenschutz jedoch strenger und auf allen Websites reguliert. Dies führte dazu, dass viele Verlage auf Consent Management Platforms (CMPs) von Drittanbietern angewiesen sind, um Daten gemäß der DSGVO zu sammeln.

Vor diesem Hintergrund hat AMP <amp-consent> eingeführt, sodass CMPs problemlos in AMP integriert werden können. Das heißt, AMP-fähige Websites können jetzt weiterhin CMPs verwenden, um Benutzerdaten ohne Kompatibilitätsprobleme zu sammeln und zu verwalten. Sie können auch eine Benutzeroberfläche zur Dateneinwilligung integrieren und Benutzer auffordern, bevor sie ihre Informationen bereitstellen.

7. Lightbox-Modus

Anzeigen von Bildern über einen Leuchtkasten – das Erweitern eines Elements, um den Bildschirm auszufüllen, bis es vom Benutzer wieder geschlossen wird, wird immer häufiger. Für Entwickler kann es jedoch schwierig sein, einen reibungslosen Übergang in den Lightbox-Modus zu ermöglichen, da es eine Interpolation zwischen zwei Bildern unterschiedlicher Positionen und Größen erfordert.

Dies führte dazu, dass die AMP UI Working Group die Lightbox-Übergänge optimiert und die Bildsichtbarkeit verbessert hat:

<amp-lightbox-gallery> bietet Werbetreibenden jetzt die Möglichkeit, mit verschiedenen Größen für ihre Website zu experimentieren und die Darstellung der Bilder durch die Nutzer zu optimieren.

8. Verfügbarkeit von benutzerdefiniertem JavaScript

Eines der neuesten Google AMP-Updates ist die Verfügbarkeit von <amp-script>. Es bietet die Möglichkeit, JavaScript in einem separaten Worker-Thread auszuführen, damit Werbetreibende benutzerdefiniertes JavaScript zu ihrer AMP-Seite hinzufügen können und gleichzeitig die hohe Ladegeschwindigkeit beibehalten.

Mit dem neuen <amp-script> können Sie Anwendungsfälle abdecken, die mit zuvor vorhandenen AMP-Komponenten nicht möglich waren. Außerdem können Sie Code auf Ihren AMP- und Nicht-AMP-Seiten freigeben und ein JavaScript-Framework verwenden.

Einige Beispiele, die das AMP-Team für <amp-script> erstellt hat, sind:

• Todo MVC mit Vue
• Ein Passwort-Checker
• Datenvisualisierung in einem Artikel mit D3.js
• Mehrseitige Formulare, bei denen jeder Abschnitt validiert werden muss, bevor mit dem nächsten Abschnitt fortgefahren wird:

Um die Leistungsgarantie von AMP zu wahren, gibt es jedoch einige Einschränkungen:

• Inhaltsspringen – Um unerwartete Inhaltssprünge zu vermeiden, erfordert <amp-script> eine Benutzerinteraktion, um den Seiteninhalt zu ändern.
• Laden der Seite - Since <Amp-script> nicht Seiteninhalt Interaktion ohne Benutzer ändern, es ändert nicht Inhalt beim Laden der Seite nicht.
• Skriptgröße — Das in einem einzelnen <amp-script> verwendete Skript muss kleiner als 150 kB sein.
• API-Unterstützung – Nicht alle APIs werden in einem Web Worker unterstützt und einige DOM-Methoden und -Eigenschaften sind noch nicht implementiert

(Hinweis: <amp-script> ist mit Frameworks kompatibel, die Sie möglicherweise bereits verwenden, z. B. React, Preact, Angular, Vue.js, jQuery und D3.js.)

9. AMP-Toolbox

AMP Toolbox ist eine Sammlung von Befehlszeilentools und JS-APIs, um die Veröffentlichung von AMP-Seiten zu vereinfachen. Jedes Tool innerhalb der Toolbox kann heruntergeladen und einzeln verwendet werden:

AMP-CLI
Eine Befehlszeilenschnittstelle, die für die meisten Funktionen von AMP Toolbox verfügbar ist und global über NPM installiert werden kann.

AMP Linter
Der neue Toolbox-Linter überprüft Ihre AMP-Dokumente auf häufige Fehler und Best Practices.

AMP-Optimierer
Das serverseitige AMP-Optimierungstool verbessert die Rendering-Leistung von AMP-Seiten durch die Implementierung von Best Practices für die AMP-Leistung.

AMP-Cache-URLs
Es empfiehlt sich zu prüfen, ob eine AMP-Seite auf allen AMP-Caches funktioniert. Dazu können Sie die toolbox-cache-url-Komponente verwenden, da sie eine Ursprungs-URL in das AMP-Cache-URL-Format übersetzt.

AMP-Cache-Liste
Dies bietet eine Liste aller offiziellen AMP-Caches, die beim schnellen Aktualisieren oder Entfernen von AMP-Dokumenten aus einem AMP-Cache hilfreich sein kann.

AMP CORS
Viele AMP-Komponenten (wie amp-list oder amp-state) nutzen Remote-Endpunkte mithilfe von CORS-Anforderungen. AMP CORS ist eine Connect/Express-Middleware, die automatisch alle CORS-Header hinzufügt, die von Ihren AMP-Seiten benötigt werden.

AMP-Validierungsregeln
Dies ist einfach eine JavaScript-Bibliothek zum Abfragen von AMP-Validierungsregeln.

Holen Sie sich eine Instapage AMP-Post-Click-Landingpage-Demo

Da AMP in der mobilen Optimierung alltäglich geworden ist, sind konsistente Updates wie diese für Entwickler, Publisher und Werbetreibende von entscheidender Bedeutung und von Vorteil. Die neuesten Updates oben sind alle perfekt, um die Benutzererfahrung zu verbessern und Marken mehr Optionen zum Experimentieren und Testen zu bieten, um die Funktionen ihrer Website und das Engagement auf der Seite zu verbessern.

Holen Sie sich für AMP-Post-Ad-Click-Erlebnisse eine benutzerdefinierte Instapage AMP-Demo, um zu sehen, wie Sie schnell ladende Seiten in wenigen Minuten erstellen können, mit einem designfreundlichen Builder, integriertem Validator, erweiterten Analysen und mehr.