Performance KPIs im mStudio – So optimierst du die Kennzahlen

Die Web Vitals haben sich als Performance KPIs etabliert. Diese nutzerzentrierten Metriken geben dir indirekt Aufschluss über das Nutzererlebnis deines Webprojekts. Sie zeigen an, wie schnell und stabil deine Seiten im Browser angezeigt werden. Neben den zentralen Metriken (Core Web Vitals) Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und First Input Delay (FID) findest du im mStudio auch Zahlen zur Total Blocking Time (TBT) und der Time To First Byte (TTFB).

LCP beschreibt den Zeitpunkt, an dem das größte sichtbare Element der Website angezeigt wird. Je früher das Haupt-Inhaltselement dem Besucher zur Verfügung steht, desto besser. Häufig handelt es sich dabei um ein Bild, das der Browser im Optimalfall selbstständig identifiziert und noch vor anderen Ressourcen lädt. Das klappt jedoch nicht, wenn das Element dynamisch mit JavaScript nachgeladen oder eingefügt wird (z. B. mit dem HTML-Attribut data-src und einer entsprechenden Bibliothek) oder als CSS-Hintergrundbild umgesetzt wurde. Lade das Stylesheet mittels preload vor, wenn du auf diese Architektur nicht verzichten möchtest. 

Bei Bildern kannst du den Browser auch über das HTML-Attribut fetchpriorty="high" auf das Element hinweisen. Einfluss auf den LCP haben auch die Server-Ladegeschwindigkeit (s. u.) und Stylesheets. Minimiere deshalb deine CSS-Dateien und versuche Anweisungen, die nicht für die initiale Anzeige der Website notwendig sind, in ein anderes Stylesheet auszulagern.

Der CLS misst Verschiebungen von Inhalten, die den Benutzer in seiner Wahrnehmung stören können. Beispiel: Beim Laden einer Bildergalerie kann es passieren, dass Bilder im Browser nach oben oder unten rutschen – je nachdem, welches Bild wann geladen wird. Eine Katastrophe für das Nutzungserlebnis sind nachgeladene Elemente, die Buttons verschieben. Niemand möchte, dass der „Abbrechen“-Button kurz vor dem Klick so verschoben wird, dass man aus Versehen auf „Jetzt bestellen“ klickt.

Den CLS beeinflusst du am einfachsten, indem du alle Bilder und Elemente im CSS mit Größenangaben (width und height) versiehst. Vermeide, spät nachgeladene Inhalte im oberen Bereich der Website. Sonst wird der gesamte Inhalt der Website nach unten geschoben. Inhalte sollten außerdem nur dann hinzugefügt oder verändert werden, wenn das durch eine Benutzerinteraktion angefordert wurde.

Noch bessere Ergebnisse erzielst du, wenn du deine Website für den Back/forward Cache (_bfcache) des Browsers optimierst. Dabei wird die Website im RAM zwischengespeichert und muss so beim Rückwärts- und Vorwärts-Scrollen des Benutzers nicht neu gerendert werden.

Die TBT ist die Zeit, in der der Browser nicht auf Eingaben des Benutzers reagieren kann, weil er mit Berechnungen beschäftigt ist. Dieser Wert wird zukünftig durch die Interaction to Next Paint (INP) ersetzt. Beide Metriken beschreiben mehr oder weniger das gleiche Phänomen. Verursacher für einen schlechten TBT sind häufig aufwendige JavaScript-Applikationen oder Third Party Code, der nachgeladen werden muss. Versuche deshalb, den Einsatz von Third Party Tools zu reduzieren und halte die Anzahl und Größe geladener Assets klein.

Der FCP beschreibt den Zeitpunkt, an dem der Besucher irgendeinen Inhalt sieht. Dagegen zeigt der SI, wie lange der Browser insgesamt für die Darstellung der sichtbaren Elemente braucht. Beide Metriken beeinflusst du am einfachsten, indem du LCP, CLS und TBT wie beschrieben optimierst. Übrigens: Aus allen 5 Werten bemisst sich der Performance Score, der im mStudio für deine Webseite berechnet wird.

