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

Neue Leistungsmesswerte, Updates für PageSpeed Insights und den Chrome User Experience Report (CrUX) und mehr.

Elizabeth Sweeny
Elizabeth Sweeny

Auf dem Chrome Developer Summit haben Paul Irish und ich Updates für Lighthouse angekündigt, darunter Lighthouse CI, eine neue Formel für die Leistungsbewertung und mehr. Neben wichtigen Neuigkeiten zu Lighthouse haben wir auch spannende Entwicklungen bei den Leistungstools vorgestellt, darunter neue Leistungsmesswerte, Updates zu PageSpeed Insights und dem Chrome User Experience Report (CrUX) sowie Erkenntnisse aus der Analyse des Web-Ökosystems im Web Almanac.

Neue Leistungsmesswerte

Wenn Sie die Feinheiten der Nutzererfahrung messen, können Sie die Auswirkungen auf Ihren Umsatz quantifizieren und Verbesserungen und Rückschritte verfolgen. Im Laufe der Zeit wurden neue Messwerte weiterentwickelt, um diese Nuancen zu erfassen und die Lücken bei der Messung der Nutzererfahrung zu schließen. Neu hinzugekommen sind zwei Feldmesswerte: Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS), die in der W3C-Arbeitsgruppe für Web Performance entwickelt werden, sowie ein neuer Lab-Messwert: Total Blocking Time (TBT).

Largest Contentful Paint (LCP)

Der Largest Contentful Paint (LCP) gibt an, wann das größte Inhaltselement im Darstellungsbereich sichtbar wird.

Vor Largest Contentful Paint wurden First Meaningful Paint (FMP) und Speed Index (SI) verwendet, um die Ladezeit nach dem ersten Paint-Vorgang zu erfassen. Diese Messwerte sind jedoch komplex und geben oft nicht an, wann der Hauptinhalt der Seite geladen wurde. Untersuchungen haben gezeigt, dass es besser ist, sich anzusehen, wann das größte Element auf der Seite gerendert wird, um zu ermitteln, wann der Hauptinhalt einer Seite geladen wird.

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

Gesamtblockierungszeit (TBT)

Der Messwert 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.

Eine Aufgabe gilt als lang, wenn sie länger als 50 Millisekunden im Haupt-Thread ausgeführt wird. Jede Millisekunde darüber hinaus wird auf die Blockierungszeit dieser Aufgabe angerechnet.

Ein Diagramm, das eine Aufgabe mit einer Dauer von 150 Millisekunden mit einer Blockierungszeit von 100 Millisekunden darstellt.

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

Ein Diagramm mit fünf Aufgaben mit einer Blockierungszeit von 60 Millisekunden bei einer Haupt-Thread-Zeit von 270 Millisekunden

Mit Time to Interactive lässt sich gut erkennen, wann der Hauptthread später beim Laden langsamer wird. Mit der Funktion „Total Blocking Time“ wird gemessen, wie stark der Hauptthread während der Last ausgelastet ist. 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. Unerwartete Änderungen an Inhalten können sehr frustrierend sein. Mit diesem neuen Messwert können Sie ermitteln, wie oft das Problem bei Ihren Nutzern auftritt.

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

In diesem ausführlichen Leitfaden erfahren Sie, wie sich der Wert berechnet und wie er gemessen wird.

In der neuen Formel für die Lighthouse-Leistungsbewertung werden demnächst FMP und FCI weniger Gewicht beigemessen. Stattdessen werden die drei neuen Messwerte LCP, TBT und CLS berücksichtigt, da sie besser erfassen, ob eine Seite nutzerfreundlich ist.

In Lighthouse v6 sind First Contentful Paint, Speed Index und Largest Contentful Paint die wichtigsten Messwerte für die Ladeleistung. „Zeit bis Interaktivität“, „First Input Delay“, „Max. potenzielle First Input Delay“ und „Gesamte Blockierungszeit“ sind die wichtigsten Messwerte für die Interaktivität. „Cumulative Layout Shift“ ist der wichtigste Messwert für die Vorhersagbarkeit.

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

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

