Wie man Web-Vitals mit echten Benutzermetriken bewertet und verbessert

Dieser Artikel wurde freundlicherweise von unseren lieben Freunden bei Raygun unterstützt, die Entwicklern helfen, Probleme zu identifizieren, bevor ihre Kunden betroffen sind, und den Benutzern den Erfahrungsstandard bieten, den sie erwarten und verdienen. Danke!

Wie würden Sie die Leistung messen? Manchmal ist es die Zeit, die eine Anwendung von der ersten Anfrage bis zur vollständigen Wiedergabe benötigt. In anderen Fällen geht es darum, wie schnell eine Aufgabe ausgeführt wird. Es kann auch sein, wie lange es dauert, bis der Benutzer Feedback zu einer Aktion erhält. Seien Sie versichert, dass alle diese Definitionen (und andere) korrekt wären, vorausgesetzt, der richtige Kontext.

Leider gibt es keine Wunderwaffe zur Leistungsmessung. Unterschiedliche Produkte werden unterschiedliche Benchmarks haben und zwei Apps können bei denselben Metriken unterschiedlich abschneiden, aber immer noch ziemlich ähnlich zu unseren subjektiven „guten“ und „schlechten“ Urteilen abschneiden.

In dem Bemühen, die Sprache zu rationalisieren und die Zusammenarbeit und Standardisierung zu fördern, hat unsere Branche weit verbreitete Konzepte entwickelt. Auf diese Weise sind Entwickler in der Lage, Lösungen auszutauschen, Prioritäten zu definieren und sich darauf zu konzentrieren, ihre Arbeit effektiv zu erledigen.

Leistung vs. wahrgenommene Leistung

Nehmen Sie diesen Ausschnitt als Beispiel:

 const sum = new Array(1000) .fill(0) .map((el, idx) => el + idx) .reduce((sum, el) => sum + el, 0) console.log(sum)

Der Zweck davon ist unwichtig, und es macht nicht wirklich etwas, außer dass es eine beträchtliche Zeit dauert, eine Zahl an die Konsole auszugeben. Angesichts dieses Codes würde man (zu Recht) sagen, dass er nicht gut funktioniert. Es ist kein schnell auszuführender Code, und er könnte mit verschiedenen Arten von Schleifen optimiert werden oder diese Aufgaben in einer einzigen Schleife ausführen.

Eine weitere wichtige Sache ist, dass es das Potenzial hat, das Rendern einer Webseite zu blockieren. Es friert Ihren Browser-Tab ein (oder stürzt vielleicht sogar ab). In diesem Fall geht also die vom Benutzer wahrgenommene Leistung mit der Erfüllung der Aufgabe selbst einher.

Wir können diese Aufgabe jedoch in einem Webworker ausführen. Durch das Verhindern des Renderblocks wird unsere Aufgabe nicht schneller ausgeführt – man könnte also sagen, dass die Leistung immer noch gleich ist –, aber der Benutzer wird immer noch in der Lage sein, mit unserer App zu interagieren und ein angemessenes Feedback zu erhalten. Das wirkt sich darauf aus, wie schnell unser Endbenutzer unsere Anwendung wahrnimmt . Es ist nicht schneller, aber es hat eine bessere wahrgenommene Leistung .

Hinweis : Wenn Sie mehr über Web-Workers und React erfahren möchten, können Sie gerne meinen Proof-of-Concept zu React-Web-Workern auf GitHub erkunden.

Web-Vitals

Die Webleistung ist ein umfassendes Thema mit Tausenden von Metriken, die Sie potenziell überwachen und verbessern könnten. Web Vitals sind Googles Antwort auf die Standardisierung der Webleistung. Diese Standardisierung ermöglicht es Entwicklern, sich auf die Metriken zu konzentrieren, die den größten Einfluss auf die Endbenutzererfahrung haben.

• Erste zufriedene Farbe (FCP)
  Die Zeit vom Beginn des Ladevorgangs bis zur Wiedergabe des Inhalts auf dem Bildschirm.
• Größte zufriedene Farbe (LCP)
  Die Renderzeit des größten Bildes oder Textblocks ist im Ansichtsfenster sichtbar. Eine gute Punktzahl liegt bei unter 2,5 Sekunden für 75 % der Seitenladevorgänge.
• Erste Eingangsverzögerung (FID)
  Die Zeit von der Interaktion des Benutzers mit der Seite bis zu dem Zeitpunkt, an dem der Browser die Anfrage verarbeiten kann.
  Eine gute Punktzahl liegt bei unter 100 ms für 75 % der Seitenladevorgänge.
• Kumulative Layoutverschiebung (CLS)
  Die Gesamtsumme aller einzelnen Layoutverschiebungen für jede unerwartete Verschiebung, die während der Lebensdauer der Seite auftritt. Ein guter Wert ist 0,1 bei 75 % der Seitenaufrufe.
• Zeit bis zur Interaktivität (TTI)
  Die Zeit vom Beginn des Ladens der Seite bis zum Laden der wichtigsten Unterressourcen.
• Gesamtsperrzeit (TBT)
  Die Zeit zwischen First Contentful Paint und Time to Interactive, in der der Hauptthread blockiert war (keine Reaktion auf Benutzereingaben).

Welche davon ist die wichtigste?

Core Web Vitals sind die Teilmenge von Web Vitals, die laut Google den größten Einfluss auf die Endnutzererfahrung haben. Ab 2022 gibt es drei Core Web Vitals – Largest Contentful Paint (Geschwindigkeit), Cumulative Layout Shift (Stabilität) und First Input Delay (Interaktivität).

Empfohlene Lektüre : Der Leitfaden für Entwickler zu Core Web Vitals

Chrome-Benutzererfahrungsbericht im Vergleich zu echten Benutzermetriken

Es gibt mehrere Möglichkeiten, Web Vitals in Ihrer Anwendung zu testen. Am einfachsten ist es, Ihre Chrome Devtools zu öffnen, zur Registerkarte Lighthouse zu gehen, Ihre Einstellungen zu überprüfen und einen Bericht zu erstellen. Dies wird als Chrome User Experience Report (CrUX) bezeichnet und basiert auf einem 28-Tage-Durchschnitt von Stichproben von Chrome-Nutzern, die bestimmte Anforderungen erfüllen:

• Synchronisierung des Browserverlaufs;
• kein Sync-Passphrase-Setup;
• Nutzungsstatistikberichte aktiviert.

Es ist jedoch ziemlich schwierig zu definieren, wie repräsentativ der Chrome UX-Bericht für Ihre eigenen Benutzer ist. Der Bericht dient als Anhaltspunkt und kann einen guten Indikator für Dinge bieten, die auf Ad-hoc-Basis verbessert werden können. Aus diesem Grund ist es eine sehr gute Idee, ein Real User Monitoring (RUM)-Tool wie Raygun zu verwenden. Dadurch wird über Personen berichtet, die tatsächlich mit Ihrer App in allen Browsern innerhalb eines zugewiesenen Zeitrahmens interagieren.

Die Überwachung realer Benutzermetriken selbst ist jedoch keine einfache Aufgabe. Es gibt eine Fülle von Hürden, die es zu beachten gilt. Es muss jedoch nicht kompliziert sein. Es ist einfach, RUM-Metriken mit Tools zur Leistungsüberwachung abzurufen. Eine der Optionen, die es wert sind, in Betracht gezogen zu werden, ist Raygun – es kann in wenigen schnellen Schritten eingerichtet werden und ist GDPR-freundlich. Darüber hinaus erhalten Sie auch zahlreiche Funktionen zur Fehlerberichterstattung.

Anwendungsüberwachung

Entwickler behandeln die Beobachtbarkeits- und Leistungsüberwachung oft als nachträglichen Gedanken. Die Überwachung ist jedoch ein entscheidender Aspekt des Entwicklungslebenszyklus, der Softwareteams dabei hilft, schneller voranzukommen, Anstrengungen zu priorisieren und später schwerwiegende Probleme zu vermeiden.

Das Einrichten der Überwachung kann unkompliziert sein, und das Erstellen von Funktionen, die die Beobachtbarkeit berücksichtigen, hilft dem Team bei der grundlegenden Wartung und Code-Hygiene, um diese schrecklichen Refactoring-Sprints zu vermeiden. Die Anwendungsüberwachung kann Ihnen helfen, nachts ruhig zu schlafen, und Ihr Team anleiten, bessere Benutzererfahrungen zu schaffen.

Überwachen Sie Trends und vermeiden Sie Regressionen

Auf die gleiche Weise haben wir (idealerweise) Tests in unserer Continuous Integration-Pipeline, um Funktionsregressionen und Fehler zu vermeiden. Wir sollten eine Möglichkeit haben, Leistungsregressionen für unsere Benutzer unmittelbar nach einer neuen Bereitstellung zu identifizieren. Raygun kann Entwicklern helfen, diese Arbeit mit ihrer Deployment Tracking-Funktion zu automatisieren.

Die Einhaltung des Leistungsbudgets wird nachhaltiger. Mit diesen Informationen kann Ihr Team Leistungsrückgänge (oder -verbesserungen) in allen Web Vitals schnell erkennen, problematische Bereitstellungen identifizieren und betroffene Benutzer ausfindig machen.

Bohren Sie hinein und ergreifen Sie Maßnahmen

Bei der Verwendung von RUM ist es möglich, die Ergebnisse pro Benutzer einzugrenzen. In Raygun ist es beispielsweise möglich, auf eine Punktzahl oder einen Balken im Histogramm zu klicken, um eine Liste der betroffenen Benutzer anzuzeigen. Dadurch ist es möglich, auf individueller Basis mit Informationen auf Instanzebene weiter in die Sitzungen einzudringen. Dies hilft, direkt auf das Problem ausgerichtete Maßnahmen zu ergreifen, anstatt einfach allgemeinen Best Practices zu vertrauen. Und später, um die Auswirkungen der Änderung zu diagnostizieren.

Markieren Sie ungewöhnliche Ereignisse

Natürlich sind diese Funktionen fantastisch, und ein verantwortungsbewusster Entwickler sollte die Dashboards zur Anwendungsüberwachung im Auge behalten. Aber wenn Ihre App skaliert, Teams wachsen und Verantwortlichkeiten aufgeteilt werden, ist es wichtiger denn je, automatisierte Prozesse einzurichten, die Sie schnell auf größere Leistungsprobleme aufmerksam machen. Aus diesem Grund wird empfohlen, Warnauslöser für Ihre Anwendung einzurichten.

Einpacken

Zusammenfassend lässt sich sagen, dass Web Vitals aufgrund ihrer direkten Korrelation mit der Erfahrung des Benutzers der neue Goldstandard für Leistung sind. Entwicklungsteams, die ihre Web Vitals auf der Grundlage echter Benutzererkenntnisse aktiv überwachen und optimieren, werden schnellere und widerstandsfähigere digitale Erfahrungen liefern.

Wir haben gerade erst an der Oberfläche dessen gekratzt, was Überwachung leisten kann, und Lösungen zur Aufrechterhaltung der Leistungserhaltung bei gleichzeitiger Skalierung Ihrer App. Lassen Sie mich in den Kommentaren wissen, wie Sie ein Leistungsbudget, eine bessere Beobachtbarkeit oder andere Lösungen einsetzen, um eine entspannte Nachtruhe zu haben!