AMP, Das AMP-HTML-Framework

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.