Auf der Suche nach Möglichkeiten und Anleitungen, (m)einen Blog mobile friendly zu gestalten, stieß ich unter anderem auf AMP für WordPress. Ausschlaggebend für die Installation von AMP war die allererste Einstellung im sehr übersichtlichen, deutschsprachigen Einrichtungsassistenten:
Ich bin nicht verantwortlich für die Konfiguration und die Behebung von Problemen auf meiner Website. Ich bin der Website-Eigentümer und/oder Inhaltsersteller, der von den Vorteilen von AMP profitieren will.
Frage zu meinem technischen Hintergrund: Option 2
AMP für WP – Beschreibung
Page Experience (PX) ist eine Reihe von Ranking-Signalen – einschließlich Core Web Vitals (CWV) –, die die Benutzererfahrung bei der Interaktion mit einer Webseite messen. AMP ist ein leistungsstarkes Tool, das viele Optimierungen und Best Practices automatisch auf Ihre Website anwendet und es Ihnen erleichtert, eine gute Seitenerfahrung für Ihre Besucher zu erzielen. Das offizielle AMP-Plugin, das vom AMP-Team unterstützt wird, macht es einfach, die Leistungsfähigkeit von AMP auf Ihre WordPress-Site zu bringen, indem es sich nahtlos in den normalen Veröffentlichungsablauf integriert und die Verwendung vorhandener Themen und Plugins ermöglicht. – Quelle: AMP
Einrichtungsassistent Schritt für Schritt
Dies ist keine Anleitung, sondern eine aufbereitete Dokumentation meiner Installation (duba-online.com).
1) Willkommen
AMP und WordPress
AMP bietet Unterstützung für das Erstellen von wunderschönen, schnellen, ansprechenden, sicheren und zugänglichen Websites, und das AMP-Plugin macht es einfach, die Vorteile von AMP in WordPress zu benutzen. Mehr erfahren.
Konfiguriere deine Website mit AMP
Unabhängig der technischen Expertise leitet dich der Einführungsablauf in wenigen einfachen Schritten durch die Konfiguration des Plugins.
Website-Überprüfung
Am Ende der Einführung ist das AMP-Plugin vollständig konfiguriert und deine Website ist bereit, um deinen Benutzern großartige Erfahrungen zu liefern.
2) Technischer Hintergrund
Um die beste AMP-Erfahrung zu empfehlen, möchten wir wissen, ob du eher ein technisch versierter Benutzer bist oder nicht.
Entwickler oder technisch versiert
Ich kann WordPress-Entwicklungen durch Verändern von Themes und Plugins vornehmen. Ich bin mit PHP, JavaScript, HTML und CSS vertraut.
Nicht-technisch versiert oder sich eine einfachere Einrichtung wünschend
Ich bin nicht verantwortlich für die Konfiguration und die Behebung von Problemen auf meiner Website. Ich bin der Website-Eigentümer und/oder Inhaltsersteller, der von den Vorteilen von AMP profitieren will.
3) Website Scan
Der Website-Scan hat Probleme auf deiner Website gefunden. Fahre mit dem nächsten Schritt fort, um Empfehlungen für den gewählten Template-Modus zu folgen.
Themes mit AMP-Inkompatibilität
GeneratePress von Tom UsborneVersion 3.1.3
Plugins mit AMP-Inkompatibilität
- Happyforms (free)von HappyformsVersion 1.15.1
- Imagifyvon WP MediaVersion 1.10
- Asset CleanUp: Page Speed Boostervon Gabe LivanVersion 1.3.8.5
- Head & Footer Codevon Aleksandar UrosevicVersion 1.2.4
- GenerateBlocksvon Tom UsborneVersion 1.4.2
- Floating Contact Buttonvon Christoph NagelVersion 2.6
- AnyCommentvon BologerVersion 0.3.3
- Ultimate Addons for Gutenbergvon Brainstorm ForceVersion 1.25.4
- Content Viewsvon Content ViewsVersion 2.4.0.5
- BrainyQuote Widgetvon BrainyQuoteVersion 1.20
- GP Premium von Tom Usborne
4) Template-Modi
Basierend auf den Ergebnissen des Website-Scans bietet das AMP-Plugin die folgenden Auswahlen. Erfahre mehr über die AMP-Erfahrung mit verschiedenen Modi und die Verfügbarkeit von AMP-Komponenten im Ökosystem.
Lesemodus
- Im Lesemodus wird keine Website eine Nicht-AMP- und eine AMP-Version haben, und beide benutzen ein eigenes Theme. Wenn die automatische mobile Umleitung aktives ist, wird die AMP-Version des Inhalts auf Mobilgeräten ausgeliefert. Wenn AMP-zu-AMP-Verlinkung aktiv ist, werden Benutzer, die sich einmal auf einer AMP-Seite befinden, weiterhin durch deinen AMP-Inhalt navigieren.
- Empfohlen, wenn du AMP auf deiner Website aktivieren willst, trotz erkannter Kompatibilitätsprobleme.
- Im Plugin-Kompatibilitätsprobleme zu adressieren, benötigst du möglicherweise die Plugin-Unterdrückung, um inkompatible Plugins auf AMP-Seiten zu deaktivieren oder wählst ein alternatives AMP-kompatibles Plugin.
Übergangsmodus
- Im Übergangsmodus wird keine Website eine Nicht-AMP- und eine AMP-Version haben, und beide benutzen dasselbe Theme. Wenn die automatische mobile Umleitung aktives ist, wird die AMP-Version des Inhalts auf Mobilgeräten ausgeliefert. Wenn AMP-zu-AMP-Verlinkung aktiv ist, werden Benutzer, die sich einmal auf einer AMP-Seite befinden, weiterhin durch deinen AMP-Inhalt navigieren.
- Nicht empfohlen, da es (ein) Kompatibilitätsproblem(e) gibt, die ohne Unterstützung eines Entwicklers Schlüsselfunktionalität deiner Website beeinträchtigen können.
- Im Plugin-Kompatibilitätsprobleme zu adressieren, benötigst du möglicherweise die Plugin-Unterdrückung, um inkompatible Plugins auf AMP-Seiten zu deaktivieren oder wählst ein alternatives AMP-kompatibles Plugin.
Standard
- Im Standardmodus ist deine Website vollständig AMP (mit Ausnahme von Fällen, in denen du AMP für spezielle Bereiche deiner Website deaktivierst) und werden ein einziges Theme benutzen.
- Nicht empfohlen, da es (ein) Kompatibilitätsproblem(e) gibt, die ohne Unterstützung eines Entwicklers Schlüsselfunktionalität deiner Website beeinträchtigen können.
- Im Plugin-Kompatibilitätsprobleme zu adressieren, benötigst du möglicherweise die Plugin-Unterdrückung, um inkompatible Plugins auf AMP-Seiten zu deaktivieren oder wählst ein alternatives AMP-kompatibles Plugin.
5) Theme-Auswahl
Da laut AMP-Assistent GeneratePress und GenerateBlocks nicht kompatibel sind(?), fiel meine Wahl natürlich auf das Theme „AMP Legacy“.
Ansonsten stehen alle aktuell installierten Themes zur Auswahl.
Überprüfung / Fertig
- Deine Website ist bereit, um deinen Benutzern großartige Erfahrungen zu bringen!
- Im Lesemodus wird AMP über dein ausgewähltes Lese-Theme und Seiten für deine Nicht-AMP-Website werden über dein primäres Theme ausgeliefert.
- Durchsuche deine Website hier, um dir sicher zu sein, dass sie deine Erwartungen erfüllt und schalte die AMP-Einstellung um, um beide Versionen zu vergleichen.
- Als letzten Schritt, benutze den Customizer, um das Lese-Theme an deine Bedürfnisse anzupassen.
Weiters sieht man auf dieser Seite je eine kleine Beitrags- und eine Seitenvorschau mit dem gewählten Theme.
Auswahlmöglichkeiten
- Anpassen (neue AMP-Kategorie im Customizer):
- Farbe des Head-Hintergrunds
- Farbe Head Text (Beitrags-, Seitentitel)
- Theme Modus hell/dunkel
- Zurück
- Schließen (keine Sorge, die Einstellungen sind bereits gespeichert)
Hilfe benötigt?
- Supportforum
- Template-Modus in den Einstellungen
- Mehr darüber erfahren, wie das AMP-Plugin funktioniert
Erstes Fazit
Jedenfalls bringt mir AMP für WordPress eine erhebliche Performance-Steigerung bei meinen mobilen Messwerten (PageSpeed Insights)! Und das, ohne eine Zeile Code zu schreiben.
Im WordPress Editor erscheint rechts oben, neben „Vorschau“ ein neues Icon für die AMP-Vorschau.
In den WP Beitragseinstellungen kann AMP für einzelne Beiträge deaktiviert werden.
AMP + GeneratePress
Höchst überrascht war bzw. bin ich darüber, dass sowohl GeneratePress Themes als auch GenerateBlocks nicht AMP-kompatibel sind! Der Autor von beiden Tom Usborn bietet derzeit nur eine Übergangslösung an – das Mini-Plugin AMP + GeneratePress.
Fehler von AMP oder GeneratePress? Nach erfolgreichem Durchlauf des AMP-Einrichtungsassistenten schlägt jeder „Erneuter Sitescan“ fehl – Mit und ohne AMP + GeneratePress.
Update zwei Stunden später: Dieser Beitrag von TechTrend.com hat mich auf meinen Flüchtigkeitsfehler hingewiesen – nach der Aktivierung von AMP + GeneratePress ist neben dem Lesemodus zusätzlich der Übergangsmodus als „empfohlen“ markiert. Nach der Aktivierung des Übergangsmodus sollte man den Seitencache leeren. Ein Test mit dem Google official AMP testing tool ergab für beide Templates das Ergebnis: Verknüpfte AMP-Version ist gültig! Sorry Tom!
Noch mehr kann ich dazu nichts Sinnvolles berichten.
Liebe Grüße und bleibts gsund!
