Wir alle wissen, wie wichtig Leistung ist. Aber was genau meinen wir damit, wenn wir über Leistung – und dafür, Websites „schnell“ zu machen – sprechen?
Die Wahrheit ist, dass die Leistung relativ ist:
- Eine Website kann für einen Nutzer schnell sein (in einem schnellen Netzwerk mit einem leistungsstarken Gerät), für einen anderen aber langsam (in einem langsamen Netzwerk mit einem Low-End-Gerät).
- Das Laden von zwei Websites kann in exakt der gleichen Zeit abgeschlossen sein, bei einer scheinbar jedoch schneller, wenn Inhalte nach und nach geladen werden, anstatt bis zum Ende zu warten, bevor etwas angezeigt wird.
- Eine Website scheint 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 sich auf die Leistung in Bezug auf objektive Kriterien zu beziehen, die quantitativ gemessen werden können. Diese Kriterien werden als metrics bezeichnet.
Nur weil ein Messwert auf objektiven Kriterien basiert und quantitativ gemessen werden kann, bedeutet dies nicht unbedingt, dass diese Messungen nützlich sind.
Metriken definieren
In der Vergangenheit wurde die Webleistung mit dem Ereignis load
gemessen. Obwohl load
ein klar definierter Moment im Lebenszyklus einer Seite ist, muss dieser Moment für den Nutzer relevant sein.
Ein Server könnte beispielsweise mit einer Mindestseite antworten, die sofort „geladen“ wird, dann aber das Abrufen von Inhalten und das Anzeigen von Inhalten auf der Seite einige Sekunden nach Auslösung des load
-Ereignisses verzögert. Obwohl eine solche Seite technisch gesehen eine schnelle Ladezeit haben könnte, würde diese Zeit nicht der tatsächlichen Ladezeit der Seite entsprechen.
In den letzten Jahren haben Mitglieder des Chrome-Teams – gemeinsam mit der W3C Web Performance Working Group – an der Standardisierung einer Reihe neuer APIs und Messwerte gearbeitet, die besser messen, wie Nutzer die Leistung einer Webseite erleben.
Damit die Messwerte für Nutzer relevant sind, stellen wir ihnen einige wichtige Fragen:
Kommt das vor? | Wurde die Navigation erfolgreich gestartet? Hat der Server geantwortet? |
Sind sie nützlich? | Wurde genug Inhalt gerendert, sodass Nutzer damit interagieren können? |
Ist sie nutzungsfreundlich? | Können Nutzende mit der Seite interagieren oder sind sie überlastet? |
Entspannt? | Sind die Interaktionen reibungslos, ohne Verzögerungen? |
So werden Messwerte gemessen
Leistungsmesswerte werden im Allgemeinen auf eine von zwei Arten gemessen:
- Im Lab: Verwenden von Tools, um einen Seitenaufbau in einer konsistenten, kontrollierten Umgebung zu simulieren
- Im Feld: bei echten Nutzern, die die Seite tatsächlich laden und mit ihr interagieren
Keine dieser Optionen ist grundsätzlich besser oder schlechter als die andere – tatsächlich sollten Sie im Allgemeinen beide verwenden, um eine gute Leistung zu erzielen.
Im Labor
Bei der Entwicklung neuer Funktionen ist es wichtig, die Leistung im Labor zu testen. Bevor Features in der Produktion veröffentlicht werden, ist es unmöglich, ihre Leistungsmerkmale an echten Nutzern zu messen. Deshalb ist es am besten, Leistungseinbußen zu verhindern, wenn sie vor der Veröffentlichung der Features im Labor getestet werden.
Im Außendienst
Andererseits sind Tests zwar ein sinnvoller Indikator für die Leistung, aber sie spiegeln nicht unbedingt wider, wie alle Nutzer Ihre Website im echten Leben erleben.
Die Leistung einer Website kann je nach den Gerätefunktionen eines Nutzers und seinen Netzwerkbedingungen stark variieren. Sie kann auch variieren, je nachdem, ob oder wie ein Nutzer mit der Seite interagiert.
Außerdem ist der Seitenaufbau möglicherweise nicht deterministisch. Beispielsweise können sich auf Websites, auf denen personalisierte Inhalte oder Anzeigen geladen werden, von Nutzer zu Nutzer ganz unterschiedliche Leistungsmerkmale unterscheiden. In einem Labortest werden diese Unterschiede nicht erfasst.
Die einzige Möglichkeit, die Leistung Ihrer Website für Ihre Nutzer genau zu verstehen, besteht darin, die Leistung tatsächlich zu messen, während diese Nutzer Ihre Website laden und damit interagieren. Diese Art der Messung wird im Allgemeinen als Echtes Nutzermonitoring oder kurz RUM bezeichnet.
Messwerttypen
Es gibt mehrere andere Arten von Messwerten, die dafür relevant sind, wie Nutzer die Leistung wahrnehmen.
- Wahrgenommene Ladegeschwindigkeit:Dieser Wert gibt an, wie schnell eine Seite geladen und alle visuellen Elemente auf dem Bildschirm gerendert werden kann.
- Responsivität bei Ladevorgängen:Dieser Wert gibt an, wie schnell eine Seite geladen und jeder erforderlicher JavaScript-Code ausgeführt werden kann, damit Komponenten schnell auf Nutzerinteraktionen reagieren können.
- Responsivität der Laufzeit:Wie schnell kann die Seite nach dem Seitenaufbau auf Nutzerinteraktionen reagieren?
- Visuelle Stabilität:Verschieben sich Elemente auf der Seite so, dass Nutzer dies nicht erwarten und ihre Interaktionen möglicherweise beeinträchtigen?
- Flüssigkeit:Werden Übergänge und Animationen mit einer konsistenten Framerate gerendert und fließen sie flüssig von einem Zustand zum nächsten?
Angesichts all der oben genannten Arten von Leistungsmesswerten ist hoffentlich klar, dass kein Messwert ausreicht, um alle Leistungsmerkmale einer Seite zu erfassen.
Wichtige zu messende Messwerte
- First Contentful Paint (FCP):Misst die Zeit vom Beginn des Seitenaufbaus bis zu dem Zeitpunkt, zu dem ein Teil des Seiteninhalts auf dem Bildschirm gerendert wird. (Lab, Feld)
- Largest Contentful Paint (LCP):Misst die Zeit vom Ladebeginn der Seite bis zum Rendern des größten Textblocks oder Bildelements auf dem Bildschirm. (Lab, Feld)
- First Input Delay (FID):Misst die Zeit ab der ersten Interaktion eines Nutzers mit Ihrer Website (wenn er auf einen Link klickt, auf eine Schaltfläche tippt oder ein benutzerdefiniertes, über JavaScript gesteuertes Steuerelement verwendet) bis zu dem Zeitpunkt, zu dem der Browser tatsächlich auf diese Interaktion reagieren kann. (Feld)
- Interaction to Next Paint (INP): Misst die Latenz bei jedem Tippen, jedem Klick oder jeder Tastaturinteraktion auf der Seite. Basierend auf der Anzahl der Interaktionen wird die schlechteste Interaktionslatenz der Seite (oder nahe der höchsten) als einzelnen, repräsentativen Wert ausgewählt, um die allgemeine Reaktionsgeschwindigkeit einer Seite zu beschreiben. (Lab, Feld)
- Total Blocking Time (TBT):Misst die Gesamtzeit zwischen FCP und TTI, bei der der Hauptthread lange genug blockiert wurde, um eine Reaktionsfähigkeit von Eingaben zu verhindern. (Lab)
- Cumulative Layout Shift (CLS): Misst die kumulative Punktzahl aller unerwarteten Layoutverschiebungen, die zwischen dem Laden der Seite und dem Wechsel des Lebenszyklusstatus zu „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)
Diese Liste enthält zwar Messwerte zu vielen verschiedenen Leistungsaspekten, die für Nutzer relevant sind, enthält aber nicht alle Aspekte. Beispielsweise werden die Reaktions- und Flüssigkeitsreaktionszeit der Laufzeit derzeit nicht berücksichtigt.
In einigen Fällen werden neue Messwerte eingeführt, um fehlende Bereiche abzudecken. In anderen Fällen sind die besten Messwerte diejenigen, die speziell auf Ihre Website zugeschnitten sind.
Benutzerdefinierte Messwerte
Die oben aufgeführten Leistungsmesswerte geben Ihnen einen allgemeinen Überblick über die Leistungsmerkmale der meisten Websites. Sie eignen sich außerdem gut, um über gemeinsame Messwerte für Websites zu verfügen, mit denen sie ihre Leistung mit der Konkurrenz vergleichen können.
Es kann jedoch vorkommen, dass eine bestimmte Website in irgendeiner Weise einzigartig 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 vorkommen, dass das größte Element nicht Teil des Hauptinhalts der Seite ist und der LCP daher nicht relevant ist.
Um solche Fälle zu berücksichtigen, hat die Arbeitsgruppe „Web Performance“ auch untergeordnete APIs standardisiert, die für die Implementierung eigener benutzerdefinierter Messwerte nützlich sind:
- User Timing API
- Long Tasks API
- Element Timing API
- Navigation Timing API
- Resource Timing API
- Server-Timing
Im Leitfaden zu Benutzerdefinierte Messwerte erfahren Sie, wie Sie mit diesen APIs die Leistungsmerkmale Ihrer Website messen können.