Eine Core Web Vital-Anleitung für TYPO3-Benutzer

In der heutigen Welt der digitalen Inhalte lieben die Suchmaschinen schnelle Websites, und langsame Websites verlieren Besucher. Um die Frage "Ist meine Website schnell genug?" zu beantworten, muss man die Begriffe "schnell" und "ausreichend" definieren. 

Eine gute Faustregel ist der Doherty-Schwellenwert:

Diese Schwelle geht auf Walter J. Doherty und Ahrvind J. Thadani von IBM zurück, die erkannten, dass die Rechenzeit Auswirkungen auf das Geschäft hat. (Mehr dazu erfährst Du in dieser Neuauflage ihres Papiers The Economic Value of Rapid Response Time). Eine effiziente Leistung deiner Website ist eine wirtschaftliche Voraussetzung, denn eine langsame Website bedeutet für dich Geschäftseinbußen.

Die Anzeige einer Webseite in einem Browser erfordert einen komplexen Rendering-Prozess. Jeder Engpass in dieser Lieferkette kann die Leistung stark beeinträchtigen. Um eine schnelle Bereitstellung von Inhalten zu gewährleisten, müssen Webentwickler viele bewegliche Teile optimieren. Aber welche? Ein sorgfältig ausgearbeiteter Satz von Webseitenmetriken kann helfen, sie zu identifizieren.

In dieser Einführung befassen wir uns mit drei grundlegenden Metriken für die Webseitenleistung. Du wirst erfahren, was die drei Core Web Vitals sind, welche Aspekte sie messen und welche Ergebnisse du anstreben solltest. Dann werden wir uns ansehen, wie man diese Kennzahlen mit TYPO3 verbessern kann und wie man sie überwacht, um eine hohe Seitenleistung zu erhalten.

Was sind Core Web Vitals?

Die Web Vitals-Initiative von Google ist ein standardisierter Satz von Metriken, die Entwicklern helfen sollen zu verstehen, wie Nutzer eine Webseite erleben. Im Mai 2020 hat Google drei dieser Kennzahlen definiert, um Entwicklern zu helfen, sich auf die wichtigsten Kennzahlen für die Bewertung der Website-Leistung zu konzentrieren - diese werden Core Web Vitals genannt.

Google legt die Core Web Vitals-Metriken und ihre zugehörigen Schwellenwerte als Largest Contentful Paint (LCS), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS) fest. Diese beziehen sich auf Verzögerungen beim Laden der Seite und bei der Benutzerinteraktion sowie auf die visuelle Stabilität. Sehen wir uns jeden dieser Punkte im Detail an.

LCP: Largest Contentful Paint (Ladeleistung)

Die meisten Benutzer betrachten eine Seite als gebrauchsfertig, wenn fast der gesamte Inhalt auf dem Bildschirm gerendert ist. Daher misst die LCP-Metrik (Largest Contentful Paint) die Zeit vom Beginn des Ladevorgangs der Seite bis zum Abschluss des Renderings des größten Blocks (egal ob es sich um einen Textblock oder ein Bild handelt), der innerhalb des aktuellen Viewports sichtbar ist.

Diese Metrik ist viel genauer als die einfache Messung der Zeit, die die Seite zum vollständigen Laden benötigt.

Eine vollständig geladene Seite umfasst die Teile einer Seite, die sich entweder außerhalb des Ansichtsfensters befinden, sowie Teile, die nicht zum sichtbaren Inhalt beitragen, wie z. B. Skripte, die für eine spätere Interaktion benötigt werden. LCP ignoriert diese Teile.

Welchen LCP-Zielwert sollten Websites anstreben? Google schlägt vor, drei Kategorien für die Bewertung von LCP zu verwenden:

• Ein guter LCP-Wert ist 2,5 Sekunden oder weniger
• Eine LCP zwischen 2,5 und 4,0 Sekunden wird als "verbesserungsbedürftig" eingestuft.
• Alles, was über 4,0 Sekunden hinausgeht, wird als "schlecht" eingestuft.

INP: Interaction to Next Paint (Reaktionsfähigkeit)

