Nutzerorientierte Leistungsmesswerte

Philip Walton

Wir alle wissen, wie wichtig die Leistung ist. Aber was genau meinen wir, wenn wir von Leistung und von „schnellen“ Websites sprechen?

Die Leistung ist relativ:

  • Eine Website kann für einen Nutzer (mit einem schnellen Netzwerk und einem leistungsstarken Gerät) schnell, für einen anderen Nutzer (mit einem langsamen Netzwerk und einem Low-End-Gerät) aber langsam sein.
  • Zwei Websites können in genau derselben Zeit geladen werden, eine scheint jedoch schneller zu laden, wenn Inhalte nach und nach geladen werden, anstatt bis zum Ende zu warten, um etwas anzuzeigen.
  • Eine Website erscheint zwar schnell zu laden, reagiert dann aber langsam (oder gar nicht) auf Nutzerinteraktionen.

Wenn Sie über Leistung sprechen, ist es wichtig, präzise zu sein und die Leistung in Form von Messwerten zu beschreiben. Es sollten objektive Kriterien sein, die quantitativ gemessen werden können. Es ist aber auch wichtig, dass die Messwerte nützlich sind.

Messwerte definieren

Bisher wurde die Webleistung mit dem Ereignis load gemessen. Auch wenn load ein klar definierter Moment im Lebenszyklus einer Seite ist, entspricht dieser Moment nicht unbedingt etwas, das für den Nutzer wichtig ist.

Ein Server könnte beispielsweise mit einer Minimalseite antworten, die sofort „geladen“ wird, aber das Abrufen von Inhalten oder das Anzeigen von Inhalten auf der Seite erst einige Sekunden nach dem Auslösen des Ereignisses load verschiebt. Technisch gesehen hat eine solche Seite eine kurze Ladezeit, aber diese Zeit entspricht nicht der Wahrnehmung der Nutzer.

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 die Nutzerfreundlichkeit einer Webseite genauer gemessen werden kann.

Damit die Messwerte für Nutzer relevant sind, formulieren wir sie anhand einiger wichtiger Fragen:

Tritt das Problem auf? Wurde die Navigation gestartet? Hat der Server geantwortet?
Ist das hilfreich? Wurden genügend Inhalte gerendert, damit Nutzer damit interagieren können?
Ist es nutzerfreundlich? Können Nutzer mit der Seite interagieren oder ist sie ausgelastet?
Ist es ansprechend? Sind die Interaktionen reibungslos und natürlich, ohne Verzögerungen?

So werden Messwerte erfasst

Leistungsmesswerte werden in der Regel auf eine von zwei Arten gemessen:

  • Im Lab:Mit Tools wird der Seitenaufbau in einer einheitlichen, kontrollierten Umgebung simuliert.
  • In der Praxis: von echten Nutzern, die die Seite tatsächlich laden und mit ihr interagieren

Keine dieser Optionen ist unbedingt besser oder schlechter als die andere. Tatsächlich sollten Sie in der Regel beide verwenden, um eine gute Leistung zu erzielen.

Im Labor

Die Leistung im Labor zu testen, ist bei der Entwicklung neuer Funktionen unerlässlich. Bevor Funktionen in der Produktion veröffentlicht werden, ist es unmöglich, ihre Leistungsmerkmale an echten Nutzern zu messen. Daher ist es am besten, sie vor der Veröffentlichung im Lab zu testen, um Leistungsregressionen zu vermeiden.

Im Außendienst

Andererseits sind Tests im Lab zwar ein vernünftiger Proxy für die Leistung, sie spiegeln aber nicht unbedingt wider, wie echte Nutzer Ihre Website erleben.

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

Seitenladezeiten sind auch nicht immer deterministisch. Beispielsweise können auf Websites, auf denen personalisierte Inhalte oder Anzeigen geladen werden, die Leistungsmerkmale von Nutzer zu Nutzer stark variieren. Diese Unterschiede werden in einem Labortest nicht erfasst.

Die einzige Möglichkeit, die Leistung Ihrer Website in Hinblick auf die Nutzererfahrung zu messen, besteht darin, die Leistung zu erfassen, während Nutzer die Website laden und mit ihr interagieren. Diese Art der Messung wird allgemein als Real User Monitoring (RUM) bezeichnet.

