Weiterentwicklung von Speed-Tools: Highlights vom Chrome Developer Summit 2019

Neue Leistungsmesswerte, Updates für PageSpeed Insights und den Bericht zur Nutzererfahrung in Chrome (CrUX) und mehr

Elizabeth Sweeny
Elizabeth Sweeny

Auf dem Chrome Developer Summit haben Paul Irish und ich u. a. Updates für Lighthouse – Lighthouse CI und eine neue Formel für den Leistungswert angekündigt. Neben wichtigen Neuigkeiten zu Lighthouse haben wir auch spannende Entwicklungen bei Performance-Tools vorgestellt, darunter neue Leistungsmesswerte, Aktualisierungen von PageSpeed Insights und Chrome User Experience Report (CrUX) sowie Erkenntnisse aus der Analyse der Webumgebung durch Web Almanac.

Neue Leistungsmesswerte

Das Messen der Nuancen der Nutzererfahrung ist der Schlüssel, um die Auswirkungen auf das Endergebnis zu quantifizieren und Verbesserungen und Regressionen nachzuverfolgen. Im Laufe der Zeit haben sich neue Messwerte entwickelt, um diese Nuancen zu erfassen und die Lücken bei der Messung der Nutzererfahrung zu schließen. Neu in der Messwertgeschichte sind zwei Feldmesswerte: Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS). Diese werden in der W3C Web Performance Working Group entwickelt, und der neue Lab-Messwert Total Blocking Time (TBT).

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) gibt die Zeit an, zu der das größte Inhaltselement im Darstellungsbereich sichtbar wird.

Vor dem Largest Contentful Paint wurden First Meaningful Paint (FMP) und der Speed Index (SI) verwendet, um das Ladeerlebnis nach dem ersten Paint zu erfassen. Diese Messwerte sind jedoch komplex und geben oft nicht Aufschluss darüber, wann der Hauptinhalt der Seite geladen wurde. Untersuchungen haben gezeigt, dass allein das Laden des Hauptinhalts einer Seite besser erkennbar ist, wenn das größte Element auf der Seite gerendert wird.

Der neue Messwert „Largest Contentful Paint“ ist bald in Lighthouse-Berichten verfügbar. Bis dahin können Sie LCP in JavaScript messen.

Total Blocking Time (TBT)

Mit dem Messwert Total Blocking Time (TBT) wird die Gesamtzeit zwischen First Contentful Paint (FCP) und Time to Interactive (TTI) gemessen, bei der der Hauptthread lange genug blockiert wurde, um die Reaktionsfähigkeit von Eingaben zu verhindern.

Eine Aufgabe gilt als lang, wenn sie länger als 50 Millisekunden im Hauptthread ausgeführt wird. Jede Millisekunde darüber wird auf die Blockierzeit der Aufgabe angerechnet.

Ein Diagramm, das eine Aufgabe von 150 Millisekunden mit einer Blockierzeit von 100 Millisekunden darstellt

Die Gesamtblockzeit für eine Seite ist die Summe der Blockierzeiten aller langen Aufgaben, die zwischen FCP und TTI aufgetreten sind.

Ein Diagramm, das fünf Aufgaben mit einer Gesamtblockzeit von 60 Millisekunden aus 270 Millisekunden der Hauptthreadzeit darstellt.

Während „Time to Interactive“ gut erkennt, wann sich der Hauptthread später beim Laden verringert, zielt die Total Blocking Time darauf ab, die Belastung des Hauptthreads während der Last zu quantifizieren. Auf diese Weise ergänzen sich TTI und TBT und sorgen für ein Gleichgewicht.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Seite und quantifiziert, wie oft Nutzer unerwartete Layoutverschiebungen erleben. Eine unerwartete Bewegung von Inhalten kann sehr frustrierend sein. Mit diesem neuen Messwert können Sie dieses Problem lösen, indem Sie messen, wie oft das Problem für Ihre Nutzer auftritt.

Ein Screencast, der zeigt, wie sich Layout-Instabilität negativ auf Nutzer auswirken kann.

In der detaillierten Anleitung zu Cumulative Layout Shift erfahren Sie, wie er berechnet und gemessen wird.

In der neuen Lighthouse-Formel zur Leistungsbewertung wird FMP und FCI bald weniger hervorgehoben und die drei neuen Messwerte – LCP, TBT und CLS – aufgenommen, da sie besser erfassen, wann eine Seite nutzungsfreundlich erscheint.