Nachdem eine Seite geladen wurde, erwarten die Nutzer schnelle Reaktionen bei der Interaktion mit dieser Seite. Darum geht es bei der Metrik "Interaktion bis zum nächsten Bild" (INP). INP erfasst die Reaktionszeiten auf Benutzerinteraktionen (Mausklicks, Berührungen des Touchscreens und Tastenanschläge), während eine Seite geöffnet ist. Sie berichtet die längste dieser Reaktionszeiten und versucht, Ausreißer zu ignorieren.

INP ist der Nachfolger von First Input Delay (FID). Dies gilt ab März 2024.  FID misst die Zeit zwischen der ersten Interaktion eines Nutzers mit einer Seite und dem Zeitpunkt, an dem der Browser tatsächlich mit der Verarbeitung dieses Ereignisses beginnt. INP hingegen erfasst alle Interaktionen auf einer Seite und ist daher ein zuverlässigerer Indikator für die allgemeine Reaktionsfähigkeit.

Die idealen INP-Werte liegen im selben Bereich wie der Doherty-Schwellenwert (gemessen in 100 Millisekunden):

• Ein INP unter 200 ms ist gut
• Ein INP zwischen 200 ms und 500 ms ist verbesserungsbedürftig.
• Ein INP über 500 ms wird als schlecht angesehen.

CLS: Cumulative Layout Shift (optische Stabilität)

Wenn Du schon einmal versucht hast, auf eine Schaltfläche zu klicken und dann versehentlich auf eine benachbarte Schaltfläche geklickt hast, weil der Seiteninhalt plötzlich nach oben oder unten verschoben wurde, weißt Du, was Cumulative Layout Shift (CLS) ist und wie ärgerlich das sein kann.

Die CLS-Metrik misst Layoutverschiebungen, indem sie sichtbare Elemente betrachtet, die während des Ladens der Seite unerwartet ihre Position ändern. Die Metrik berechnet dann eine Punktzahl, die darauf basiert, wie stark sich diese Elemente verschieben und welchen Teil des Ansichtsfensters die Verschiebung betrifft. Dieser Wert sollte so nahe wie möglich bei Null liegen:

• Ein CLS-Wert unter 0,1 ist gut.
• Ein CLS zwischen 0,1 und 0,25 muss verbessert werden.
• Alles, was darüber liegt, gilt als schlecht.

Tipp: Der Layout Shift GIF Generator ist ein kostenloses und quelloffenes Tool, das Layoutverschiebungen in ein animiertes GIF für eine schnelle Bewertung umwandelt.

Warum sind die Core Web Vitals wichtig?

Die drei Core Web Vitals messen sehr spezifische und recht technische Aspekte der Lebensdauer einer Seite. Was macht diese drei Metriken so besonders? Warum sollten UX-Designer und Webentwickler genau diese Kennzahlen für die Bewertung der Webseitenleistung verwenden?

Die Core Web Vitals von Google sind eine Möglichkeit, Schlüsselaspekte des Nutzererlebnisses zu quantifizieren. Ein Aspekt ist das "Seitenerlebnis", das sich darauf bezieht, "wie Nutzer die Interaktion mit einer Webseite wahrnehmen". Google hat herausgefunden, dass diese drei Kernmetriken fast den gesamten Unterschied bei der Messung der Nutzererfahrung einer Seite ausmachen.

Wenn Du eine Seite dahingehend verbesserst, dass diese drei Metriken gut bewertet werden, wirst Du wahrscheinlich ein erhöhtes Nutzerengagement, eine verbesserte Nutzererfahrung und -zufriedenheit und letztendlich einen positiven Einfluss auf die Konversionsraten und den Umsatz beobachten können.

Ein weiterer zu berücksichtigender Faktor ist das Google-Suchranking. Wenn die Core Web Vitals einer Seite die von Google festgelegten Schwellenwerte erfüllen, erhält die Seite wahrscheinlich bessere Platzierungen.

Zusammenfassend lässt sich sagen, dass eine Seite mit hohen Core Web Vitals mehr Besucher anzieht und sie dazu bringt, länger auf der Seite zu bleiben. Dies sind zwei gute Gründe, sich diese Metriken genauer anzusehen und zu überlegen, wie man eine TYPO3-Website so optimieren kann, dass sie bei allen drei Core Web Vitals Spitzenwerte erzielt. 

Wie man Core Web Vitals in TYPO3 optimieren kann

