Performance KPIs im mStudio – So optimierst du die Kennzahlen

|
So optimierst du die Kennzahlen
Jedes Projekt muss schnell sein. Klar, über Lighthouse kannst du die meisten Performance-Werte jederzeit checken. Aber: Es ist eben noch ein Tool, das du im Blick haben musst. Das kannst du dir sparen. Denn im mStudio hast du die wichtigsten Kennzahlen auf einen Blick. Zu den angezeigten KPIs gehören die Web Vitals, aber auch Werte, die du sonst nicht einfach so ausgeliefert bekommst (z.B. CO₂ pro Aufruf). Wie du deine Kennzahlen optimieren kannst, liest du in diesem Artikel.

Web Vitals

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).

So verbesserst du den Largest Contentful Paint (LCP)

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.

Ansicht der Metriken im mStudio
Die Performance KPIs sind für jedes Projekt im mStudio verfügbar.

Cumulative Layout Shift (CLS) optimieren

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.

Total Blocking Time (TBT) verkürzen

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.

First Contentful Paint (FCP) und Speed Index (SI) pushen

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.

Time To First Byte (TTFB) und Server Processing verbessern

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.

Start To Render, Fully Loaded und Content Downloaded optimieren

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.

Der Performance Score bemisst sich aus 5 Werten.

CO2 pro Aufruf

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.

Diese Maßnahmen helfen dir

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.

Tipp!

Du hast ein außergewöhnliches Projekt, das besonders viel Liebe braucht? Dann ist der proSpace das perfekte Hosting dafür. Warum? Du kannst deinem Projekt dedizierte Ressourcen geben und Node.js & Redis fully managed draufpacken. Teste den proSpace jetzt kostenlos!

Ähnliche Artikel:

Automatisiere deine Hosting-Prozesse
Hosting

mStudio API – Automatisiere deine Prozesse

Mit der API kannst du alle Prozesse des mStudios in deine individuelle Umgebung integrieren. Für Infos für Tipps geht's hier lang.

Datenbank-Turbo für deine Projekte
Hosting

Redis auf dem Space-Server – Datenbank-Turbo für deine Projekte

Minimiere mit Redis die Ladezeiten deiner Projekte auf dem Space-Server. Wie du die Datenbank verwendest und einrichtest, liest du hier.

3 Tipps für dein Projekt
Webentwicklung

Shopware – 3 Tipps für kürzere Ladezeiten

Nichts ist für Onlineshops schlechter als lange Ladezeiten. Mit diesen 3 Tipps kannst du deine Ladezeiten deines Shopware Projekts reduzieren.

Kommentare

Webdesigner Mirko am
Hey Sebastian,

gute Zusammenfassung und coole Sache mir der "Green Web Foundation". Kannte ich noch nicht! Und schön zu sehen, dass alle meine Seiten, v.a. auch die bei euch liegenden Kundenseiten, Grün sind :)

Ich fände es schön, wenn Ihr weiterhin über das Thema Nachhaltigkeit berichten würdet!

LG aus Köln
Thorsten Heß am
Eine sehr coole und hilfreiche Sache.
Wieder ein Punkt der das mStudio für uns zu einem wertvollen Tool macht das uns viel Zeit erspart.

Danke!
webentwicklung agentur berlin am

Danke für die hilfreichen Tipps, Sebastian