Messwerttypen

Es gibt noch weitere Messwerte, die für die Nutzerwahrnehmung der Leistung relevant sind.

  • Wahrgenommene Ladegeschwindigkeit: Wie schnell eine Seite geladen werden und alle visuellen Elemente auf dem Bildschirm gerendert werden können.
  • Ladezeit:Gibt an, wie schnell eine Seite geladen und der erforderliche JavaScript-Code ausgeführt werden kann, damit Komponenten schnell auf Nutzerinteraktionen reagieren können.
  • Laufzeitreaktionsfähigkeit:Gibt an, wie schnell die Seite nach dem Laden auf Nutzerinteraktionen reagieren kann.
  • Visuelle Stabilität: Verschieben sich Elemente auf der Seite auf eine Weise, die Nutzer nicht erwarten und die ihre Interaktionen möglicherweise beeinträchtigt?
  • Ruhigkeit: Werden Übergänge und Animationen mit einer konstanten Framerate gerendert und fließen sie flüssig von einem Zustand zum nächsten?

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

Wichtige Messwerte

  • First Contentful Paint (FCP):Gibt die Zeitspanne vom Beginn des Ladens der Seite bis zu dem Zeitpunkt an, zu dem ein beliebiger Teil des Seiteninhalts auf dem Bildschirm gerendert wird. (Lab, Field)
  • Largest Contentful Paint (LCP):Gibt die Zeitspanne vom Beginn des Ladens der Seite bis zu dem Zeitpunkt an, zu dem der größte Textblock oder das größte Bildelement auf dem Bildschirm gerendert wird. (Lab, Field)
  • Interaction to Next Paint (INP): Misst die Latenz jeder Berührung, jedes Klicks oder jeder Tastaturinteraktion auf der Seite und wählt basierend auf der Anzahl der Interaktionen die schlechteste Interaktionslatenz der Seite (oder eine nahe der höchsten) als einzelnen, repräsentativen Wert aus, um die allgemeine Reaktionszeit einer Seite zu beschreiben. (Lab, Field)
  • Gesamte Blockierzeit (Total Blocking Time, TBT):Gibt die Zeitspanne zwischen First Contentful Paint (FCP) und Zeit bis Interaktivität (Time to Interactive, TTI) an, bei der der Haupt-Thread lange genug blockiert wurde, um die Reaktionsfähigkeit bei Eingaben zu verhindern. (Lab)
  • Cumulative Layout Shift (CLS):Gibt die kumulative Bewertung aller unerwarteten Layoutverschiebungen an, die zwischen dem Beginn des Ladens der Seite und dem Wechsel des Lebenszyklusstatus zu „Ausgeblendet“ auftreten. (Lab, Field)
  • Time to First Byte (TTFB): Gibt an, wie lange es dauert, bis das Netzwerk mit dem ersten Byte einer Ressource auf eine Nutzeranfrage reagiert. (Lab, Field)

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 oben beschriebenen Leistungsmesswerte eignen sich gut, um sich ein allgemeines Bild von den Leistungsmerkmalen der meisten Websites im Web zu machen. Außerdem haben Sie so die Möglichkeit, die Leistung Ihrer Website mit der Ihrer Mitbewerber zu vergleichen.

Es kann jedoch vorkommen, dass eine bestimmte Website in gewisser Weise einzigartig ist und zusätzliche Messwerte erforderlich sind, um ein vollständiges Bild der Leistung zu erhalten. Der LCP-Messwert gibt beispielsweise an, wann der Hauptinhalt einer Seite vollständig geladen ist. Es kann jedoch Fälle geben, in denen das größte Element nicht zum Hauptinhalt der Seite gehört und LCP daher nicht relevant ist.

Für solche Fälle hat die Web Performance Working Group auch APIs auf niedrigerem Niveau standardisiert, die für die Implementierung eigener benutzerdefinierter Messwerte nützlich sein können:

Im Leitfaden zu benutzerdefinierten Messwerten erfahren Sie, wie Sie mit diesen APIs leistungsspezifische Merkmale Ihrer Website messen.