Was können Designer, Entwickler und Administratoren einer TYPO3-Website tun, um die Core Web Vitals in die Höhe zu treiben? Hier sind einige Tipps und Quick Wins.

TYPO3-Funktionen, die bei der Optimierung der Core Web Vitals helfen

TYPO3 verfügt über praktische, integrierte Funktionen, die zu einer besseren Platzierung in diesen Metriken beitragen können: Caching, Unterstützung für Lazy Loading und asynchrones Laden von JavaScript.

Caching

Optimales Caching ist ein großer Schritt zu hohen Core Web Vitals-Werten. TYPO3 verfügt über mehrere Caching-Strategien und wählt je nach Anwendungsfall (statische, halbstatische oder dynamische Seiten) die beste aus. Die einfache Regel lautet jedoch: Je cache-freundlicher Ihr Seitendesign ist, desto besser können die Seiten ranken.

Langsames Laden von Bildern

Bestimmte Elementtypen, vor allem Bilder, können nach dem Rendering des Hauptinhalts nachgeladen werden. TYPO3 unterstützt das "Lazy Loading" von Bildern standardmäßig für alle Inhalte im Fluid-Stil. Wenn Sie benutzerdefinierte Fluid-Vorlagen verwenden, stellen Sie sicher, dass Ihre Vorlagen das Attribut "loading" wie folgt verwenden:

<f:image src="{file.uid}" treatIdAsReference="1" loading="{settings.media.lazyLoading}" />

Automatische Bildoptimierung

Die Bildgröße kann die Ladeleistung einer Seite erheblich beeinträchtigen. Bilder, die einer Seite unbearbeitet hinzugefügt werden, sind oft zu groß und mit einem niedrigen Kompressionsverhältnis komprimiert. Erweiterungen wie b13/picture wandeln Bilder in das von Ihnen benötigte Format um.

Oft vernachlässigt: Aufräumen von ungenutztem Code

Bei jedem Webprojekt besteht die Gefahr, dass sich Skripte und CSS-Konfigurationen ansammeln, die nicht mehr verwendet werden. Dennoch gibt der Webserver diese Artefakte an die Browser weiter, wo sie die Leistungsmetriken beeinträchtigen. Tools wie PageSpeed Insights zeigen an, ob es alten, ungenutzten Code gibt, den man loswerden muss.

Wie man Core Web Vitals und die Gesamtleistung der Website überwacht

Bevor Du mit der Optimierung Ihrer Website beginnen kannst, musst Du zunächst Core Web Vital-Metriken sammeln. Glücklicherweise sind Tools wie Lighthouse in die Browserkonsole integriert (bei Chromium-basierten Browsern) oder als Erweiterung verfügbar, sodass Du sofort mit der Messung beginnen kannst. Und nachdem Du Deinen Code optimiert hast, wirst Du wahrscheinlich regelmäßige Messungen durchführen wollen, um sicherzustellen, dass sich die Metriken nicht verschlechtern.

Wenn Du suboptimale Core Web Vitals-Messungen hast, aber nicht sicher bist, wo Du mit der Suche nach den Schuldigen beginnen sollst, kannst Du einen allgemeinen Leistungstest mit Blackfire durchführen, um die Leistungsengpässe auf PHP-Ebene zu identifizieren. Von dort aus kannst Du Dich durch die Behebung der langsamsten Teile arbeiten, bis die gewünschte Leistung erreicht ist.

Wichtigste Erkenntnis: Die Verbesserung von nur drei Messgrößen kann einen großen Unterschied ausmachen

Core Web Vitals sind der Herzschlag der Benutzerfreundlichkeit. Sie signalisieren Probleme wie langsame Ladezeiten, schleppende Interaktion oder ruckelnde Layouts, die die Besucher abschrecken.

Die gute Nachricht ist, dass Core Web Vitals messbar und kontrollierbar sind. Der erste Schritt besteht darin, die Elemente zu identifizieren, die eine niedrige Punktzahl verursachen. Dann können Designer, Entwickler und Website-Administratoren gezielte Optimierungen vornehmen, um die Benutzerfreundlichkeit zu verbessern.

Wenn Du Deine Core Web Vitals vernachlässigst, verlierst Du Umsätze und Kunden. Ergreifst Du Maßnahmen zur Optimierung dieser Metriken und schaffst ein reibungsloses Website-Erlebnis für Deine Besucher.