Bevor eine Website angezeigt werden kann, muss sie auf dem Server erzeugt und ausgeliefert werden. Die hierfür benötigte Zeit ist die TTFB. Die geografische Position des Besuchers kann dabei eine nicht unerhebliche Rolle spielen. Der Aufruf deiner Website aus einem anderen Kontinent kann deutlich länger dauern. Darum lohnt es sich, auf den Wert Server Processing zu schauen. Er beschreibt die Zeit, die der Server für die Generierung der Seite braucht – ohne die Zeit, die der Übertragungsweg für sich beansprucht. Server Processing hat also direkten Einfluss auf alle Web Vitals.

Um die Generierungszeit zu reduzieren, ist Caching die effizienteste Methode. Alle gängigen Content Management- und Shop-Systeme bieten viele Möglichkeiten, Inhalte zu cachen. Wie du etwa Redis in deine Systeme einbindest, liest du in diesem Blogartikel.

Kann die Anfrage nicht mit dem Cache beantwortet werden, muss der Server in der Regel Informationen von einer Datenbank erhalten. Datenbankverbindungen können Websites spürbar ausbremsen, wenn die Datenbank nicht richtig indiziert ist oder extrem viele Anfragen an die Datenbank gestellt werden müssen.

Die Kennzahl Start To Render gibt dir ein Gespür dafür, ab wann der Browser genug Assets geladen hat, um die ersten Inhalte zu rendern. Dieser Wert liegt also zwischen TTFB und vor LCP. Anhand von Fully Loaded erkennst du, wann die Webseite vollständig geladen ist. Ist dieser Wert hoch, werden im Hintergrund noch lange Daten nachgeladen. Der Benutzer kriegt das nicht unbedingt mit. Es wirkt sich jedoch negativ auf den Gesamtstromverbrauch der Website aus. Durch Content Downloaded erfährst du, wie viele Inhalte transferiert werden. Je größer, desto schlechter, insbesondere für mobile Endbenutzer. Einfache Regel hierbei: Optimiere und komprimiere Bilder, nutze auflösungsunabhängige Medien (z.B. das Grafikformat SVG), reduziere die Anzahl der nachgeladenen Assets (z. B. externe Schriftarten oder Videos) und lagere Stylesheets und Javascript-Code in eigene Dateien aus.

The Green Web Foundation stellt Techniken bereit, mit denen der CO₂-Verbrauch eines Websiteaufrufs geschätzt werden kann. Dabei fließen alle Faktoren ein, die zum Besuch einer Website notwendig sind: die Generierung auf dem Server, die Übertragung über das Internet, die Anzeige auf dem Endgerät des Besuchers und die Produktionsemissionen aller hierfür notwendigen Hardware. Der Bärenanteil der Emissionen (über 50 %) geht auf das Konto des Endgeräts. Mit der Optimierung der oben genannten Metriken kannst du hierauf Einfluss nehmen. Weitere effiziente Maßnahmen sind die Implementation eines Dark Modes sowie die Reduzierung von Hintergrundberechnungen und aufwendigen Animationen.

Die Emissionen, die durch die Produktion der beteiligten Geräte entstehen, kannst du nicht beeinflussen. Aber je kleiner die übertragene Datenmenge ist und je besser das Caching auf deinem Server konfiguriert ist, desto mehr CO₂ sparst du ein. Es lohnt sich also, Bilder und Videos an die Nutzungssituation und das Endgerät des Benutzers anzupassen.

Übrigens: Der CO₂-Vorteil, den du dadurch hast, dass wir unser Rechenzentrum mit Ökostrom betreiben, wird in der Kennzahl CO₂ pro Aufruf bereits eingerechnet.

Du kannst an einigen Stellschrauben drehen, um die Performance deiner Seiten zu verbessern. Diese Tipps helfen dir dabei weiter:

• Baue Webseiten nach dem „Mobile First“-Prinzip. Stelle für deine Seite eine Variante für mobile Endgeräte bereit. Responsive Design und optimierte Bilder tragen zu guten Web Vitals bei.
• Verbessere die Ladegeschwindigkeit deiner Website, indem du das Caching deines CMS aktivierst.
• Vermeide große, unkomprimierte Bilder. Auch Videos können drastischen Einfluss auf die Performance deiner Website haben.
• Mit leichten, schlanken Themes und wenig Plugins, Scripts und Third-Party-Bibliotheken reduzierst du die Gesamtlast. Externe Ressourcen von anderen Servern können ungewollte Wartezeiten mit sich ziehen.