TYPO3 & Core Web Vitals

Die sog. Core Web Vitals sind inzwischen nicht nur in der SEO-Branche ein Begriff und könnten zukünftig massiven Einfluss auf die technische Umsetzung von Webseiten mit sich bringen.
Was es damit auf sich hat und wie mit TYPO3 die von Google genannten Kriterien erfüllt werden können soll in diesem Artikel beleuchtet werden.

Google hat in einem Blogpost im Mai 2020 den Einbezug der sog. Core Web Vitals in den Rankingsalgorithmus angekündigt.
Diese sind im Kontext der Page Experience - als der Usererfahrung auf den aus der Googlesuche verlinkten Seiten - zu sehen. Google hat in den letzten Jahren verschiedene Themen kommuniziert, die in diesem Zusammenhang zu berücksichtigen sind:

• Optimierung für Mobilgeräte (Feb. 2015) - Webseiten sollten auf mobilen Geräten vernünftig dargestellt werden
• Safe Browsing (Sept. 2016) - Warnung bei Malware auf Webseiten
• HTTPS-Sicherheit (Nov. 2016) - Webseiten sollen nur noch via https kommunizieren
• Richtlinien zur Vermeidung störender Einflüsse in der mobilen Erfahrung (Aug. 2016) - keine allzu störenden und den Inhalt überlagernden Popups (Cookiebanner sind hiervon (theoretisch) ausgenommen)

Im Mai 2020 wurden ergänzend dazu die Core Web Vitals angekündigt.

Ziel der genannten Iniviativen von Google ist es uns als User theoretisch nur die Seiten anzuzeigen, die sich möglichst optimal nutzen lassen. In der Praxis sieht es natürlich häufig anders aus, der Trend der Entwicklung ist dennoch klar.

Realistisch betrachtet führt Google solche Algorithmusänderungen nur indirekt zu Gunsten der User durch. Was Google beabsichtigt: wir sollen weiter Google nutzen! Und das machen wir User auf die lange Sicht nur dann, wenn wir mit den gelieferten Ergebnissen auch zufrieden sind, wozu neben den passenden Inhalten eben auch eine angenehme Nutzbarkeit sowie schnelle Ladezeiten - insbesondere auf mobilen Endgeräten - gehören.

Nach oben

Die kurze Antwort: das können wir zum aktuellen Zeitpunkt nur erahnen.
Die lange Antwort: genaues lässt sich nicht sagen, aber:

• Google hat mehrfach auf die Core Web Vitals verwiesen (was ansonsten selten vorkommt)
• Google hat den Starttermin von Januar 2021 auf Mai 2021 verschoben, um den Webseitenbetreibern mehr Zeit zu geben
• Es gibt Gerüchte, dass Seiten die die Kriterien der Core Web Vitals erfüllen in den (mobilen) Suchergebnissen hervorgehoben werden. Auch für den Chromebrowser gibt es schon länger Ansätze langsame Seite vor dem eigentlichen Aufruf zu markieren. Solche Lösungen könnten das Klickverhalten der User spürbar beeinflussen

Diese Punkte deuten insgesamt stark darauf hin, dass wir mehr als nur kleine Rankingveränderungen erwarten können, zumindest auf die mittlere Sicht.

Nach oben

Grundlegend gibt es zwei Ansätze die Core Web Vitals zu messen:

• Felddaten: Diese gewinnt Google über reale Userdaten die mittels Chromebrowser ermittelt werden. Zu sehen bekommt man diese erst, wenn Google ausreichend Daten gesammelt hat. Erfahrungsgemäß heißt das mehrere Tausend Besucher pro Monat. Diese Daten sind entsprechend genau und spiegeln die Performance der Webseite im Feld wider. Die Felddaten aktualisieren sich aufgrund der Erhebungsmethode auch nicht sofort, sondern erst im Laufe der Zeit - wenn also wieder genügend Daten gesammelt wurde. Das kann auch mehrere Wochen dauern!
• Labdaten: hier prüft Google einen Seitenaufruf mittels des Open Source Tools Lighthouse und simuliert ein mobiles Gerät mit Mobilfunknetz. Diese Daten stehen immer sowie sofort zur Verfügung, weichen aber teilweise extrem von den Felddaten - sofern die vorhanden sind - ab.

