Sie haben nur zwei Sekunden Zeit, bevor Ihre Leser abspringen, wenn Ihre Webseite nicht lädt.

Erscheint unrealistisch? Gut, warten Sie drei Sekunden, aber jetzt spielen Sie mit dem Feuer – ungefähr 40 % der Nutzer werden abspringen , und von da an geht es nur noch bergab.

Seitenabbrüche sind für Publisher ein fataler Vorfall: Sie erhöhen die Absprungrate, verringern die Werbeeinnahmen und machen im Grunde all ihre harte Arbeit zunichte.

Der Ad-Tech-Riese Google hat beschlossen, diese Situation durch die Einführung von AMP zu beheben.

Aber was bedeutet es für Sie? Wie können Sie es auf Ihrer Website implementieren? Und was noch wichtiger ist: sollten Sie? Lesen Sie weiter, um es in unserem Leitfaden zu Google AMP herauszufinden.

AMP ist ein Open-Source-Projekt, das auf AMP HTML basiert, einem offenen Framework, das auf vorhandenen Webtechnologien basiert und es Websites ermöglicht, schlanke Webseiten zu erstellen.

Das Hauptziel des Projekts besteht darin, die Bereitstellung von Inhalten auf allen Mobilgeräten zu beschleunigen, indem alles Unwesentliche entfernt wird.

Nach Gesprächen mit Verlagen und Technologieunternehmen auf der ganzen Welt kündigen wir heute eine neue Open-Source-Initiative namens Accelerated Mobile Pages an, die darauf abzielt, die Leistung des mobilen Webs drastisch zu verbessern. Wir möchten, dass Webseiten mit umfangreichen Inhalten wie Videos, Animationen und Grafiken neben intelligenten Anzeigen funktionieren und sofort geladen werden. Wir möchten außerdem, dass derselbe Code auf mehreren Plattformen und Geräten funktioniert, sodass Inhalte sofort überall angezeigt werden können – unabhängig davon, welche Art von Telefon, Tablet oder Mobilgerät Sie verwenden.

Offizieller Google-Blog

Da der mobile Traffic mittlerweile den Desktop-Traffic übersteigt, können es sich Publisher, Werbetreibende und Entwickler nicht länger leisten, wegzuschauen, während Nutzer frustriert von einer Seite zur anderen springen – und was Google betrifft, ist Geschwindigkeit weitaus wichtiger als Funktionen.

Einige große Nachrichtenpublikationen wie Time, The Atlantic, Vox, BBC und The Huffington Post sowie mehrere Technologieunternehmen wie WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn und Pinterest sind AMP bereits beigetreten.

Das vielleicht größte Verkaufsargument von Google AMP ist, dass es Open Source ist und daher jeder Verlag sich anmelden und mit der Nutzung beginnen kann, im Gegensatz zu anderen strenger kontrollierten Projekten wie Instant Articles von Facebook und Apple News.

Ja.

Jon Parise von Pinterest sagt : „Accelerated Mobile Pages laden viermal schneller und verbrauchen achtmal weniger Daten als herkömmliche für Mobilgeräte optimierte Seiten.“

Hey, probier's doch einfach mal selbst aus! Öffne Google auf deinem Handy und gib irgendetwas ein, was gerade in den Nachrichten ist. Zum Beispiel „Cardi B“, weil sie einfach cool ist und ständig für Schlagzeilen sorgt.

Direkt über den Suchergebnissen sehen Sie einen Stapel horizontal scrollbarer Karten mit der Bezeichnung „AMP“. Durch Klicken auf eine Karte wird dieser Artikel geladen.

Den Unterschied werden Sie sofort bemerken, wenn Sie einen AMP-Artikel öffnen – es gibt keine Verzögerungen, kein Warten auf das Laden einzelner Elemente, keine ruckartigen Bewegungen auf der Seite – der gesamte Inhalt der Seite wird in einer flüssigen Bewegung übertragen und wirkt wie ein himmelweiter Unterschied zu den regulären Webseiten im mobilen Web.

Der Beitrag von Copyblogger zu AMP erklärt dies anhand von Zahlen:

Die AMP-Version erreichte „domContentLoaded – einen wichtigen Punkt beim Laden einer Webseite, an dem der HTML-Code vollständig heruntergeladen und bestimmte wichtige Parsingvorgänge abgeschlossen wurden“ in 0.857 Sekunden.

