Heiko Mamerow

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.

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:

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

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.

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.