Wichtig: jede URL kann unterschiedliche Werte haben! Es ergibt also Sinn alle wichtigen Seiten(typen) zu testen.

Nach oben

Hinweis: die Zahl bei den Pagespeed Insights errechnet sich auch einer Mischung von Feld- und Labdaten.

3.) Chromebrowser Plugin: Es gibt für den Chromebrowser auch Plugins um Lighthouse direkt über den Browser nutzen zu können.

Nach oben

In den Felddaten erscheint zusätzlich nur die Nr. 4:

• FCP - First Contentful Paint: Bestimmt die Zeit die vergeht bis der User beim Ladeprozess etwas sieht.

Fragen? Hier geht es zum Kontaktformular

TYPO3 ist von Grund auf für die Core Web Vitals gut aufgestellt. Die Nutzung aktueller PHP Versionen, ausgefeiltes Caching, eine qualitative Codebasis, Nutzung von PHP Standard Recommendation Konzepten, Standards für Plugins, schlanke Codeausgabe im Frontend, viele vorhandene Konfigurationsoptionen über die TYPO3 Webseiten beschleunigt werden können, standardmäßig lazy loading für Bilder aktiv, keine "Pluginitis", also keine Notwendigkeit unzählige Plugins einzusetzen, Vorhandensein wichtiger SEO Funktionen... mit TYPO3 liegen beste Voraussetzungen für gute Core Web Vital Werte vor.

Nach oben

In jeden Fall sollte eine aktuelle TYPO3 Version (Stand 2021: TYPO3 10 oder 11) sowie eine möglichst hohe PHP Version (Stand 2021: 7.3+) eingesetzt werden. Damit haben wir schon mal eine gute Grundlage geschaffen. Das Hosting sollte ebenfalls solide sein, es muss aber in vielen Fällen kein Webserver o.ä. sein. Nach meiner Erfahrung laufen auch größere Webseiten mit mehreren Tausend Besuchern pro Monat auf einem vernünftigen Shared Hosting schnell und problemlos. Natürlich sind mit einem eigenen Webserver noch tiefergehende Einstellungen und Optimierungen denkbar.

Folgende typoscript-Konfigurationen sind empfehlenswert:

config.no_cache = 0 # caching ist aktiv, dieser Punkte ist extrem wichtig!
config.concatenateCss = 1 # Zusammenfassung von CSS Dateien
config.concatenateJs = 1 # Zusammenfassung von JS Dateien
config.compressCss = 1 # Minimierung von CSS Dateien
config.compressJs = 1 # Minimierung von JS Dateien
config.removeDefaultJS = 1 # entfernt Standard JS (wird für den Spamschutz von Mailadresse verwendet)

Des Weiteren sollte das TYPO3-System auf live-Betrieb gestellt sein.

Hier empfiehlt sich die von TYPO3 mitgelieferte Standard-htaccess zu verwenden. Diese findet sich unter \typo3\sysext\install\Resources\Private\FolderStructureTemplateFiles\root-htaccess. Damit werden wichtige Einstellungen zu Browsercaching und komprimierter Übertragung gesetzt.

Eine regelmäßige Bereinigung der Datenbank über eine entsprechende Planer-Aufgabe (gelöschte Einträge final entfernen, Table garbage collection (alte sys-logs entfernen) usw.) kann dazu beitragen diese schlank zu halten und ein unnötig großes Datenbankwachstum zu verhindern. Je nach Datenbankgröße und -performance kann diese Konfiguration ebenfalls einen Beitrag für eine schnellere Seite sein.

Ein regelmäßiger Blick in den Ordner /typo3temp/var/log/ ist in jedem Fall empfehlenswert.
Dort findet sich mit hoher Wahrscheinlichkeit die Datei typo3_1234567.log. In dieser werden generelle Fehler/Warnung entsprechend der Loggingeinstellungen mitgeloggt. Die Datei kann im Laufe der Zeit enorm anwachsen und kann bedenkenlos gelöscht werden. TYPO3 erzeugt diese mit dem nächsten Fehler neu.
Es wäre sicherlich auch sinnvoll, den Fehlern auf den Grund zu gehen und diese zu beheben!

Beim Templating (im Sinne der Umsetzung eines Designs) kann man viel gewinnen, aber auch viel verlieren. Dieser Punkt ist entscheidend für eine schnelle Seite. Der beste Webspace oder Server bringt nicht viel, wenn das Template an sich nicht gut aufgebaut ist.
Generelle Konzepte sind hier zu finden.

Ein paar konkrete Hinweise:

• notwendiges/kritisches (oder zur Not auch das komplette CSS) in der Header, alles andere (insbesondere sämtliches JavaScript) in den Footer
• der komplette Code sollte schlank und übersichtlich gehalten werden:
  • Zahl der unterschiedlichen Inhaltselemente gering halten
  • Generell schlanken Code (html, css, js...) schreiben
  • Code (insb. html) nicht unnötig verschachteln. Am Ende sollte ein gutes Text/Code-Verhältnis herauskommen
  • Verzicht auf unnötige Spielereien (Slider, Ladeeffekte, animierte Mauszeiger...), das will außer der Geschäftsleitung keiner sehen ;-)
  • One-Solution-Ansatz: für jedes Element nur eine Lösung (also z.B. nur EINE Akkordeonlösung, nicht mehrere)
  • JavaScript effizient schreiben
  • Vermeidung von veraltetem Code, Browserweichen o.ä.
• Reduzierung von Webfonts
• Soweit sinnvoll (!) möglich Verzicht auf umfangreiche, fertige Bibliotheken. Komplett auf bootstrap und co zu verzichten ist in vielen Fällen unrealistisch. Aber darüber hinaus sollte sehr sparsam mit weiteren (JS)Frameworks umgegangen werden
• Plugins ja, aber nur wo sie auch nötig sind. Idealerweise möglichst wenig Plugins einsetzen
• Einsatz moderner Bildformate (.webp)
• Iconfonts nur wo notwendig und sinnvoll (bei wenigen Icons besser Grafiken (ggf. sprites) verwenden)
• modernes CSS/JS/HTML sowie Bildformate (.webp) nutzen

• Caching aktiv? Wirklich für ALLE Elemente?
• Lazy loading für alle Bildelemente, iframes etc. aktiv? (Für alle TYPO3-Standardelemente greift es bereits automatisch)
• User geschult, nicht 10mal am Tag den kompletten Cache zu leeren?
• TYPO3 aktuell?
• PHP auf 7.3+?
• CSS/JS zusammengefasst und minimiert (siehe oben)

Nach oben

Zwei Erweiterungsempfehlungen:

1. static file cache: hiermit wird ein statischer cache aufgebaut, welcher eine TYPO3 Webseite spürbar beschleunigen kann
2. webp: wandelt vorhandene Bilder in .webp um und integriert eine Fallback Lösung. Das Bildformat .webp spart bei gleicher Qualität um die 50-60 % an Dateigröße ein
3. frontend performance: minimiert den Quellcode und minifiziert das JavaScript

Nach oben

Mit einer guten TYPO3 Webseite sollte es problemlos möglich sein die Kriterien der Core Web Vitals gänzlich zu erfüllen.
Tipp: Wer gerade an seiner Webseite optimiert: einfach diesen Test durchführen und einen vorher/nachher Vergleich machen. Kann spannend sein.

Fragen? Einschätzung gewünscht? Vorschläge? Einfach melden!

Nach oben

• Optimize for Core Web Vitals: https://www.youtube.com/watch?v=AQqFZ5t8uNc
• Kritischer Renderung Pfad: https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=de
• Can I use... Support tables for HTML5, CSS3, etc: https://caniuse.com/
• Core Web Vitals: https://web.dev/vitals/

Nach oben