Ein Wimpernschlag dauert etwa 0.33 Sekunden.

Mit anderen Worten: Blinzeln Sie zweimal mit den Augen und Sie, unser U-Bahn-Pendler, können dank AMP fast sofort mit dem Lesen des nützlichen Teils des Inhalts beginnen.

Nun, das ist Geschwindigkeit.

Wann wurde das letzte Mal eine Seite auf Ihrem Handy geladen, bevor Sie überhaupt zweimal geblinzelt haben?

Während JavaScript der Zauberstab ist, mit dem die meisten Front-End-Entwickler irgendetwas mit ihren Webseiten machen müssen, kann es auch die Darstellung einer Seite verlangsamen.

AMP blockiert unnötigen JavaScript-Code (nur asynchrones JavaScript ist erlaubt), um die Ladezeit von Webseiten zu verkürzen. Zwar ist benutzerdefiniertes JavaScript in amp-script und JavaScript von Drittanbietern in iFrames zulässig , jedoch kann es das Rendern nicht blockieren.

Alle Ressourcen werden statisch dimensioniert

AMP nimmt die Größe aller Ressourcen – wie Bilder, Anzeigen und Iframes –, um sie vor dem Herunterladen zu positionieren. Es beginnt mit dem Laden des Layouts, ohne auf den Download der Ressourcen warten zu müssen.

Lässt nicht zu, dass Erweiterungen den Download verlangsamen

AMP unterstützt Erweiterungen wie Lightboxen, Einbettungen, Tweets usw. Diese erfordern zusätzliche HTTP-Anfragen, blockieren jedoch nicht das Laden der Seite. Seiten, die benutzerdefinierte Skripte verwenden, müssen dem AMP-System mitteilen, dass es ein amp-iframe-Tag geben wird, Beispiel:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

CSS muss inline und größengebunden sein

CSS blockiert jegliches Rendern und neigt dazu, aufgebläht zu werden. Auf AMP-HTML-Seiten sind nur Inline-Stile zulässig. Dadurch werden im Vergleich zu den meisten Webseiten viele HTTP-Anfragen aus dem kritischen Rendering-Pfad entfernt.

Außerdem hat das Inline-Stylesheet eine maximale Größe von 50 Kilobyte. Obwohl diese Größe für sehr anspruchsvolle Seiten groß genug ist, erfordert sie vom Seitenautor dennoch eine gute CSS-Hygiene.

Priorisieren Sie das Laden von Bildern entsprechend

AMP konzentriert sich auf Elemente, die benötigt werden, sobald sich Nutzer auf dem jeweiligen Seitenbereich befinden. Das bedeutet, dass es Lazy Loading nutzt , um Ressourcen herunterzuladen und zu laden, die sich im sichtbaren Bereich befinden oder in Kürze sichtbar werden, während die Nutzer durch die Seite scrollen.

Die Google-Suche ist die größte Suchmaschine und AMP wurde von Google entwickelt. Die Kombination dieser beiden Funktionen wird also definitiv beim Suchranking helfen, oder?

FALSCH!

AMP ist für keine Suchmaschine – einschließlich Google – ein Rankingfaktor für das Ranking einer Seite. Aus diesem Grund werden auf Mobilgeräten möglicherweise viele Nicht-AMP-Seiten über AMP-Seiten angezeigt.

Während AMP selbst kein Rankingfaktor ist, ist Geschwindigkeit ein Rankingfaktor für die Google-Suche. Die Google-Suche wendet auf alle Seiten denselben Standard an, unabhängig von der Technologie, mit der die Seite erstellt wurde.

Darüber hinaus kann Ihre Webseite durch die Aktivierung von AMP in der mobilen Suche als Teil von Rich-Suchergebnissen und Karussells angezeigt werden. Dies können sein:

Verkürzte Ladezeit: Der Name ist Programm, AMP wurde in erster Linie entwickelt, um die Ladezeit für mobile Geräte zu verkürzen, und genau das tut es auch, indem es die Ladezeit auf bis zu 2-3 Sekunden reduziert.

Niedrige Absprungraten: Langsame Seiten sind der Hauptgrund für Nutzerabbrüche . Durch eine deutliche Reduzierung der Ladezeit sollten Publisher eine niedrige Absprungrate erzielen.

