Zwei Sekunden sind alles, was Sie bekommen bevor Ihre Leser abspringen, wenn Ihre Webseite nicht geladen wird.

Scheint unrealistisch? Gut, gib ihm drei Sekunden, aber jetzt spielst du …Ungefähr 40 % der Benutzer werden das Unternehmen verlassen, und von da an geht es nur noch bergab.

Der Seitenabbruch ist für Verlage ein schrecklicher Vorfall: Es erhöht die Absprungrate, verringert die Werbeeinnahmen und wirft im Allgemeinen ihre ganze 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 werden viermal schneller geladen und verbrauchen achtmal weniger Daten als herkömmliche, für Mobilgeräte optimierte Seiten.“

Hey, warum versuchst du es nicht selbst? Öffnen Sie einfach Google auf Ihrem Mobilgerät und geben Sie alles ein, was gerade für Schlagzeilen sorgt. Geben wir als Beispiel „Cardi B“ ein, denn sie ist cool und sorgt immer für Schlagzeilen.

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

Sie werden den Unterschied sofort bemerken, wenn Sie einen AMP-Artikel öffnen– Es gibt keine Verzögerung, kein Warten auf das Laden einzelner Elemente, keine nervösen Bewegungen auf der Seite – der gesamte Inhalt der Seite wird in einer fließenden Bewegung bereitgestellt und scheint weit von den normalen Webseiten im mobilen Web entfernt zu sein.

Beitrag des Copybloggers auf AMP erklärt dies in 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.

Mit AMP blockieren Webseiten unnötige JS-Codes (nur asynchrones JS ist zulässig), um das Laden zu beschleunigen. Während benutzerdefiniertes JS erlaubt ist amp-Skript, und JS von Drittanbietern ist erlaubt iframes, es kann 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 Dinge, die erforderlich sind, wenn Benutzer auf diesem Teil der Seite erscheinen. Das heißt, es nutzt Lazy-Loading-Technologie um Ressourcen herunterzuladen und zu laden, die sich im Ansichtsfenster befinden oder bald im Ansichtsfenster angezeigt werden, während Benutzer 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:

Reduzierte Ladezeit: Der Name spricht für sich, AMP ist in erster Linie darauf ausgelegt, die Ladegeschwindigkeit mobiler Geräte zu reduzieren, und das Gleiche tut es zu Recht, indem es die Ladezeit auf nur 2-3 Sekunden senkt.

Niedrige Absprungraten: Langsame Seite ist der Hauptgrund dafür Benutzer zum Abprallen. Angesichts einer starken Verkürzung der Ladezeit sollten Publisher eine niedrige Absprungrate verzeichnen.

Bessere SEO: Es wurde bereits erwähnt, dass die Ladezeit für die meisten Suchmaschinen ein Ranking-Faktor ist und dass Sie mit der verringerten Seitenladegeschwindigkeit eine Verbesserung Ihrer Seitenränge feststellen sollten. Nicht zu vergessen ist, dass AMP-Seiten auch die Chancen erhöhen, im Google-Karussell und anderen SERP-Funktionen angezeigt zu werden.

Anstieg des Web-Traffics: Mit besserer SEO sollten Sie einen besseren Website-Traffic erwarten. Da AMP Ihre SEO verbessern kann und eine niedrige Ladegeschwindigkeit Ihnen helfen würde, die Absprungrate zu senken, wenn Ihr Inhalt auch außergewöhnlich ist, können Sie gute Sitzungszahlen von Benutzern erhalten, die auf der Website erscheinen.

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

Optimierter Datenverbrauch: Das Entfernen unnötiger JS- und CSS-Dateien bedeutet auch, dass Seiten weniger Browser- und Rechenressourcen verbrauchen. AMP reduziert beispielsweise die Bildgröße auf genau die richtige Größe, damit der Browser schnell laden kann. Dies bedeutet auch, dass der Browser eine reduzierte Dateigröße herunterlädt – eine deutliche Reduzierung der Datennutzung.

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).

Sie müssen mit Markup vertraut sein, um eine AMP-Seite einrichten zu können. Wir empfehlen Ihnen, sich etwas Zeit zu nehmen und durchzugehen offizielles AMP-Tutorial und zugehörige Anleitungen Einmal – wenn Sie noch nie zuvor mit HTML gearbeitet haben – engagieren Sie hier einen Entwickler ODER bitten Sie Ihren technisch versierten Freund oder Kollegen, Ihnen ein wenig dabei zu helfen, 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.

Wenn Sie auf WordPress veröffentlicht werden, haben Sie Glück. Sie können verwenden WordPress-Plugin für AMP das alle Ihre Beitragsseiten dynamisch in AMP-kompatible Versionen konvertiert. Dies ist immens hilfreich, da es Ihnen die ganze Laufarbeit erspart. Sie müssen das Plugin nur einmal aktivieren und alle Ihre Beiträge sind sofort AMP-konform.

Das ist eine große Frage für Verlage. Es würde Sie freuen, das zu erfahren AMP unterstützt tatsächlich Werbung; Zumindest für Google ist das sowieso der Sinn dieser Übung.

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, AMP Project zwei Updates veröffentlicht Damit können Herausgeber Benutzersteuerelemente erstellen und die Auswahlmöglichkeiten über eine neue AMP-Komponente namens 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.

Doch mit dem Aufstieg von Video-WerbungAMP hat die Lösung herausgebracht, um Videoanzeigen auf AMP-Seiten zu schalten.

AMP ermöglicht sowohl In-Stream als auch Outstream-Videoanzeigen. In-Stream-Videoanzeigen können mit gerendert werden Verlängerung. Es verfügt über alle grundlegenden Funktionen, einschließlich automatischer Wiedergabe, Andocken an eine Schriftrolle und Analyse.

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.

Hier erfahren Sie, wie Sie es können Machen Sie das Beste aus Ihrem AMP-Inventar:

AMP-Inventar versteigern über Header-Gebote

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

• 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 ist die vollständige Anleitung zum Hinzufügen von Analysen 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.