Mit Accelerated Mobile Pages (AMP) – Das AMP-HTML-Framework gewinnt immer mehr an Aufmerksamkeit, und mit der Veröffentlichung von v1.0 des offiziellen WordPress-Plugins ist die Implementierung von AMP auf WordPress noch einfacher geworden. Auch wenn das Plugin die Möglichkeit bietet, den Schalter einfach umzulegen, sollte die AMP-Implementierung sorgfältig geplant werden. Bei Projekten, an denen wir arbeiten, gibt es eine Reihe von Dingen, die wir berücksichtigen und verstehen, bevor wir mit der Entwicklung beginnen.

Im Folgenden finden Sie eine Zusammenfassung dieser Dinge. Wenn Sie sich mit Accelerated Mobile Pages – AMP befassen, sollten Sie diese Punkte beachten und in Ihre Planung einbeziehen.

Bestehende Website-Performance und was mit AMP erreicht werden kann

Leistung ist wie Leistung ist. Benchmarking der Performance auf der bestehenden Website und Verständnis:

Wo sie liegt, was schlecht<->gut angeht
Wie viel AMP realistischerweise die Nadel bewegen könnte

Dies gibt Ihnen eine Vorstellung von der Lücke, die Sie mit AMP schließen können und ob die Investition den potenziellen Ertrag wert ist. D.h. von einem 7er auf einen 9er Performance-Score zu kommen, bedeutet etwas ganz anderes als von einem 3er auf einen 8er zu kommen.

Wenn Sie auf der Suche nach modernen Tools zur Bewertung der Performance sind (neben anderen Dingen), wenden wir uns an:

Lighthouse
Calibre
WebPageTest.org

Jedes dieser Tools bietet agnostische Metriken, mit denen Sie Ihre Leistungstrends über die Zeit verfolgen können. Wir empfehlen Ihnen, die Nuancen zu lernen, damit Sie jedes dieser Tools beherrschen können.

Die Implementierungsarten von AMP

Mit dem AMP for WordPress-Plugin gibt es 3 verschiedene Modi für die Implementierung. Diese sind: Klassisch . Gepaart. Nativ.

Jede Implementierung hat einen anderen Einfluss auf die Funktionsweise Ihrer Website. Native und Paired-Modi verwenden die Vorlagen und das Styling Ihres Themes. Sie sehen oft genauso aus wie Ihre Nicht-AMP-URLs. (Der klassische Modus verwendet eine Vorlage, die mit dem Plugin gebündelt ist. Aufgrund von Änderungen an den SEO-Best-Practices und dem Fehlen einer „kanonischen“ Erfahrung mit dem Classic-Modus empfehlen wir Ihnen nicht, den Classic-Modus zu verwenden).

Der Wert, den diese drei verschiedenen Modi mit sich bringen, variiert und die Wahl zwischen ihnen kann oft von den technischen Einschränkungen beeinflusst werden, wie Ihre Website eingerichtet ist. Diese zu verstehen, wird Ihnen helfen, Ihre Überlegungen einzugrenzen, wenn Sie sich auf die Suche nach mehr technischen Möglichkeiten machen.

Der Abschnitt AMP Modes & The WordPress Plugin auf dieser Seite behandelt diese 3 Modi im Detail. Sie können auch in der Dokumentation des Plugins mehr darüber lesen.

3. Überprüfen Sie die Infrastruktur zur Asset-Optimierung (CDNs, Caching, etc.) und definieren Sie, was entfernt werden könnte und was mit AMP in Konflikt stehen könnte.
Es gibt tausend Möglichkeiten, einen Cache zu häuten. Asset-Optimierung hat viele Formen und ihre Freundlichkeit mit AMP variiert. Wenn Sie prüfen, was auf Ihrer aktuellen Website aktiv ist, sind Sie beim Testen der AMP-Konformität besser gerüstet, um zu erkennen, woher die Probleme (falls es welche gibt) kommen und wie sie gelöst werden können.

Verstehen Sie leistungsbezogene Umsatzströme

Dies ist bei jeder Website anders. Überprüfen Sie, wie die Seitenperformance und das daraus resultierende Nutzererlebnis die Konversionsraten beeinflussen können und welche technischen Implementierungen es dafür gibt. Einnahmequellen können sein:

Werbeeinnahmen: Sowohl programmatisch als auch manuell
Abonnements
E-Commerce
Affiliate und gesponserte Inhalte

Ad-Tech Tracking-Implementierungen

AdTech-Implementierungen verdienen hier einen eigenen Punkt, da sie stark variieren und meist Javascript-lastig sind. AMP bietet AdTech-spezifische Komponenten für die Arbeit damit, aber die Implementierung kann variieren. Das Verständnis Ihres AdTech-Stacks wird Ihnen helfen: Bestimmen Sie, wie Sie die Anzeigen in AMP implementieren, z. B. mit amp-ad. Ihnen dabei helfen, sich darüber zu informieren, wie Sie AMP und seine Auswirkungen auf die Werbeeinnahmen testen sollten

Technical Site Audit von aktuellem Javascript

Von Tracking-Codes bis hin zu Frontend-Funktionen – Javascript ist überall. Wenn Sie wissen, was und wie es auf Ihrer Website eingesetzt wird, können Sie feststellen. Wovon Sie sich tatsächlich verabschieden können (Sie werden überrascht sein, wie oft wir in der Lage sind, JS von Websites zu entfernen, an denen wir arbeiten, ohne die Funktionalität oder Integrationen zu beeinträchtigen) Was Sie in AMP neu implementieren können, z. B. mit amp-bind, amp-ad oder amp-analytics. Wenn Sie zum Testen kommen, ist der einfachste erste Schritt, JavaScript im Browser einfach abzuschalten und ein Gefühl dafür zu bekommen, wie Ihre Seite ohne funktioniert.

Tracking/Cookie-Implementierungen prüfen

Dies ist ebenfalls ein Teil des JavaScript-Schrittes, kann aber auch für sich allein betrachtet werden. Tracking-Snippets auf Websites sind mit Abstand einer der größten Verursacher für schlechte Performance. Wir haben viele Fälle gesehen, in denen das Abschalten von Tracking, ohne etwas anderes zu tun, die Seitenperformance um mehr als 50% verbessert hat.

Dennoch ist Tracking ein wichtiger Bestandteil des modernen Website-Managements. Ein Audit dessen, was Sie haben, kann Ihnen jedoch helfen, festzustellen: Was sicher von Ihren AMP-Seiten entfernt werden kann.. Wie Sie vorhandene Komponenten wie amp-analytics, amp-bind und amp-list nutzen können. Für AMP gibt es Komponenten, die das Tracking erleichtern. Der Google Tag Manager Service hat sogar AMP-spezifische Funktionen, die helfen, Tracking zu implementieren, während die AMP-Kompatibilität erhalten bleibt.

Unnötiges an CSS auf URLs

Das Plugin kann ungenutztes CSS entfernen, aber es kann immer noch das AMP-Maximum von 50 KB überschreiten. Eine der Einschränkungen, die AMP einer Seite auferlegt, ist eine maximale Dateigröße für CSS von 50 KB. Das AMP for WordPress-Plugin prüft durch eine Funktion namens „Tree-Shaking“ eine Seite und erzeugt eine minimierte Datei mit nur den erforderlichen CSS. Allerdings garantiert diese Funktion nicht, dass die Dateigröße unter dem Grenzwert liegt. Die Überprüfung der wichtigsten Seitenvorlagen, insbesondere bei komplexen Seiten, hilft Ihnen dabei, den Umfang des Projekts so zu planen, dass Sie die CSS-Datei der Website nicht umstrukturieren müssen.

Stand der AMP-Kompatibilität

Dies fällt eigentlich eher in die Findungsphase eines Projekts, ist aber tatsächlich etwas, das zumindest auf hohem Niveau recht einfach durchgeführt werden kann. Wenn Sie sich in der Erkundungsphase von AMP befinden, kann Ihnen dies einen großen Vorsprung verschaffen.

Der Prozess beinhaltet im Wesentlichen die Arbeit an einer Staging-/Testing-/Alt-Version Ihrer Website, die Installation des AMP-WordPress-Plugins und die Nutzung seiner Funktionen zur Identifizierung von Validierungsfehlern.

Roadmap für AMP & das AMP-Plugin für WordPress

Zu wissen, was kommt, auch wenn es nur um die Ecke ist, kann Ihnen bei der Entscheidung für eine AMP-Implementierung helfen. Ein No-Go-Faktor in Bezug auf AMP oder das Plugin kann tatsächlich etwas sein, das in naher Zukunft behoben werden könnte. Die Roadmap ist öffentlich und kann leicht hier eingesehen werden.

Diese 10 Punkte sind das, was unsere Teams beim Scoping eines AMP-Implementierungsprojekts durchlaufen. Wenn Sie diese Punkte berücksichtigen, verstehen und sogar selbst implementieren, sind Sie bestens über AMP und seinen potenziellen Wert für Ihre Website informiert.