Bessere Suchmaschinenoptimierung: Wie bereits erwähnt, ist die Ladezeit ein Rankingfaktor für die meisten Suchmaschinen. Durch die verkürzte Ladezeit Ihrer Seiten sollten Sie eine Verbesserung Ihres Seitenrankings feststellen. Nicht zu vergessen ist auch, dass AMP-Seiten die Chancen erhöhen, im Google-Karussell und anderen Suchergebnisseiten (SERP) angezeigt zu werden.

Steigerung des Web-Traffics: Mit einer verbesserten Suchmaschinenoptimierung (SEO) können Sie mit mehr Website-Besuchern rechnen. Da AMP Ihre SEO verbessern kann und eine geringe Ladezeit die Absprungrate senkt, können Sie – vorausgesetzt, Ihre Inhalte sind herausragend – gute Sitzungszahlen von den Nutzern erzielen, die Ihre Website besuchen.

Unterstützt von allen Browsern: Da AMP sämtliches unnötiges JS und CSS entfernt, erhalten die Browser einen sauberen HTML-Code, den sie interpretieren und auf dem Bildschirm anzeigen können.

Optimierter Datenverbrauch: Durch das Entfernen unnötiger JavaScript- und CSS-Dateien benötigen Seiten weniger Browser- und Rechenressourcen. AMP reduziert beispielsweise die Bildgröße auf ein optimales Maß für schnelles Laden im Browser. Dadurch lädt der Browser eine kleinere Datei herunter – was den Datenverbrauch deutlich senkt.

Ich bin mir sicher, dass das bisher alles zu schön klingt, um wahr zu sein – was ist also der Kompromiss? Was ist das für ein zusätzlicher Kram, der „weggenommen“ wird, damit die Seite schneller lädt?

Nun, hier ist, was AMP weglässt: Social-Media-Plugins, Pop-ups, Bildkarussells, Videos, Analysesoftware, Tracking-Skripte und viele andere Dinge, die beim Laden einer Seite im Hintergrund angefordert werden.

Es unterstützt auch kein Javascript von Drittanbietern. Das ist das Geheimnis seiner Geschwindigkeit. Wenn Sie es also für Ihre Inhalte implementieren, verlieren Sie natürlich die Funktionalität, die mit den oben genannten Dingen verbunden ist.

Einige sagen, dass AMP nur für größere Verlage gut funktioniert, die bereits über ein bereitwilliges Publikum verfügen. Kleinere Verlage können grundlegende Dinge wie das Sammeln von E-Mails nicht erledigen, da Formulare möglicherweise nicht von AMP unterstützt werden. Bedenken wie diese könnten sich für einige Verlage durchaus als Deal-Breaker erweisen.

Diese Bedenken können jedoch bis zu einem gewissen Grad ausgeräumt werden, wenn Sie mit einem Entwickler zusammenarbeiten, der sich mit AMP auskennt. Für die AMP-Monetarisierung empfehlen wir Ihnen, an einen Partner zu denken, der auf die Technologie spezialisiert ist (wie AdPushup).

Um eine AMP-Seite einzurichten, benötigen Sie Kenntnisse in der Auszeichnungssprache. Wir empfehlen Ihnen, sich einmal die Zeit zu nehmen und das offizielle AMP-Tutorial sowie die zugehörigen Anleitungen durchzuarbeiten . Falls Sie noch nie mit HTML gearbeitet haben, sollten Sie einen Entwickler beauftragen oder einen technisch versierten Freund oder Kollegen um Unterstützung bitten, um die Funktionsweise zu verstehen.

Mit ein wenig Aufwand können Sie Folgendes erreichen:

1. Erstellen Sie eine AMP-Seite mit dem Boilerplate-Code.
2. Inszenieren Sie es.
3. Stellen Sie die AMP-Konformität sicher, indem Sie den Validator von Google verwenden.
4. Veröffentlichen und verteilen.

Falls Sie Ihre Inhalte auf WordPress veröffentlichen, haben Sie Glück. Mit dem WordPress-Plugin für AMP können Sie Ihre Beitragsseiten dynamisch in AMP-kompatible Versionen umwandeln. Das ist enorm hilfreich, da es Ihnen viel Arbeit erspart. Sie müssen das Plugin lediglich einmal aktivieren, und schon sind alle Ihre Beiträge AMP-konform.

