Nutzerorientierte Leistungsmesswerte

Philip Walton

Wir alle wissen, wie wichtig Leistung ist. Aber was genau meinen wir, wenn es um Leistung und darum geht, dass Websites „schnell“ sind?

Fakt ist, dass die Leistung relativ ist:

  • Eine Website kann für einen Nutzer schnell (in einem schnellen Netzwerk mit einem leistungsstarken Gerät) und für einen anderen Nutzer langsam sein (in einem langsamen Netzwerk mit einem Low-End-Gerät).
  • Zwei Websites können den Ladevorgang in genau der gleichen Zeit abschließen, eine der Seiten scheint jedoch möglicherweise schneller zu laden (wenn der Inhalt nach und nach geladen wird, anstatt bis zum Ende zu warten, bis alle Seiten angezeigt werden).
  • Eine Website kann den Eindruck erwecken, dass sie schnell geladen wird, reagiert dann aber langsam oder gar nicht auf Nutzerinteraktionen.

Wenn es um Leistung geht, ist es wichtig, präzise zu sein und sich auf die Leistung in Bezug auf metrics zu beziehen. Objektive Kriterien, die quantitativ gemessen werden können. Es ist aber auch wichtig, sicherzustellen, dass die Messwerte, die Sie messen, nützlich sind.

Messwerte definieren

Bisher wurde die Webleistung mit dem Ereignis load gemessen. Obwohl load ein genau definierter Moment im Lebenszyklus einer Seite ist, entspricht dieser Moment nicht unbedingt dem, was dem Nutzer wichtig ist.

Ein Server könnte beispielsweise mit einer minimalen Seite antworten, die sofort "laden", dann aber das Abrufen von Inhalten oder das Anzeigen von Inhalten auf der Seite einige Sekunden nach dem Auslösen des Ereignisses load verzögert. Eine solche Seite hat technisch gesehen eine schnelle Ladezeit, aber diese Zeit entspricht nicht der Nutzererfahrung, in der die Seite geladen wird.

In den letzten Jahren haben Mitglieder des Chrome-Teams in Zusammenarbeit mit der W3C Web Performance Working Group daran gearbeitet, eine Reihe neuer APIs und Messwerte zu standardisieren, mit denen sich genauer messen lässt, wie Nutzer die Leistung einer Webseite erleben.

Um sicherzustellen, dass die Messwerte für die Nutzer relevant sind, stellen wir ihnen einige wichtige Fragen:

Ist das der Fall? Wurde die Navigation erfolgreich gestartet? Hat der Server geantwortet?
Ist sie nützlich? Wurden genügend Inhalte gerendert, damit Nutzer damit interagieren können?
Ist es nutzungsfreundlich? Können Nutzende mit der Seite interagieren oder ist sie überlastet?
Gefällt es Ihnen? Sind die Interaktionen reibungslos und natürlich ohne Verzögerungen?

So werden Messwerte gemessen

Leistungsmesswerte werden im Allgemeinen auf zwei Arten gemessen:

  • Im Lab:Verwendung von Tools zur Simulation eines Seitenaufbaus in einer konsistenten, kontrollierten Umgebung
  • Im Einsatz: bei echten Nutzern, die die Seite tatsächlich laden und mit ihr interagieren

Keine dieser Optionen ist zwangsläufig besser oder schlechter als die andere. Tatsächlich sollten Sie im Allgemeinen beide verwenden, um eine gute Leistung zu gewährleisten.

Im Labor

Das Testen der Leistung im Labor ist bei der Entwicklung neuer Funktionen sehr wichtig. Bevor Features in der Produktion veröffentlicht werden, ist es nicht möglich, ihre Leistungsmerkmale bei echten Nutzern zu messen. Daher ist es am besten, sie vor Veröffentlichung der Funktion im Labor zu testen, um Leistungsabfälle zu vermeiden.

Vor Ort

Andererseits sind Tests im Labor ein vernünftiger Indikator für die Leistung, spiegeln jedoch nicht unbedingt wider, wie die tatsächlichen Nutzer Ihre Website erleben.

Die Leistung einer Website kann je nach Gerätefunktionen des Nutzers und Netzwerkbedingungen stark variieren. Sie kann auch variieren, je nachdem, ob oder wie ein Nutzer mit der Seite interagiert.

Außerdem sind Seitenladevorgänge nicht immer deterministisch. Beispielsweise können Websites mit personalisierten Inhalten oder Anzeigen von Nutzer zu Nutzer ganz unterschiedliche Leistungsmerkmale aufweisen. Mit einem Labortest können diese Unterschiede nicht ermittelt werden.

