Automattics AMP Plugin anpassen

Update (09.03.16 – 15:08 Uhr): Bei meiner Messung (siehe unten) hatte sich ein Server-Hiccup eingeschlichen. Ich habe die Messung wiederholt und dadurch hat sich die Auswertung etwas – aber nicht wesentlich – geändert. Danke an Bego für den Hinweis! :-))

Das ist ein kleines „How-To“ darüber, wie sich das Standardtemplate von Automattics AMP Plugin dem Design der eigenen Website anpassen lässt. Doch zunächst ein paar eigene Gedanken zu AMP im Allgemeinen. Wer sich nur für die reine Umsetzung in WordPress interessiert, überspringt den folgenden Abschnitt.

AMP – Sinn und Zweck

Accelerated Mobile Pages Project (AMP) ist ein Projekt von Google für schnellere Websites. Seit dem 24. Februar werden „geAMPte“ Websites in den Suchergebnissen von Google berücksichtigt.

amp-google

Quelle: Googleblog (https://googleblog.blogspot.de/2016/02/amping-up-in-mobile-search.html)

Im Grunde wird mit AMP nichts weiter getan, als die Seite auf das Wesentliche – den Content – zu entschlacken – vor allem überflüssiger Ballast aus Header, Footer und Sidebar wird weggelassen. Das ist keine Hexerei. Wer schon eine auf Performance optimierte Website hat, braucht AMP eigentlich nicht. Wer keine performante Website hat, sollte seine Energie besser erstmal auf eine grundlegende Optimierung verwerten.

AMP vs. native

Im Selbstversuch habe ich eine von meinen Seiten aus diesem Blog gemessen: einmal als normale Seite (native) wie gewohnt und einmal mit AMP:

AMPnative
Requests:938
Datenmenge:239KB284KB
Finish:5,92s646ms
DOM geladen:328ms641ms
Ladezeit:832ms693ms

Wie zu erwarten, ist die AMP-Version im DOM Aufbau deutlich schneller. Es wird dort schließlich viel weniger Content dargestellt.

Im Vergleich steht die AMP-Version auch bei der Anzahl der Requests viel besser da. Dabei gilt allerdings zu beachten, dass meine Seite über HTTP2 läuft und dafür optimiert ist. Das bedeutet, die Anzahl der Requests ist hier (relativ) egal. Ein Performancegewinn kann bei HTTP2 durch die Verringerung der Requests nicht erzielt werden. Das erkennt man gut daran, dass die Ladezeit (load) bei der native-Version trotzdem geringer ist. Die wenigen Requests bringen also überhaupt keinen Vorteil. Nur bei HTTP1.1 wäre das anders.

Besonders auffällig ist, dass die Datenmenge bei AMP – Obwohl weniger Content dargestellt wird! – deutlich höher ist als auf der native Version. Dort gibt es z.B. noch eine Sidebar. Es würde sich lohnen, den Code genauer zu inspizieren. (Das war nur ein Messfehler beim ersten Versuch.)

amp-vs-native
image-581846

Oben: Die Daten von der AMP-Version dieser Seite.
Unten: Die Daten von der normalen Version dieser Seite.
(Zum Vergrößern auf das Bild klicken oder tippen.)

Mit AMP wird die Seite also nicht unbedingt performanter, sondern unter Umständen sogar langsamer. Am Ende kann auch AMP nichts weiter machen, als sich an allgemein gültige Regeln für die Optimierung halten.

Bei mir läuft AMP bei den Beiträgen nur deshalb, damit ich es testen kann. Für mehr taugt es hier nicht.

Aber Moment, so einfach ist es nicht! Google führt mit AMP was ganz anderes im Schilde, als einfach nur Performanceoptimierung:

We also want to promote enhanced distribution so that publishers can take advantage of the open web’s potential for their content to appear everywhere quickly – across all platforms and apps – which can lead to more revenue via ads and subscriptions.
(Quelle: https://www.ampproject.org/….)

…Holzauge, sei wachsam! ;-)

AMP für WordPress

Wer die WordPress Website mit AMP aufwerten möchte, nimmt zum Beispiel das Plugin AMP von Automattic. Einmal installiert, sorgt es dafür, dass alle Beiträge (keine Seiten!) als AMP-Version vorliegen. Konfigurationsmöglichkeiten bietet das Plugin keine. Die AMP-Seite wird in einem Standard-Layout ausgeliefert. Das ist soweit ok. Doch wenigstens die Farben im Header und Links möchten sicher viele Ihrem eigenen Layout anpassen.

Auf der Github-Seite des Projektes ist sehr gut Dokumentiert, wie sich das Template anpassen lässt. Das lässt sich durch einige Zeilen Code in der functions.php erledigen. Wer nicht coden kann bzw. sich seine Konfiguration lieber zusammen klicken möchte, kann zum Beispiel mit diesem zusätzlichen Plugin grundlegende Anpassungen erledigen.

Ich bevorzuge die handgemachte Lösung in der functions.php. Damit sind viel individuellere Anpassungen möglich als mit einem Plugin.

AMP Template tweaken

Hier mal ein einfaches Beispiel, wie sich das Standard-Template anpassen lässt. ich habe bei mir die Farben für den Header und die Links an meinen Styleguide angepasst.

amp-css-change

Der Vorher-Nachher-Effekt: Links in Blau das Standard-Layout vom Plugin. und rechts eine kleine Anpassung der Farben.

Die Anpassungen lassen sich alle ganz praktisch im eigenen Theme erledigen. Öffne dazu die functions.php, trage folgenden Code ein und passe das CSS an Deine Werte an:

// AMP tweaking
function hm_amp_css_tweaks($amp_template) {
  ?>
  /* Headerfarbe ändern. */
  nav.amp-wp-title-bar {
    background: #b25e80;
  }
  /* Linkfarbe ändern. */
  a,
  a:visited {
    color: #b25e80;
  }
  a:hover,
  a:active,
  a:focus,
  .amp-wp-meta,
  .amp-wp-meta a {
    color: #73374f;
  }
  <?php
}
add_action('amp_post_template_css', 'hm_amp_css_tweaks');

Update: (10.03.2016 – 13:04 Uhr) Im obigen Code habe ich die Syntax der CSS-Kommtare berichtigt.

Mit diesem kleinen Snippet lässt sich schon das Wesentlichste im Layout anpassen. Wer will, kann natürlich noch viel mehr ändern. Bis hin zum Austausch des gesamten Templates ist alles möglich. Dank der sehr guten Doku von Automattic, erledigen sich die Anpassungen komfortabel.

This entry was posted on by .

Heiko Mamerow

Buddhist, Vater, Freund, Internetseitenbauer, Sportler, Musikliebhaber & Verkehrsteilnehmer ;-)

4 Gedanken zu „Automattics AMP Plugin anpassen

  1. Kirsten

    Hallo, Heiko,

    Danke für den Artikel!
    Ich dachte, ich guck gleich mal bei Dir nach.
    Inzwischen macht Google ja ernst und kennzeichnet die AMP optimierten Seiten in den SERPS. Weiter ignorieren hilft also nicht ;o)
    Blöde Frage:
    Wie hast Du denn die Wirkung des AMP Plugins auf die Performance per Dev Tools auf dem Desktop-Rechner gemessen? Der Desktop-Rechner ist ja kein Händi, da sollte das Plugin also nicht eingreifen.
    Ich würde das gerne reproduzieren und steh auf dem Schlauch.

    Schöne Grüße nach Berlin!

    Kirsten

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Kirsten,
      das geht sehr gut. :-)

      1) Die Anzeige: Um AMP-Seiten aufzurufen kannst Du bei meinen Beitragsseiten ein amp an die URL anhängen.
      z.B. https://heikomamerow.de/2016/03/09/automattics-amp-plugin-anpassen/amp/
      Das funktioniert übrigens auch auf dem Desktop.

      2) Das Testen auf dem mobilen Endgerät: Wenn Du auf dem Smartphone/Tablet testen möchtest, ist „[Browsername] Remote Debugging“ Dein Google-Suchchwort. Im Prinzip schließt Du Dein mobiles Gerät mit USB an den Desktop, öffnest die gewünschte Seite im mobilen Gerät und rufst sie dann mit Desktop-Browser Developer Tools auf. Ich mache das immer für Safari/iOS und Chrome/Android. (Firefox geht auch, Opera weiß ich nicht, aber sicherlich auch)

      Antworten
  2. Kirsten

    /amp dranhängen – super, Danke!!!
    Dass man ein Smartphone über USB schliessen kann, hatte ich auch im Hinterkopf. Aber ich hatte keine Ahnung, wie das Stichwort ist, nach dem ich suchen muss.
    Nu weiss ich’s!
    :o)

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.