Das ist eine wichtige Frage für Verlage. Sie werden erfreut sein zu hören, dass AMP tatsächlich Werbung unterstützt ; zumindest für Google ist das ja im Grunde der Kern der ganzen Sache.

Anzeigen helfen dabei, kostenlose Dienste und Inhalte im Internet zu finanzieren. Mit Accelerated Mobile Pages möchten wir ein umfassendes Spektrum an Anzeigenformaten, Werbenetzwerken und Technologien unterstützen. Alle Websites, die AMP HTML verwenden, behalten ihre Auswahl an Werbenetzwerken sowie alle Formate, die das Benutzererlebnis nicht beeinträchtigen. Ein Kernziel des Projekts ist auch die Unterstützung von Abonnements und Paywalls. Wir arbeiten mit Publishern und Branchenvertretern zusammen, um die Parameter eines Werbeerlebnisses zu definieren, das dennoch die Geschwindigkeit bietet, die wir mit AMP anstreben.

Offizieller Google-Blog

Tatsächlich unterstützt AdSense nicht nur AMP, sondern auch die folgenden Werbenetzwerke: Criteo, OpenX, Smart Ad Server, TripleLift, Teads und mehr.

Publisher sollten eine Verbesserung der Anzeigenleistung und damit der Werbeeinnahmen feststellen, da etwa 40 % der Nutzer, die zuvor die Seite verlassen haben, jetzt bleiben, um die Anzeigen zu sehen.

So hat sich AMP entwickelt, um Web-Publishern beim Erreichen ihrer Werbeumsatzziele zu helfen:

AMPHTML-Anzeigen für alle Seiten

AMPHTML-Anzeigen sind schneller, einfacher und sicherer als Standardanzeigen. Sie werden mit AMP-HTML erstellt und nutzen viele der intelligenten Komponenten, die AMP-Seiten schnell machen.

AMPHTML-Anzeigen sind so konzipiert, dass sie sowohl auf AMP- als auch auf Nicht-AMP-Webseiten auf jedem Gerät funktionieren und in einer Vielzahl von Standard- und Kreativformaten (z. B. Karussell, Parallaxe, Lightbox) angezeigt werden.

Integriertes Einwilligungselement

Im April und Anfang Mai 2018 veröffentlichte das AMP-Projekt zwei Updates , die es Publishern ermöglichen, Benutzerkontrollen zu erstellen und die Auswahlmöglichkeiten über eine neue AMP-Komponente namens <amp-consent> zu verwalten.

Dadurch können Herausgeber die Zustimmungsentscheidung des Benutzers erfassen und die Einstellung des Benutzers Elementen auf der AMP-Seite zur Verfügung stellen, um das Verhalten der Seite zu ändern.

Darüber hinaus können Elemente von Anbietern weiter angepasst werden, um anspruchsvollere Verhaltensweisen zu erzielen, die von den Einstellungen des Benutzers abhängen.

DFP/AdX- und AdSense-Unterstützung Publisher können sich dafür entscheiden, den Nutzern nicht personalisierte Anzeigen zu schalten, oder sie können sich dafür entscheiden, Anzeigen selektiv auf der Grundlage der Einwilligung zu schalten.

Videoanzeigen auf AMP-Seiten

Es ist bekannt, dass das Laden von Videos im Browser aufgrund der großen Dateigröße einige Zeit in Anspruch nimmt. Der Einsatz von Videoanzeigen mit AMP schien zunächst unmöglich.

Mit dem Aufkommen von Videowerbung entwickelte AMP jedoch die Lösung, Videoanzeigen auf AMP-Seiten zu schalten.

AMP ermöglicht sowohl In-Stream- als auch Out-Stream-Videoanzeigen . In-Stream-Videoanzeigen können mit der <amp-ima-video>-Erweiterung gerendert werden. Diese bietet alle grundlegenden Funktionen wie Autoplay, Andocken beim Scrollen und Analysefunktionen.

AMP ist schnell. Es ist das Beste, was den mobilen Websites des Herausgebers passieren konnte. Wenn Sie jedoch mit Ihrem AMP-Inventar genauso umgehen wie mit dem Rest Ihres Inventars, sind die Ergebnisse möglicherweise nicht gerade überzeugend. 

Aufgrund des hohen Sichtbarkeitswerts von AMP-Seiten können die eCPMs steigen. Diese Vorteile werden jedoch durch die technologischen Mängel der Verlage verwässert.

Wenn Sie AMP hingegen wie ein Premium-Inventar behandeln, müssen Sie verstehen, dass es nur für mobile Geräte funktioniert. Das heißt, Sie müssen Werbetreibende finden, die speziell nach mobilem AMP-Inventar suchen.

So holen Sie das Beste aus Ihrem AMP-Inventar heraus :

AMP-Inventar versteigern über Header-Gebote

Ja, Sie haben richtig gelesen – AMP-Inventar kann über Header Bidding verkauft werden . Tatsächlich gibt es dafür zwei Möglichkeiten:

• Echtzeitkonfiguration (RTC): RTC ist eine native AMP-Funktion, die Fehlerwahrscheinlichkeit ist geringer und daher ist nur wenig oder gar kein Debugging erforderlich. Es hat auch ein paar Nachteile. Der Herausgeber darf nicht mehr als 5 Nachfragepartner haben, und obwohl das Zeitlimit auf weniger als 1 Sekunde konfiguriert werden kann, darf es nicht überschritten werden. Außerdem fehlen die Anpassungsmöglichkeiten, die herkömmliches Header-Bidding bietet.
• Wrapper-basiertes Header-Bidding: Mithilfe der serverseitigen Header-Bidding-Einrichtung können Sie auch AMP-Inventar verkaufen. Wrapper-basierte Header-Gebote umgehen die Beschränkung auf 5 Nachfragepartner, indem Gebote über einen einzigen RTC-Slot weitergeleitet werden. Das bedeutet, dass Sie beliebig viele Nachfragepartner hinzufügen können. Wrapper stellen Publishern auch Berichts- und Analysedaten zur Verfügung, wofür RTC derzeit keine Unterstützung bietet.

Aktivieren Sie Ihre Google Ad Manager-Werbebuchung mit AMP-Anzeigen

Google Ad Manager-Publisher können einfach die AMPHTML-Anzeigenfunktion aktivieren, um ihre Anzeigen AMP-freundlich zu gestalten. Sie können Ihre vorhandenen Anzeigen-Tags aktualisieren oder neue erstellen, um Käufern (Netzwerken) zu signalisieren, dass es sich um AMP-Inventar handelt.

Beziehen Sie einen Drittanbieter für die AMP-Nachfrage ein

Wenn Sie verschiedene Kanäle zum Verkauf von AMP-Inventar hinzufügen, benötigen Sie für jeden Kanal eine höhere Nachfrage. Wenn Sie einen Drittpartner mit der Verwaltung von Nachfragepartnerschaften beauftragen, können Sie sich auf andere wichtige Aspekte Ihres Verlagsgeschäfts konzentrieren.

AMP enthält eine Element, das die Messung von Benutzerinteraktionen ermöglicht und über integrierte Unterstützung für Google Analytics verfügt.

Um es mit Google Analytics zu verwenden, können Sie diesen Code kopieren und ersetzen mit der Property-ID, die Sie verwenden möchten:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

AMP bittet Sie, offenzulegen, wie Sie Daten sammeln, um die Funktion zu nutzen. Dies sind die Datenpunkte, die Sie sammeln können:

• Seitendaten: Domain, Pfad, Seitentitel
• Benutzerdaten: Client-ID, Zeitzone
• Browserdaten: Referrer, eindeutige Seitenaufruf-ID
• Browserdaten: Bildschirmhöhe, Bildschirmbreite, Benutzeragent
• Interaktionsdaten: Seitenhöhe und Seitenbreite

Hier finden Sie die vollständige Anleitung zum Hinzufügen von Analysetools zu AMP-Seiten.

AMP ist leistungsstark – macht Ihre Website wirklich mobilfreundlich.

Mit neuen Weiterentwicklungen – wie AMP-Anzeigen, Echtzeitkonfiguration und Funktionen zur Einholung der Benutzereinwilligung – stellen Sie sicher, dass es eine Zukunft im digitalen Verlagsgeschäft hat. Ebenso beschleunigt sich die Akzeptanz – insbesondere in der Nachrichten-Community.

Verwenden Sie AMP für Ihre Website? Wie sieht es mit Ihren Werbeeinnahmen aus? Nicht so gut? Lassen Sie uns helfen – buchen Sie eine 30-minütige kostenlose Beratung.