Die einzige Möglichkeit, die Leistung Ihrer Website für Ihre Nutzer zu ermitteln, besteht darin, die Leistung beim Laden und Interagieren mit der Website zu messen. Diese Art der Messung wird allgemein als Monitoring für echte Nutzer (Real User Monitoring, RUM) bezeichnet.

Messwerttypen

Es gibt noch einige andere Arten von Messwerten, die dafür relevant sind, wie Nutzer die Leistung wahrnehmen.

  • Wahrgenommene Ladegeschwindigkeit:Wie schnell eine Seite geladen und alle visuellen Elemente auf dem Bildschirm gerendert werden können.
  • Responsivität beim Laden:Hier legen Sie fest, wie schnell eine Seite den erforderlichen JavaScript-Code laden und ausführen kann, damit die Komponenten schnell auf Nutzerinteraktionen reagieren können.
  • Responsivität der Laufzeit:Wie schnell die Seite nach dem Seitenaufbau auf Nutzerinteraktionen reagieren kann.
  • Visuelle Stabilität:Verändern sich Elemente auf der Seite so, dass Nutzer sie nicht erwarten, und stören sie möglicherweise ihre Interaktionen?
  • Flüssigkeit:Werden Übergänge und Animationen mit einer konsistenten Framerate gerendert und fließen flüssig von einem Zustand in den nächsten?

Unter Berücksichtigung all dieser Leistungsmesswerte ist hoffentlich klar, dass kein einzelner Messwert ausreicht, um alle Leistungsmerkmale einer Seite zu erfassen.

Wichtige Messwerte

  • First Contentful Paint (FCP):Dieser Wert gibt die Zeit zwischen dem Laden der Seite bis zu dem Zeitpunkt an, zu dem ein beliebiger Teil des Seiteninhalts auf dem Bildschirm gerendert wird. (Lab, Feld)
  • Largest Contentful Paint (LCP):Hiermit wird die Zeit vom Beginn des Ladens der Seite bis zum Rendern des größten Textblocks oder Bildelements auf dem Bildschirm gemessen. (Lab, Feld)
  • Interaction to Next Paint (INP): misst die Latenz von jedem Tippen, jedem Klick oder jeder Tastaturinteraktion mit der Seite. Basierend auf der Anzahl der Interaktionen wird die niedrigste Interaktionslatenz der Seite (oder die geringste Latenz) als einzelnen, repräsentativen Wert ausgewählt, um die allgemeine Reaktionsfähigkeit einer Seite zu beschreiben. (Lab, Feld)
  • Total Blocking Time (TBT):Misst die Gesamtzeit zwischen FCP und TTI, während der der Hauptthread lange genug blockiert wurde, um eine Reaktionszeit bei Eingaben zu verhindern. (Lab)
  • Cumulative Layout Shift (CLS):Hiermit wird die kumulative Punktzahl aller unerwarteten Layoutverschiebungen gemessen, die zwischen dem Beginn des Ladevorgangs der Seite und dem Status des Lebenszyklus in „Ausgeblendet“ auftreten. (Lab, Feld)
  • Time to First Byte (TTFB): Misst die Zeit, die das Netzwerk benötigt, um auf eine Nutzeranfrage mit dem ersten Byte einer Ressource zu antworten. (Lab, Feld)

In einigen Fällen werden neue Messwerte eingeführt, um fehlende Bereiche abzudecken. In anderen Fällen sind die besten Messwerte speziell auf Ihre Website zugeschnitten.

Benutzerdefinierte Messwerte

Die zuvor behandelten Leistungsmesswerte vermitteln einen allgemeinen Überblick über die Leistungsmerkmale der meisten Websites. Sie sind außerdem gut geeignet, um über gemeinsame Kennzahlen für Websites zu verfügen, anhand derer sie ihre Leistung mit der ihrer Mitbewerber vergleichen können.

Es kann jedoch vorkommen, dass eine bestimmte Website in irgendeiner Weise einmalig ist und zusätzliche Messwerte erforderlich sind, um ein vollständiges Leistungsbild zu erhalten. Mit dem LCP-Messwert soll beispielsweise gemessen werden, wann der Hauptinhalt einer Seite vollständig geladen ist. Es kann aber auch Fälle geben, in denen das größte Element nicht Teil des Hauptinhalts der Seite ist und der LCP daher nicht relevant ist.

Zu diesem Zweck hat die Arbeitsgruppe für Web Performance auch standardisierte untergeordnete APIs standardisiert, die für die Implementierung Ihrer eigenen benutzerdefinierten Messwerte nützlich sein können:

Im Leitfaden zu benutzerdefinierten Messwerten erfahren Sie, wie Sie mit diesen APIs die für Ihre Website spezifischen Leistungsmerkmale messen können.