Accelerated Mobile Pages für WordPress

So bekommst Du schnellere Ladezeiten: Mit AMP-HTML, AMP-JS und Google AMP-Cache ⚡

andre-goldmann

Autor von „Accelerated Mobile Pages für WordPress“:
André Goldmann
Pixeldreher, Gründer

Hast du Interesse an einem kostenfreien Video-Report zur Optimierung deiner Website?

Dann fülle einfach das Formular aus und in wenigen Tagen melden wir uns mit Tipps zur Optimierung deiner Website bei dir ➜ Kostenfrei und unverbindlich!

Accelerated Mobile Pages sind nicht erst seit den neuesten Google-Ankündigungen ein Thema mit dem sich Website-Betreiber befassen müssen: Erfahre in diesem Artikel wie Du AMP für Deine WordPress-Website verwenden kannst und was Deine Besucher davon haben.

Was sind Accelerated Mobile Pages?

Würdest Du mich fragen was Accelerated Mobile Pages sind, würde ich Dir mit „reduzierten HTML-Seiten“ antworten. Und genau das ist es auch was AMP (Accelerated Mobile Pages) auszeichnet. AMP bestehen aus drei unterschiedlichen Bereichen: dem AMP-HTML, der AMP-JavaScript-Bibliothek und dem Google AMP-Cache.

Während AMP-HTML den Quellcode auf ein Minimum reduziert, AMP-JavaScript standardisierte Funktionen wie Slider, Analytics oder Anzeigen anbietet, stellt der Google AMP-Cache, ähnlich wie ein Content-Delivery-Network die Dateien an jedem Standort rasend schnell zur Verfügung – und das sogar mit dem HTTP 2.0 für ein Maximum an Ladegeschwindigkeit Deiner WordPress-Website.

Das macht Accelerated Mobile Pages so schnell:

  • AMP kombiniert unterschiedliche Technologien, um Deinen Content schnell bei mobilen Besucher anzuzeigen. Hier mal ein Überblick der verwendeten AMP-Technologien:
  • Ausschließlich asynchrone Scripte werden genutzt
  • iFrames, Videos und andere Embeds werden nur von ausgewählten Partnern angezeigt und geladen
  • Deine Inhalte werden statisch angezeigt – keine dynamischen Inhalte können als AMP genutzt werden
  • Third-Party-JavaScript wird nur in einigen Fällen zugelassen
  • Verwendung von Inline-CSS (keine externen Layout-Dateien)
  • Schriftarten müssen auf dem eigenen Server liegen oder aus der Google Font-Bibliothek geladen werden
  • Es werde nur GPU-Animationen genutzt
  • Bilder und Videos werden erst geladen, bevor sie in den sichtbaren Bereich des Besuchers kommen

Accelerated Mobile Pages für Deine WordPress-Websites aktivieren

Im ersten Schritt musst Du ein neues WordPress-Plugin installierenAMP von Automattic, Mohammad Jangda und Joen Asmussen.

  1. Nach der Aktivierung vom AMP-WordPress-Plugin hast Du folgende Funktionen zu Deiner WordPress-Website hinzufügt:
  2. Ein neues link-Tag mit der Bezeichnung rel=“amphtml“ wurde ergänzt, welches auf die AMP-URL Deines Artikels hinweist
  3. Das Plugin erzeugt automatisch aus dem Inhalt Deines WYSIWYG-Editor die AMP-Variante Deiner Artikel und gibt diese als AMP-HTML aus
  4. Von der neuen Accelerated Mobile Page Deines Artikels wird mit einem Canonical-Tag auf den original Artikel verwiesen, um Probleme mit doppelten Inhalten auf Grund der AMP zu vermeiden

Info für alle Entwickler: Das AMP-Plugin nutzt für die Ausgabe den wp_content-Hook und zeigt auf den Accelerated Mobile Pages immer den Inhalt aus diesem Hook an. Custom-Fields Deiner WordPress-Website werden somit nicht von Haus aus unterstützt, können jedoch nachgerüstet werden.

Accelerated Mobile Pages lohnen sich

Der Aufwand um Accelerated Mobile Pages zu nutzen ist auf dem ersten Blick vielleicht etwas umfangreicher. Wer aber genauer hinschaut und das Potential erkannt hat, wird schnell zu dem Entschluss kommen AMP einzusetzen.

Brauchst Du Hilfe bei der Integration von Accelerated Mobile Pages für Deine WordPress-Website? Sprich uns einfach an.

Du hast Fragen, Anregungen oder Kritik zu diesem Beitrag? Dann lass uns auf einem dieser Kanäle darüber sprechen: