Einsteigerhandbuch für beschleunigte mobile Seiten (AMP)

Beschleunigte mobile Seiten ist eine Initiative von Google, die das größte Problem des mobilen Webs lösen soll - Geschwindigkeit. Die großartigen Benutzererfahrungen, die wir mit großer Sorgfalt entwerfen, sind auf dem Handy schmerzhaft langsam.

Langsamkeit ist nicht nur ein UX-Problem, sondern auch Reduziert die Konversionsraten, und schadet der Zugänglichkeit durch Ausschließen von Benutzern mit langsameren Internetverbindungen. AMPERE ist eine Teamleistung, die mit dem Ziel ins Leben gerufen wurde, Publishern zu ermöglichen einmal mobile optimierte Inhalte erstellen und habe es sofort überall geladen.

Seit der Einführung haben viele Verlage wie die BBC, The Economist, Guardian News und die Financial Times die Initiative umgesetzt. Daher können wir mit Sicherheit davon ausgehen, dass AMP eine Innovation ist, die für alle interessant ist, die auf dem Handy wettbewerbsfähig bleiben möchten Netz.

AMP in Aktion

Bevor wir in die Details eintauchen, hier die AMP-Demo, also kannst du sehe es in Aktion. Die Demo ist über diesen Link erreichbar.

Um AMP in Aktion zu sehen, müssen Sie zwei Dinge tun:

Zeigen Sie die Demo entweder auf einem mobilen Gerät oder auf einem mobilen Simulator an, z. Mobile Device Simulator von Chrome DevTools.
Suchabfrage in der Suchleiste ausführen. Da Google AMP derzeit hauptsächlich mit Nachrichtenseiten arbeitet, ist die beste Wahl eine frische Nachricht.

Auf dem Screenshot unten können Sie sehen, was ich erhalten habe, als ich den Suchbegriff verwendet habe rio olympics.

Demo für beschleunigte Handy-Seiten auf dem iPad

Wie Sie sehen, erscheinen AMP-Seiten als Google Rich Cards, ein Mobile-optimiertes Image-Karussell, dass Google im Mai 2016 veröffentlicht wurde.

Beachten Sie, wie Google AMP-Seiten von anderen für Handys optimierten Seiten unterscheidet mit 2 verschiedenen Etiketten: AMP und Mobile-friendly. Es lohnt sich auch, auf einige Ergebnisse zu klicken, um zu sehen, wie eine AMP-Webseite aussieht und wie schnell sie auf mobilen Geräten läuft.

Technischer Hintergrund

AMP ist ein Webstandard baut auf vorhandenen Web-Technologien auf und konzentriert sich auf statische Inhalte. Es hat 3 verschiedene Teile:

AMP HTML: HTML mit geändert (1) die Einschränkung bestimmter regulärer HTML / CSS-Funktionen und (2) die Einführung neuer benutzerdefinierter Tags (Komponenten)
AMP JS: erzwingt Best Practices, um die Ladezeit der Seite zu verkürzen
AMPERE CDN: ein Cache mit einem eingebauten Validierungssystem, das Ihre Site weiter optimiert

Wenn Sie mehr über den technischen Hintergrund von AMP-Seiten erfahren möchten, schauen Sie sich das Video unten an, in dem Paul Bakaus von Google einen Kommentar abgibt Einführungsgespräch auf AMP.

Wenn Sie tiefer eintauchen möchten, sollten Sie auch verstehen, welche Optimierungstechniken AMP verwendet, um die Leistung auf Mobilgeräten zu steigern. In dem folgenden Video erklärt Malte Ubl die Leitung von AMP Engineering Anatomie von AMP im Detail.

AMP HTML

Beschleunigte Handy-Seiten sind reguläre HTML-Seiten das muss sein Befolgen Sie eine Reihe von Regeln um Seiten schneller zu laden und mit zuverlässiger Leistung zu rendern.

Schauen wir uns die wichtigsten Dinge an, die Sie darüber wissen müssen. Sie können sich auch die vollständige AMP-HTML-Spezifikation ansehen.

Entscheiden Sie, ob Sie eine separate AMP-Seite wünschen

Für dieselbe statische Inhaltsseite können Sie haben 2 verschiedene Versionen - eine für den AMP und eine für die Nicht-AMP-Version. Sie können auch wählen nur eine version - die AMP-Seite, und verwenden Sie sie überall. Über Browser-Unterstützung, AMPs Github-Seite behauptet:

Wenn Sie sich immer noch Sorgen um die Browserunterstützung machen, lesen Sie den Beitrag von Paul Irish von Google über Stackoverflow.

Wenn Sie zwei Seiten (AMP und Nicht-AMP) haben möchten, müssen Sie dies tun Link zu jedem von ihnen damit Suchmaschinen über die Existenz der informieren zwei Versionen.

Fügen Sie dem folgenden Code hinzu Abschnitt der Nicht-AMP-Seite:

Fügen Sie außerdem die folgende Zeile hinzu Abschnitt der AMP-Seite:

Wenn Sie nur eine AMP-Seite haben, müssen Sie dies trotzdem tun verknüpfe es von selbst auf folgende Weise:

Boilerplate starten

AMP Project bietet verschiedene Möglichkeiten Boilerplates starten Sie können verwenden, um loszulegen. Sehen Sie sich unten die einfachste AMP-HTML-Boilerplatte an:

          Hallo Welt!

Sie können sehen, dass die Boilerplate die reguläre HTML-Seite mithilfe von Etikett. Das > tag fügt das hinzu AMP JS-Bibliothek.

 Das   