In Lighthouse Version 6 sind First Contentful Paint die wichtigsten Messwerte für die Ladegeschwindigkeit: Geschwindigkeitsindex und Largest Contentful Paint: „Zeit bis Interaktivität“, „First Input Delay“, „Maximale potenzielle erste Eingabeverzögerung“ und „Total Blocking Time“ sind die wichtigsten Messwerte für die Interaktivität. Der Cumulative Layout Shift ist der wichtigste Vorhersehbarkeitsmesswert.

Weitere Informationen finden Sie unter Lighthouse-Leistungsbewertung und der neuen web.dev-Messwertsammlung.

Grenzwerte für Felddaten (CrUX) wurden in PageSpeed Insights angepasst

Im vergangenen Jahr haben wir die Webleistung in diesem Bereich anhand von Chrome User Experience-Daten (CrUX-Daten) analysiert. Anhand der Erkenntnisse aus diesen Daten haben wir die Grenzwerte, anhand derer wir eine Website in Bezug auf die Feldleistung als „langsam“, „moderat“ oder „schnell“ kennzeichnen, neu bewertet.

Zwei Balkendiagramme, die die Verteilung langsamer, schneller und mittlerer Geschwindigkeit für FCP und FID zeigen

Für eine Gesamtbewertung einer Website verwendet PageSpeed Insights (PSI) ein bestimmtes Perzentil der Gesamtverteilung von Felddaten als goldene Zahl für diese Website. Zuvor verwendete Schwellenwerte waren das 90. Perzentil für First Contentful Paint und das 95. Perzentil für First Input Delay (FID).

Wenn die FCP-Verteilung z. B. zu 50% schnell, 30% moderat und 20 % langsam ist, befindet sich das 90. Perzentil-FCP im langsamen Bereich, sodass die Gesamtfeldbewertung für die Website langsam ist.

Dies wurde angepasst, um eine bessere Verteilung über Websites insgesamt zu erreichen. Die neue Aufschlüsselung sieht so aus:

Messwert Gesamtperzentil Schnell (ms) Mittel (ms) Langsam (ms)
FCP 75. Perzentil 1.000 1000-3000 3.000+
FID 95. Perzentil 100 100-300 300+

Wenn eine Website beispielsweise eine FCP-Verteilung von 50% schnell, 30% moderat und 20% langsam hat, befindet sich der FCP-Wert für das 75. Perzentil im mittleren Bereich, sodass der Gesamtfeldwert für die Website moderat ist.

Kanonische URL-Weiterleitungen in PageSpeed Insights

Damit du die Nutzererfahrung so genau wie möglich messen kannst, hat das PageSpeed Insights-Team PSI eine Aufforderung zur Neuanalyse hinzugefügt. Bei Websites, die zu einer neuen URL weitergeleitet werden, werden Sie aufgefordert, den Bericht noch einmal für die Landingpage-URL zu erstellen, um ein umfassenderes Bild der tatsächlichen Leistung zu erhalten.

PSI-Benutzeroberfläche mit der URL-Weiterleitung und der Schaltfläche „Neu analysieren“

CrUX im neuen Geschwindigkeitsbericht in der Search Console

Eine Woche vor dem Chrome Dev Summit wurde in der Search Console ein neuer Geschwindigkeitsbericht veröffentlicht. Dabei werden Daten aus dem Bericht zur Nutzererfahrung in Chrome verwendet, um Websiteinhabern dabei zu helfen, potenzielle Probleme mit der Nutzerfreundlichkeit zu erkennen. Im Geschwindigkeitsbericht werden Gruppen ähnlicher URLs automatisch den Buckets „Schnell“, „Moderat“ und „Langsam“ zugewiesen. So lassen sich Leistungsverbesserungen bei bestimmten Problemen priorisieren.

Geschwindigkeitsbericht in der Search Console

Web-Almanac

Dion Almaer präsentiert Web Almanac auf der CDS 2019.

In der Eröffnungs-Keynote haben wir den Start von Web Almanac angekündigt, ein jährliches Projekt, bei dem Statistiken und Trends zum Stand des Webs mit dem Fachwissen der Web-Community abgeglichen werden. 85 Beitragende, die sich aus Chrome-Entwicklern und der Web-Community zusammensetzen, haben sich bereit erklärt, an dem Projekt mitzuarbeiten, bei dem 20 zentrale Aspekte des Webs zur Erstellung, Bereitstellung und Nutzerfreundlichkeit von Websites analysiert werden. Sehen Sie sich den Web Almanac an, um mehr über den Leistungsstatus, JavaScript und Drittanbietercode im Web zu erfahren.

Weitere Informationen

Weitere Informationen zu den Updates zu Performance-Tools vom Chrome Developer Summit erhalten Sie im Vortrag über die Entwicklung von Speed Tooling-Tools: