1. Sie sind hier:
  2. Home
    3. |
  3. TYPO3-Support
    4. |
  4. AMP und TYPO3

AMP & TYPO3

Was ist AMP?

Accelerated Mobile Pages (kurz AMP) ist ein von Google initiiertes Projekt zur Beschleunigung der Auslieferung von Webseiten. Im Vordergrund stehen dabei mobile Webseiten. Grundsätzlich können aber auch Desktop-Versionen mit AMP programmiert werden. Der Suchmaschinenbetreiber verfolgt mit AMP das Ziel, das Surf-Erlebnis (=User Experience) mit mobilen Endgeräten deutlich zu verbessern. Laut Statistik zahlt sich das auch für die Webseiten-Betreiber aus;

 

Besucherverlust durch zu lange Ladezeiten
53% Prozent Besucher gehen verloren, wenn die Seite länger als 3 Sekunden Ladezeit benötigt.

Siehe: https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-website-load-time/

Zusammenfassend kann man sagen, die drei größten Schwachstellen mobiler Seiten sind:

  • lange Ladezeiten
  • träge und langsame Interaktion
  • holpriger Seitenaufbau (z.B. durch Werbeeinblendungen)

Genau hier setzt AMP an: Durch kurze Ladezeiten und einen sofortigen Seitenaufbau ohne nachträgliche Verschiebungen wird die User-Experience dramatisch verbessert. 

Wir möchten in diesem Artikel einen kleinen Überblick über AMP geben und aufzeigen, warum AMP auch für TYPO3-Website-Betreiber nicht nur möglich, sondern auch empfehlenswert ist.

AMP ist - sehr vereinfacht ausgedrückt - ein abgewandeltes HTML, das aufgrund der unten beschriebenen Technik extrem schnell Webseiten ausliefert. Da AMP diversen Einschränkungen unterliegt und nicht zwingend von jedem Browser unterstützt wird, ist die häufigste Lösung, zwei Versionen der Website auszuliefern: eine im bisherigen HTML-Format und eine im AMP-Format. Beide Seiten-Typen sind jeweils gegenseitig verknüpft, so dass die Suchmaschine entscheiden kann, welche Variante sie verlinkt (z.B. AMP auf mobilen Geräten und HTML auf Desktop-Systemen). Das ist vor allem auch vor dem Hintergrund der Browserkompatibilität relativ wichtig.

Einführung in Accelerated Mobile Pages

Eine sehr anschauliche Einführung in AMP bietet Google selbst (in Person von Paul Bakaus auf Englisch):

Wie funktioniert AMP?

AMP basiert im Wesentlichen auf drei Säulen:

  • AMP-HTML und Restriktionen an die Verwendung von HTML/CSS und JavaScript
  • AMP-JS: JavaScript zur Abbildung der gesamten Logik und damit u.a. zum optimierten Ressourcenmanagement
  • AMP-Cache: auf CDN-Servern von Google werden die Seiten zwecks kurzer Ladezeiten gespeichert

Besonders schnell werden die Seiten durch zwei Konzepte:

Pre-rendering

Im Suchergebnis von Google wird der erste Viewpoint (das ist der Teil der Seite, der auf dem jeweiligen Display auf den ersten Blick, also ohne zu scrollen sichtbar ist, auch bekannt unter dem Namen "above-the-fold-content") von AMP-Seiten mit hoher Klickwahrscheinlichkeit geladen, ohne dass der Besucher etwas davon mitbekommt (über einen sogenannten "hidden iframe"). Klickt der Besucher in den Suchergebnissen auf einen solchen Link, wird die Seite SOFORT angezeigt. 

Wenn also in der Google-Suche ein Suchbegriff eingegeben wird:

  • sucht google die für diesen Begriff qualifizierten Links (=Suchergebnis)
  • kalkuliert (aufgrund diverser Faktoren) auf welche Links der Besucher mit hoher Wahrscheinlichkeit klicken wird
  • lädt den "above-the-fold-content" dieser Seiten, der mit dem Display des Besuchers korrespondiert

Da die Seiten aus Sicherheitsgründen nur aus dem Google cache geladen werden, haben sie eine andere URL, was zu erheblicher Kritik geführt hat.

Beispiel:

Die AMP-Seite www.wacon.de/news_artikel.html würde im google-Suchergebnis so angezeigt:

www.google.com/amp/wacon.de/news_artikel.html

Dafür gibt es zwei Gründe: Erstens ist beim Duchführen der Suche nicht klar, ob der Benutzer die Seite tatsächlich aufgerufen wird. Das Laden wurde aber trotzdem von Analyse-Tools erfasst und würde die Statistik verfälschen. Zweitens sind die Seiten, die schon im AMP Cache liegen, auf Validität geprüft, und können daher auch als AMP-Seiten fehlerfrei geladen werden. 

Dynamisches Laden von Ressourcen

AMP lädt nur die Bilder (oder andere Ressourcen), die tatsächlich gerade angezeigt werden müssen ("Above the Fold"). Wenn der User nach unten scrollt, werden die dann anzuzeigenden Bilder auch erst geladen. Dadurch wird der erste Aufruf der Seite extrem beschleunigt. Diese Methode wird in ähnlicher Form bereits seit längerem - unabhängig von AMP und Google - mit JavaScript angewendet und nennt sich Lazy Loading.

Woran erkennt man AMP-Seiten?

AMP-Seiten erkennen Sie im Suchergebnis an dem Blitzsymbol neben der jeweiligen URL. Wir haben für unser Stuttgarter Büro eine eigene TYPO3-Website AMP-kompatibel gemacht: www.birdy.net. Hier die Darstellung im Suchergebnis:

google Suchergebnis für AMP-Seiten
AMP-Seiten erkennt man am grau unterlegten Blitz-Symbol

Dabei wird folgendes schon deutlich: Je mehr User die Bedeutung des Symbols kennen (=schnelle Ladezeiten, komfortables Surfen), desto wahrscheinlicher werden sie daraufklicken.

Ergo: AMP wird zu einem Anstieg der Besucherzahlen führen!

Qualitätscheck

Mit Lighthouse steht ein kostenloses, leistungsstarkes Tool zur Analyse von Webseiten zur Verfügung. Wir haben die Software auf unsere AMP-Website htps://www.birdy.net/amp "angesetzt" und sind vom Ergebnis begeistert: 

TYPO-AMP-Site mit Lighthouse analysiert
Unsere TYPO3-AMP-Site im Qualitätscheck mit Lighthouse

Diese Werte sind mit "normalen" Webseiten kaum zu erreichen. Sie zeigen das enorme Potential von AMP.

Technische Vorgaben

Die wichtigsten technischen Aspekte im Kurzüberblick:

  • die Verwendung von https ist Pflicht
  • das HTML-Dokument beginnt mit <!doctype html><html amp> statt nur mit <html>, danach muss die <head>-Anweisung gefolgt von <meta charset="utf-8"> erscheinen
  • das canonical-Tag muss entweder auf die korrespondierende HTML-Seite oder - wenn es diese nicht gibt - auf sich selbst zeigen
  • es muss ein Viewport angegeben werden (empfohlen initial-scale=1)
  • im Head der Seite müssen außerdem das AMP-JavaScript und ein css-boilertemplate eingebunden werden
  • CSS muss inline innerhalb eines <styles>-Tags im Head definiert werden und darf nicht größer als 50KB sein
  • bis auf das AMP-JS ist kein weiteres JavaScript im Hauptdokument erlaubt. Es kann nur noch über einen iframe, der den Aufbau der Seite nicht blockiert, eingebaut werden
  • Bilder werden im <img-amp> eingebunden, das - im Gegensatz zum <img>-Tag - zwingend mit </img-amp> enden muss.
  • für Bilder müssen feste Höhen und Breitenangaben gemacht werden. Dadurch kann der Platz, den das Bild braucht, vor dem Laden der Ressourcen berechnet und freigehalten werden und der Aufbau der Seite geht auch beim späteren Laden der Bilder ohne Verschiebungen.
  • es dürfen nur Webfonts von white-listed Providern verwendet werden.
  • die Validierung einer AMP-Seite kann über die Entwickler-Tools erfolgen, in dem an die URL der Parameter "#development=1" angehängt wird oder über den Link https://search.google.com/test/amp. 

Welchen Nutzen kann AMP für eine TYPO3-Website haben?

AMP wurde ursprünglich entwickelt, um die Seiten von Publishern auf mobilen Endgeräten zur Verfügung zu stellen. Tatsächlich stehen diese auch unter Druck, AMP-Seiten alternativ zu normalen Seiten anzubieten. So kommen z.B. in das News-Carousel von Google nur AMP-Seiten (erkennbar an dem Blitz rechts oben im News-Teaser):

Beispiel-Ansicht des AMP-News-Carousels von google
Google News-Carousel

Das News-Carousel wird immer öfter auch als Rich-Snippet über dem ganz normalen (generischen) Suchergebnis angezeigt. Es ist also nicht nur auf den News-Bereich von Google begrenzt:

AMP-Carousel im Suchergebnis von Google
AMP-Carousel im Suchergebnis von Google

Über kurz oder lang werden jedoch nicht nur Verlagshäuser, sondern alle professionellen Website-Betreiber, die an einem guten Ranking interessiert sind, AMP implementieren müssen. Auch ohne die Notwendigkeit, in den News-Ergebnissen erscheinen zu müssen. Grund hierfür ist die immer stärkere Fokussierung von Suchmaschinen auf schnelle mobile Webseiten. Aktuell unterhält Google noch zwei verschiedene Indizes: einen für die Suche vom Desktop, einen für die mobile Suche. Der Suchmaschinenbetreiber, hat aber bereits angekündigt, bald nur noch den mobilen Index als Hauptindex weiterführen zu wollen. Gleichzeitig wird immer wieder betont, wie wichtig die Optimierung der Website für mobile Endgeräte ist. Geschwindigkeit und einfache Bedienbarkeit sind dabei entscheidende Faktoren. 

Auch mit TYPO3 ist die Auslieferung von AMP-Seiten möglich! Sollten Sie also das Content Management System TYPO3 im Einsatz haben, können wir Sie als Internetagentur diesbezüglich beraten und Ihnen konzeptionelle Lösungen anbieten und auch realisieren. 

Technisch wird die AMP-Integration über eine if-condition im TYPOSCRIPT-Template realisiert, so dass derselbe Inhalt in zwei verschiedenen Versionen (HTML und AMP) ausgeliefert werden kann. Der Redakteur hat bei dieser Lösung keine zusätzliche Arbeit. Wie das genau funktioniert, erklären wir Ihnen gerne in einem persönlichen Gespräch.

AMP im laufenden TYPO3-Betrieb

Wenn Ihre TYPO3-Website erst einmal auf AMP umgestellt bzw. angepasst wurde, muss der Redakteur im Optimalfall nichts mehr weiter beachten. Die Inhalte werden nach wie vor nur einmal gepflegt und dann von TYPO3 automatisch entweder als HTML- oder AMP-Seiten an den Besucher ausgeliefert. Leider ist der Optimalfall selten die Regel. Es wird immer vorkommen, dass der Redakteur über bestimmte Einstellungen in TYPO3 (z.B. individuelle Formatangaben, direkte Eingabe HTML-Code, etc.) die jeweilige Webseite - ungewollt - "AMP-invalide" macht. Das hat zur Folge, dass sie nicht mehr als AMP-Seite verwendet wird. Egal wie klein/unerheblich der Fehler sein mag. In AMP gibt es nur valide oder nicht vailde.

Wie kann man regelmäßig/automatisch die Webseiten auf AMP-Validität prüfen?

Erfreulicherweise übernimmt Google diese Aufgabe für uns! Voraussetzung ist die Einrichtung der Search Console für die Website. Stößt Google nun auf Seiten, die als AMP deklariert aber nicht gültig sind, wird dem Betreiber der Website (bzw. der Search Console) eine Mail mit Link auf Detailinformaionen in der Search Console geschickt und kann den Fehler so zeitnah beheben:

Google Mail bei fehlerhaften AMP-Seiten
Mail, die von der Search Console bei AMP-Fehlern verschickt wird
Neue search console mit AMP-Analyse
Analyse der AMP-Fehler in der search console

Möchten auch Sie von AMP profitieren?

Als Internetagentur sind wir auf TYPO3 spezialisiert. Wir haben mittlerweile sehr viel Erfahrung mit der Umsetzung von AMP auf TYPO3 und würden Sie gerne unterstützen. Wenn Sie eine TYPO3-Website haben und eine erste, unverbindliche und kostenlose Beratung wünschen, rufen Sie uns am besten einfach an:

0800-9226619

Oder schicken Sie uns einen Terminwunsch über das Schnellkontakt-Formular am Ende dieser Seite.

Links

Offizielle Projekt-Website: https://www.ampproject.org/

Schnelleinstieg und Templates zum Erstellen einer eigenen Seite: https://www.ampstart.com

Sie möchten die Sichtbarkeit Ihrer TYPO3-Website und die User Experience für Ihre Besucher mit AMP verbessern? Dann kontaktieren Sie uns einfach über unten stehendes Schnellkontakt-Formular und wir werden uns umgehend bei Ihnen melden. Für Besuche im Rhein-Main-Gebiet fallen dabei keine Kosten an.