Du kannst nur haben ein eingebettetes Stylesheet, und es gibt auch viele unzulässige Stilregeln, Zum Beispiel können Sie das nicht verwenden !wichtig Qualifikation, die @einführen Regel und Pseudoklassen.
 Vergessen Sie nicht, die Stylesheet-Einschränkungen zu überprüfen, bevor Sie mit dem Schreiben von CSS für Ihre AMP-Seiten beginnen.
 Es gibt noch eine andere Sache, die Sie über AMP-Stilregeln kennen sollten: Sie Sie können kein beliebiges Layout verwenden - da es eines der Prinzipien von AMP ist, dem Browser zu erlauben Berechnen Sie den Abstand jedes Elements auf der Seite im Voraus.
 Sehen Sie sich die unterstützten und nicht unterstützten Layouts an.
 AMP JS
 AMP-Dokumente können enthalten Weder von einem Autor geschriebenes JavaScripts noch von Drittanbietern, Dies bedeutet jedoch nicht, dass Accelerated Mobile Pages überhaupt kein JavaScript verwenden. Die JavaScript-Bibliothek von AMP (AMP-Laufzeit) ist dafür verantwortlich, AMP-Seiten schnell zu laden und zu rendern Durchsetzung von Best-Performance-Praktiken.
 AMP-Komponenten
 AMP-Komponenten sind von der AMP-Laufzeit definiert. Sie sind die oben genannten AMP-spezifische HTML-Tags Sie müssen anstelle ihres regulären Gegenstücks, wie z  anstatt der  Etikett.
 Jede AMP-Komponente enthält eine bestimmte externe Ressource (ein Bild, ein Video, eine Einbettung usw.). Externe Ressourcen neigen dazu, Websites zu verlangsamen. Das Hauptziel dieser Lösung ist zu das Laden externer Ressourcen verwalten in vernünftiger Weise, indem Sie sie ausführen in Sandkästen.
 AMP versorgt Sie mit 2 Arten von Komponenten:
 Eingebaute Komponenten: Sie sind in jedem AMP-Dokument immer verfügbar direkt in die AMP-Laufzeitumgebung integriert. Derzeit gibt es fünf davon:  zum Anzeigen von Anzeigen
  für Bilder wird es anstelle von verwendet  Etikett
  zum Verfolgen von Pixeln (zum Zählen von Seitenaufrufen)
  für direkte HTML5-Videodateien, ersetzt das  Etikett
  für eingebettete Elemente (kann anstelle von verwendet werden  in bestimmten Fällen)
 
 Erweiterte Komponenten: Zusätzliche Komponenten müssen Sie explizit einschließen in Ihr AMP-Dokument. Es gibt viele nützliche, wie z  und , Siehe die vollständige Liste. Viele von ihnen können daran gewöhnt werden Inhalte von Drittanbietern einbetten, wie von Twitter oder Instagram.
 
Beachten Sie, dass alle extern geladenen Ressourcen, wie z  und  muss ein bekanntes haben  und  Attribut um den Browser zu aktivieren Berechnen Sie das Layout im Voraus.
 AMP CDN
 Das AMP CDN ist im Grunde ein Cache, genannt Google AMP Cache. Es holt gültige AMP-Dokumente, speichert sie und lädt sie. AMP CDN hat auch eine eingebautes Validierungssystem.
 Es lohnt sich Testen Sie Ihre AMP-Seiten bevor sie online gehen, um sicher zu gehen den Validator übergeben. Sie können es auf viele verschiedene Arten tun.
  BILD: AMP-Projekt
Es ist gut zu wissen, dass das AMP-CDN das HTTP / 2-Protokoll verwendet, um die bestmögliche Leistung zu erzielen.
 AMP-Tools
 Es gibt einige großartige Tools, die Sie bei der Implementierung von Accelerated Mobile Pages unterstützen können. Sehen Sie sich einige davon an.
 Google stellt Webmastern ein Handy zur Verfügung AMP-Statusberichts-Tool Dies zeigt die Anzahl der erfolgreich indizierten AMP-Seiten sowie AMP-Fehler.
 Lullabot's AMP PHP-Bibliothek Ermöglicht das Konvertieren Ihrer HTML-Seiten in AMP-HTML-Code und meldet die Übereinstimmung aller HTML-Dokumente mit den AMP-Standards.
 Wenn Sie AMP auf Ihrer WordPress-Site verwenden möchten, lesen Sie das Yoast-Tutorial, in dem beschrieben wird, wie Sie WordPress für AMP einrichten und wie AMP mit dem Yoast SEO-Plugin zusammenarbeitet.
 Sie können auch Automattic's ausprobieren AMP-Plugin So können Sie beschleunigte mobile Seiten auf Ihrer WordPress-Site aktivieren.
  IMAGE: WordPress.org
Weitere Überlegungen
 Wenn Sie immer noch nicht überzeugt sind, schauen Sie sich das Video über a an Schneller Geschwindigkeitstest unten.
 
 Jonathan Abrams, der Gründer des Nuzzel, macht sogar noch bessere Ansprüche, da er behauptet, dass auch für Websites, die für Mobilgeräte optimiert wurden, die New York Times deutlich schneller geladen wird - Anstatt die durchschnittliche Seite drei Sekunden zu laden, wird eine Seite geladen weniger als eine halbe Sekunde Wenn die beschleunigten mobilen Seiten von Google aktiviert sind.
 In Verge können Sie auch einen interessanten Artikel über die Konkurrenz von Google AMP und Instant Artikeln von Facebook lesen. Wenn Sie immer noch nach einer Antwort für "Was ist der Haken?" Suchen, schauen Sie sich Yoast's Post an, in dem die Befürchtungen erwähnt werden, dass AMP uns vor dem Jahr 2000 auf eine Internetzeit zurückversetzt und ob es wirklich ein offener Standard ist.
 .