Googles AMP: Der unterhaltsame und benutzerfreundliche Leitfaden für beschleunigte mobile Seiten

Schau das Video. Ignorieren Sie die Kopie.

Dies ist mein Rat an Sie, sobald Sie auf der Google-Website gelandet sind, die dem neuen AMP-Projekt (Accelerated Mobile Pages) gewidmet ist:

"Das AMP-Projekt (Accelerated Mobile Pages) ist eine Open-Source-Initiative, die die Vision verkörpert, dass Publisher mobile optimierte Inhalte einmal erstellen und sofort überall laden können."

Wenn Sie kein Entwickler sind und die Kopie lesen, werden Sie von Fachjargon lebendig verschluckt.

Sehen Sie sich das Video jedoch an und Sie werden fast sofort verstehen, worum es bei AMP geht (ganz zu schweigen von einer lustigen Referenz zu Spinal Tap , siehe unten).

Oder Sie können diesen Leitfaden einfach lesen, weil er Ihnen am meisten Spaß macht, über AMP zu lesen und wie er sich auf Ihr Content-Marketing auswirkt.

Das verspreche ich.

Was ist das AMP-Projekt von Google?

Seit der Geburt von Googles Zero Moment of Truth-Philosophie im Jahr 2011 ist es kein Geheimnis, dass sie "die Leistung des mobilen Webs dramatisch verbessern" wollen.

Und ich muss Ihnen wahrscheinlich nicht sagen, dass es ein kleines Problem mit der Leistung von Inhalten im mobilen Web gibt.

Möglicherweise haben Sie ein mobiles Gerät. Und es besteht die Möglichkeit, dass Sie auf einer Suchergebnisseite, einer Social-Media-Site oder in Ihrem E-Mail-Posteingang auf einen Link auf diesem Gerät geklickt haben.

Aber es kommt nie.

Nun, es kommt, aber in einem krampfhaften Flickenteppich aus torkelnden, ruckartigen Bildern, Videos und Anzeigen, während die Seite geladen wird. Du siehst entsetzt zu, die Augen geweitet, und springst in deinem U-Bahn-Sitz herum wie jemand, der auf die Toilette gehen muss.

"Wie lange wird das dauern?" Sie schreien vor niemandem.

Wer weiß, aber Sie werden es nie herausfinden, denn wie 40 Prozent der Bevölkerung werden Sie innerhalb von 3 Sekunden auf der Ladeseite landen. Dann wirst du wie meine schwarze Katze Apollo Monkeystrap sagen: "Le seufz."

Es sind unerträgliche mobile Momente wie diese, die Google mit AMP beseitigen möchte.

Wie schnell erstellt AMP Ihre Seiten?

Auf einer Skala von 1 bis 10, wobei eine "überhaupt nicht geladen" und zehn "in einer Sekunde geladen" ist, wird AMP-Inhalt mit einer Seitengeschwindigkeit von 11 geladen. (Das ist die Spinal Tap- Referenz, vor der ich Sie gewarnt habe).

Aber im Ernst, wie schnell?

Jon Parise, Softwareentwickler bei Pinterest, sagte: "Accelerated Mobile Pages werden viermal schneller geladen und verbrauchen achtmal weniger Daten als herkömmliche für Mobilgeräte optimierte Seiten."

Viermal schneller ist gut! Aber was bedeutet das für Sie, unseren freundlichen U-Bahn-Pendler, der versucht, eine Webseite auf sein Handy herunterzuladen?

Laut NiemanLab wurde ein AMP-optimierter Artikel der New York Times in 2,99 Sekunden vollständig auf das Handy heruntergeladen. Zum Vergleich: Bei einem Test in Chrome auf einem schnellen iMac dauerte die Desktop-Version dieser Seite 3,82 Sekunden (die mobile Version war schneller).

Wenn Sie sich nicht bewusst waren, war NYTimes.com dafür berüchtigt, eine der am langsamsten ladenden Websites für mobile Nachrichten auf dieser Seite von Saturn zu sein.

Das haben sie inzwischen behoben.

Bist du sicher, dass das schnell genug ist?

Aber warten Sie, Sie sagen, 2,99 Sekunden sind immer noch am oberen Ende des Zeitrahmens, den unser U-Bahn-Pendler bereit ist zu warten. Er, wie 40 Prozent der Bevölkerung, wurde nach 3 Sekunden auf Kaution entlassen. 2,99 Sekunden schneidet es knapp! Das ist keine große Verbesserung.

Stimmt, aber der Unterschied besteht darin, dass im ersten Nicht-AMP-Szenario auf einem Desktop die Seite nach 3 Sekunden noch geladen wurde . In der AMP-Version des Szenarios wurde es in 2.99 vollständig heruntergeladen .

Noch wichtiger ist, dass die AMP-Version in 0,857 Sekunden „domContentLoaded - ein wichtiger Punkt beim Laden einer Webseite, an dem der HTML-Code vollständig heruntergeladen und bestimmte wichtige Analysen abgeschlossen wurden“ erreicht hat.

Ein Wimpernschlag dauert etwa 0,33 Sekunden.

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

Was lässt herkömmliche mobile Seiten so langsam laden?

Ich glaube, ich weiß es, aber da ich kein Entwickler, Designer oder Programmierer bin (und nicht einmal sicher bin, ob es sich um unterschiedliche Disziplinen handelt), habe ich einen unserer Entwickler hier bei Rainmaker Digital, Mike Hale, angerufen, um mir beim Übersetzen zu helfen.

Mike sagte, wenn eine Desktop-Site in einen mobilen Browser gezogen wird, werden mehrere Dutzend Informationspakete häufig von verschiedenen Hosts in den mobilen Browser "aufgerufen".

In dem alten, langsamen Beispiel der New York Times oben könnte ein Artikel "192 Anfragen enthalten, einige an die Hosts der Times, die meisten an eine Reihe anderer Server, auf denen zahlreiche Skripte gehostet werden".

Der nützlichste Teil wird in 5 Sekunden nach dem Klicken heruntergeladen, der Rest wird jedoch noch angezeigt, weshalb der Bildschirm beim Einstellen des Browsers springt und dann zurückgesetzt wird.

Immer noch verloren, drückte ich Mike: „Aber was für Dinge werden angefordert?! Wie heißt das ?! "

Mike sagte mir, dass Ihr Handy möglicherweise die Skripte für soziale Plugins, Bildkarussells, SlideShares und Videos aufruft. Und dann laufen wahrscheinlich Analysesoftware, Anzeigen und Tracking-Skripte im Hintergrund.

Vernünftige, alltägliche Dinge, aber sie summieren sich. Und schnell.

Das Problem ist, dass Ihr mobiles Gerät einfach nicht über die Verarbeitungsmuskulatur verfügt, um dies böse schnell zu lösen.

Diese Abbildung erklärt das Problem mit mobilen Inhalten

Stellen Sie sich vor, Sie gingen zur Bank, gingen zum Kassierer und verlangten 100 Dollar, aber in einer besonderen Reihenfolge: fünfzehn Ein-Dollar-Scheine, drei Fünf-Dollar-Scheine, fünf Zehn-Dollar-Scheine und einen Zwanzig-Dollar-Schein.

Wenn die Bank jetzt wie das mobile Internet funktioniert, unternimmt der Kassierer mehrere Fahrten, um Ihnen jede Rechnung einzeln zu geben.

Jede dieser Reisen ist ein "Anruf".

Wenn die Bank jedoch mit AMP optimiert wäre, würde der Kassierer Ihnen alle Ihre Rechnungen auf einmal geben. Darüber hinaus würde er wahrscheinlich Ihre spezielle Anfrage für bestimmte Rechnungen ignorieren und nur eine Hundert-Dollar-Rechnung liefern.

AMP zielt darauf ab, die Anforderungen eines Browsers zu vereinfachen.

"Das einzige Skript, das Sie aufrufen können, ist das AMP-Javascript", sagte Mike. „Alles ist in einem Bündel verpackt. Ich gebe dir alles auf einmal. “

Und so hat Yoast AMP Mobile Content beschrieben:

„Vergleichen wir das mit einem Rennwagen. Wenn Sie ein Rennauto schneller machen möchten, geben Sie ihm einen schnelleren Motor und nehmen das gesamte Gewicht ab. Bei dieser Gewichtsreduzierung entfernen Sie auch Dinge wie Rücksitze, Klimaanlage usw. AMP ist dem nicht unähnlich. Es ist die abgespeckte Version eines normalen Webs, da Google mehr auf Geschwindigkeit als auf raffinierte Funktionen achtet. “

Fühlen Sie diesen Stich der Bitterkeit in der letzten Zeile? Es ist nicht deine Einbildung. Wir werden gleich darauf zurückkommen. Schauen wir uns zunächst eine AMP-Erfahrung an, um zu verstehen, was ich meine.