Im letzten Jahr haben wir die Webleistung in der Praxis anhand von Daten zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX) analysiert. Anhand der Erkenntnisse aus diesen Daten haben wir die Grenzwerte neu bewertet, mit denen wir die Leistung einer Website als „langsam“, „mittelmäßig“ oder „schnell“ klassifizieren.

Zwei Balkendiagramme, die die Verteilung der langsamen, schnellen und durchschnittlichen Geschwindigkeit für FCP und FID zeigen

Für eine Gesamtbewertung einer Website verwendet PageSpeed Insights (PSI) einen bestimmten Perzentilwert der Gesamtverteilung der Felddaten als Goldstandard für diese Website. Die bisherigen Grenzwerte waren der 90. Perzentilwert für den ersten sichtbaren Inhalt und der 95. Perzentilwert für die erste Eingabeverzögerung (First Input Delay, FID).

Wenn eine Website beispielsweise eine FCP-Verteilung von 50 % „schnell“, 30 % „moderat“ und 20 % „langsam“ hat, befindet sich der FCP für das 90. Perzentil im Bereich „langsam“. Daher wird die Gesamtbewertung für die Website als „langsam“ eingestuft.

Dieser Wert wurde angepasst, um eine bessere Gesamtverteilung auf Websites zu erreichen. Die neue Aufschlüsselung sieht so aus:

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

Wenn eine Website beispielsweise eine FCP-Verteilung von 50 % schnell, 30 % mittelmäßig und 20 % langsam hat, liegt der FCP für das 75. Perzentil im Bereich „mittelmäßig“. Die Gesamtbewertung für die Website ist daher „mittelmäßig“.

Weiterleitungen auf kanonische URLs in PageSpeed Insights

Damit Sie die Nutzerfreundlichkeit so genau wie möglich messen können, hat das PageSpeed Insights-Team PSI um eine Aufforderung zur erneuten Analyse ergänzt. Bei Websites, die zu einer neuen URL weitergeleitet werden, werden Sie aufgefordert, den Bericht für die Landingpage-URL noch einmal auszuführen, um ein umfassenderes Bild Ihrer tatsächlichen Leistung zu erhalten.

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

CrUX im neuen Geschwindigkeitsbericht der Search Console

Eine Woche vor dem Chrome Dev Summit wurde in der Search Console der neue Bericht zur Geschwindigkeit eingeführt. Er verwendet Daten aus dem Bericht zur Nutzererfahrung in Chrome, um Websiteinhabern zu helfen, potenzielle Probleme mit der Nutzerfreundlichkeit zu erkennen. Im Geschwindigkeitsbericht werden ähnliche URLs automatisch in die Gruppen „Schnell“, „Moderat“ und „Langsam“ eingeordnet. Außerdem können Sie damit Leistungsverbesserungen für bestimmte Probleme priorisieren.

Geschwindigkeitsbericht in der Search Console

Web Almanac

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

In der Eröffnungskeynote haben wir die Veröffentlichung des Web Almanacs angekündigt, eines jährlichen Projekts, bei dem Statistiken und Trends zum Zustand des Webs mit dem Fachwissen der Web-Community abgeglichen werden. 85 Beitragende, bestehend aus Chrome-Entwicklern und der Web-Community, haben sich bereit erklärt, an dem Projekt mitzuarbeiten, bei dem 20 Kernaspekte des Internets hinsichtlich der Erstellung, Bereitstellung und Nutzung von Websites analysiert werden. Im Web Almanac finden Sie weitere Informationen zur Leistung, zu JavaScript und zu Code von Drittanbietern im Web.

Weitere Informationen

Weitere Informationen zu den Updates der Leistungstools vom Chrome Developer Summit finden Sie im Vortrag „Speed tooling evolutions“ (Entwicklung von Tools zur Leistungsoptimierung):