Wie sehen AMP-optimierte mobile Inhalte aus?

Glücklicherweise können Sie eine Demo von AMP-Nachrichteninhalten testen.

1. Peitsche dein Smartphone aus.
2. Öffnen Sie einen Browser (einen beliebigen Browser).
3. Geben Sie g.co/ampdemo ein.
4. Geben Sie beliebte Keyword-Phrasen wie "Justin Bieber Birthday", "Jennifer Lawrence" oder "Yoko Ono" in das Google-Suchfeld ein.
5. Klicken Sie auf "Senden".

Dies ist ein Beispiel dafür, wie die Ergebnisse aussehen werden:

Wie Sie sehen können, werden AMP-Inhalte bestens abgerechnet. Es ist im Karussell, das über der Falte sitzt. Die Standardeinträge befinden sich darunter.

Sie können durch dieses Karussell scrollen und wenn Sie einen AMP-Artikel finden, den Sie mögen, klicken Sie darauf. So wird es aussehen:

Viel Spaß beim Lesen, wie!

Warum macht Google das und sollte es Sie interessieren? (Art von)

Hier wird es merkwürdig.

Wie oben erwähnt, war Google in den letzten fünf Jahren von der Optimierung der mobilen Webleistung besessen. Aus diesem Grund haben wir über die Bedeutung einer extrem schnellen Website-Geschwindigkeit geschrieben (in diesem Artikel gibt es sechs Tools zum Testen der Geschwindigkeit Ihrer Website). übrigens) genauso lange.

Aus diesem Grund haben wir Sie letztes Jahr vor dem Google Mobile Update "Mobilegeddon" gewarnt.

An diesem Punkt ist AMP eine Art Höhepunkt des Fokus von Google auf die Optimierung des mobilen Webs. Aber wie hilft es Publishern?

Es klingt simpel, aber Google denkt: Nutzer lieben Inhalte. Sie lieben schnelle Inhalte. Je schneller Sie schnelle Inhalte verteilen können, desto mehr Inhalte können konsumiert werden.

Dieser Schritt hat jedoch noch etwas anderes zu bieten: Google versucht, den Krieg um den Nachrichtenkonsum zu gewinnen.

Wie unterscheidet sich AMP von Sofortartikeln und Apple News?

Im vergangenen Jahr haben sowohl Apple als auch Facebook Anwendungen gestartet, mit denen Benutzer Nachrichtenartikel konsumieren können: Apple News und Instant Articles.

Beide Anwendungen sind eigenständige Produkte.

Christian Cantrell, Senior Experience Development Engineer im XD-Team von Adobe, schrieb im Smashing Magazine: „Es handelt sich im Wesentlichen um ausgefallene Nachrichtenaggregatoren mit benutzerdefinierten Renderern, die auf proprietären Syndication-Formaten basieren.“

Mit anderen Worten, Sofortartikel und Apple News werden als RSS wiedergeboren.

Auf der anderen Seite versucht Google, direkt zu den Publishern zu gelangen und sie dazu zu bringen, mobile Inhalte für den Verbrauch im offenen Web zu optimieren. Dies ermöglicht eine mühelose Eingabe und einfache Verteilung, was in einer App nicht möglich ist.

Bisher haben einige namhafte Nachrichtenverlage teilgenommen:

• Time Inc.
• Der Atlantik
• Vox
• BBC
• Die Huffington Post

Eine Reihe von Technologieunternehmen wie WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn und Pinterest haben sich ebenfalls angeschlossen.

Zwei häufige Beschwerden über AMP

Die Beschwerden kommen in mindestens zwei Varianten:

1. Kritiker hassen die Einschränkungen, die mobile Inhalte bieten können.
2. Kritiker beklagen, dass der kleine Verlag bestraft wird.

Yoast fällt in die erste Kategorie. Joost de Valk schrieb: „AMP schränkt die Möglichkeiten von HTML-Seiten ein. Ausgefallene Designs werden zugunsten der Geschwindigkeit entfernt. AMP ist in hohem Maße eine Funktion gegenüber dem Formularprojekt. “

Beachten Sie, dass nicht nur das Aussehen betroffen ist. AMP unterstützt standardmäßig keine Formulare. Das bedeutet, dass AMP-Seiten Ihnen nicht dabei helfen, Ihre E-Mail-Liste zu erweitern. Es gibt technische Problemumgehungen, aber die Situation ist noch zu neu, um zu sehen, wie sich diese entwickeln werden.

Sie werden feststellen, dass hauptsächlich große Verlage AMP verwenden. Bedeutet dies jedoch, dass AMP kleinere Verlage verletzen will?

Paul Shapiro von Search Engine Land hatte folgendes zu sagen:

„Obwohl erfahrene Entwickler durch intensive Leistungsoptimierungen häufig ähnliche Ergebnisse erzielen können, vernachlässigen Publisher dies häufig aufgrund von Ressourcenbeschränkungen. Mit AMP können diese Optimierungen problemlos erreicht werden, ohne das primäre mobile Web-Erlebnis zu verändern. “

AMP kann sich als solides Werkzeug zur Optimierung des mobilen Erlebnisses erweisen. Also solltest du AMP?

Wer sollte sich um AMP sorgen?

Es hängt davon ab, ob.

• Sind Sie ein riesiger Herausgeber von Nachrichten? Dann Panik, es sei denn, Sie haben bereits eine solide Strategie für die mobile Benutzererfahrung. Was Sie schon vor Monaten hätten tun sollen, aber hey.
• Erhalten Sie eine signifikante Verkehrsquelle vom Handy? Auch hier müssen Sie sicherstellen, dass Ihre Strategie für das mobile Erlebnis absolut solide ist. Sie möchten wahrscheinlich sehen und sehen, wie sich AMP entwickelt, aber es könnte einige Experimente wert sein.
• Sind Sie in einem neuen Markt ohne viel Wettbewerb? Machen Sie es sich zum Ziel, Ihre mobilen Inhalte in den nächsten 30 Tagen zu optimieren, aber keine Panik.
• Passen Sie nicht in eine der oben genannten Kategorien? Dann setzen Sie sich auf Ihre Hände und überwachen Sie, was passiert.

"Auf jeden Fall etwas, das man auf dem Radar eines Verlags behalten sollte", sagte mir unser Chief Product Officer und StudioPress-Gründer Brian Gardner. "Aber ich vermute, dass es für einige Zeit ein flüssiger Deal sein wird."

Wer weiß? Es könnte einen einfacheren Weg geben, dies alles später zu tun - etwas, das Jake Goldman, Präsident und Gründer von 10up, einer Beratungsagentur für WordPress-Content-Management, ebenfalls vorschlug:

„Mit der Zeit vermuten wir, dass AMP irgendwann so komplex wie 'uneingeschränktes' HTML wird oder durch Fortschritte bei mobiler Hardware, Breitbandgeschwindigkeiten und standardisierten Datenschutzfunktionen in Frage gestellt wird - eine Lösung für ein Problem, das wir nicht mehr haben.

Angenommen, Sie möchten mit AMP herumspielen.

So erstellen Sie Ihre erste AMP-Seite

Hier können Sie Ihre großen Entwicklerhosen für Jungen und Mädchen hochziehen, da für den Einstieg in AMP einige grundlegende Markups erforderlich sind.

Ich empfehle Ihnen, sich durch dieses grundlegende Tutorial zu arbeiten. Es wird Ihnen beibringen, wie man:

• Erstellen Sie Ihre erste AMP-Seite mit Boilerplate-Code.
• Bühne es.
• Überprüfen Sie mithilfe des Google-Validators, ob es AMP-kompatibel ist ( dies ist ein sehr wichtiger Schritt ).
• Bereiten Sie die Veröffentlichung und Verteilung vor.

In Ihrem Markup sehen Sie, dass einige Elemente ein AMP-Tag haben. Somit wird das <img> -Tag zu <amp-img>. Das <anim> -Tag wird zu <amp-anim>. Das <video> -Tag wird zu <amp-video>.

Und so weiter.

Was sollen WordPress-Benutzer tun?

Wenn Sie AMP ausprobieren möchten, haben Sie Glück.

Am 24. Februar 2016 veröffentlichte Automattic ein offizielles AMP-Plugin. Daher sind WordPress-Benutzer nur ein herunterladbares Plugin von AMP-optimierten Inhalten entfernt.

Beachten Sie jedoch Folgendes: Laut der offiziellen AMP-Plugin-Seite unterstützt das Plugin keine Seiten oder Archive. Nur Beiträge.

Aber sobald Sie das Plugin - bam - aktivieren, werden alle Ihre Beiträge automatisch AMPlified!

Wenn das Plugin aktiv ist, haben alle Beiträge auf Ihrer Site dynamisch AMP-kompatible Versionen generiert.

Sie können die AMP-Version Ihrer Webposts anzeigen, indem Sie am Ende der URL "/ amp" einfügen. Beispielsweise wird die AMP-Version von yourwebsite.com/amp-wicked-fast zu yourwebsite.com/amp-wicked-fast/amp.

Und wenn Sie Kunde bei Rainmaker Platform sind: Wir haben AMP auf unseren Radarschirmen. Angesichts der Geschichte von Google mit dramatischen 180-Grad-Turnarounds werden wir uns auf nichts stürzen. Sollte sich AMP jedoch in Zukunft als wichtig erweisen, bieten wir unseren Benutzern eine einfache AMP-Lösung an.

Ist AMP ein Suchrankingfaktor?

Nein.

John Mueller von Google gab an, dass AMP kein Ranking-Faktor ist. Er sagte: "Das Konvertieren von Seiten in das AMP-Format wird das mobilfreundliche Ranking-Signal erfüllen, aber es gibt kein Ranking-Signal, das ausschließlich mit AMP verbunden ist."

Der Mitarbeiter des Search Engine Journal, Matt Southern, weist darauf hin:

„Meine Frage ist, was macht es aus, ob AMP ein Ranking-Signal ist oder nicht, wenn AMP-Inhalte bereits ein One-Way-Ticket oben auf der ersten Seite haben? Zum größten Teil rangieren AMP-Inhalte bereits über den organischen Ergebnissen, was einer der größten Ranking-Boosts ist, die man sich wünschen kann. “

Es ist also ein Vorteil, im Spiel mit mobilen Inhalten vor Ihren Konkurrenten zu sein - eine Karotte am Stiel, die die destillierten Leute in diesem Whiteboard-Freitag-Video in Ihrem Gesicht winken.

Ein weiterer Grund, warum ich Ihnen empfehle, sich das Whiteboard Friday-Video anzuschauen, ist, dass die Mitarbeiter von Distilled eine weitere wichtige Unterscheidung getroffen haben, die AMP bietet: die superschnelle Lieferung über einen Caching-Server.

Tom Anthony, Leiter Forschung und Entwicklung bei Distilled, sagt:

"Und dann ist all dies so konzipiert, dass es wirklich stark zwischengespeichert wird, damit Google diese Seiten hosten und Ihre eigentlichen Inhalte genau dort hosten kann, sodass sie nicht einmal mehr von Ihnen abgerufen werden müssen."

Nur zum Grinsen sagte der Google-Blog Folgendes zu ihrem neuen Ansatz beim Caching:

„Als Teil dieser Bemühungen haben wir einen neuen Ansatz für das Caching entwickelt, der es dem Publisher ermöglicht, seine Inhalte weiterhin zu hosten und gleichzeitig eine effiziente Verteilung über den leistungsstarken globalen Cache von Google zu ermöglichen. Wir beabsichtigen, unsere Cache-Server für jedermann kostenlos zu öffnen. “

Ich mag frei.

Wird AMP Ihre Werbung beeinflussen?

Es sollte nicht.

Laut Google möchten wir eine umfassende Palette von Anzeigenformaten, Werbenetzwerken und Technologien unterstützen. Alle Websites, die AMP HTML verwenden, behalten ihre Auswahl an Werbenetzwerken sowie alle Formate bei, die die Nutzererfahrung nicht beeinträchtigen. “

Und falls Sie sich fragen, finden Sie hier eine Liste der unterstützten Werbenetzwerke auf der offiziellen Google AMP Project-Website:

• A9
• Adform
• AdReactor
• AdSense
• AdTech
• Punkt und Medien
• Doppelklick
• Flite
• plista
• Smart AdServer
• Yieldmo
• Inhalt

Ich denke übrigens, AMP soll auch die Befürchtungen der Verlage vor der zunehmenden Einführung von Werbeblockern zerstreuen. Aber das ist eine andere Geschichte für eine andere Zeit. Es ist wahrscheinlich Zeit, dass wir das abschließen.

Zu dir hinüber …

Beeindruckend. Wir haben hier viel Boden unter den Füßen.

Danke, dass du bei mir bleibst. Hoffentlich fanden Sie dies hilfreich und ich beantwortete alle Ihre Fragen zum Google AMP-Projekt.

Wenn nicht, schreiben Sie mir bitte eine Zeile in den Kommentaren unten. Hinterlasse außerdem einen Kommentar, wenn du etwas zu dem, was ich geschrieben habe, hinzufügen kannst oder wenn ich etwas verpasst habe.

Auf jeden Fall freue ich mich darauf, von Ihnen zu hören.