Core Web Vitals mit Sentry messen

Chris hat neulich ein paar Anmerkungen zu Core Web Vitals gemacht und erklärt, warum die Messung dieser Leistungskennzahlen so unglaublich wichtig ist.

Ich finde die von Google entwickelten Core Web Vitals immer noch clever. Als ich mich anfing, um die Leistung zu kümmern, ging es nur darum: Anfragen reduzieren! Dinge cachen! Alles kleiner machen! Und obwohl das alles sehr eng mit der Web-Performance zusammenhängt, ist es abstrakt damit verbunden. Die tatsächliche Web-Performance für Benutzer sind Dinge wie: Wie lange musste ich warten, bis ich den Inhalt auf der Seite sehen konnte? Wie lange, bis ich tatsächlich mit der Seite interagieren konnte, z. B. in ein Formular tippen oder auf einen Link klicken? Haben sich Dinge beim Versuch, etwas zu tun, lästig verschoben? Deshalb sind Core Web Vitals clever: Sie messen diese Dinge.

Es gibt sicherlich viele Tools, die Ihnen helfen, diese äußerst wichtigen Kennzahlen zu messen. Chris' Beitrag kam genau richtig, denn dort, wo ich bei Sentry arbeite¹, bringen wir unsere eigene Version davon auf den Markt. Meine Lieblings-Bloggerin einmal im Jahr und Mentorin bei Sentry, Dora Chan, hat erklärt warum die Verwendung von echten Benutzerdaten wichtig ist, wenn es um die Messung von Web Vitals geht und wie unser eigenes Produkt damit umgeht.

Google Web Vitals können mit der Google Chrome Lighthouse-Erweiterung eingesehen werden. Sie fragen sich vielleicht: „Warum brauche ich Sentry, um zu sehen, was das ist, wenn ich schon Google habe?“ Gute Frage. Google liefert synthetische Labordaten, bei denen Sie Ihre Umgebung, Ihr Gerät und Ihre Netzwerkgeschwindigkeit direkt steuern können. Das ist alles gut und schön, aber es zeichnet nur ein Teil des Bildes auf. Bild. Verstanden?

Sentry sammelt aggregierte Felddaten darüber, was Ihre Benutzer tatsächlich erleben, wenn sie mit Ihrer Anwendung interagieren. Dies beinhaltet Kontext zu variablen Netzwerkgeschwindigkeiten, Browsern, Geräten, Regionen usw. Mit Web Vitals können wir Ihnen helfen zu verstehen, was in der Praxis passiert, wie oft es passiert, warum, und was sonst noch mit dem Verhalten zusammenhängt.

Sentry zerlegt all diese Transaktionen in die wichtigsten Kennzahlen, damit Sie sehen können, *wie* Ihre Kunden Leistungsprobleme erleben. Vielleicht hat eine Transaktion 42 % der Zeit eine Eingabeverzögerung von mehr als 301 ms. Sentry würde dieses Problem und seine Korrelation mit anderen Leistungsproblemen anzeigen.

Ich denke, *das* ist die Stärke der Verknüpfung von Core Web Vitals mit Benutzerdaten – oder dem, was Dora „Felddaten“ nennt –, denn einige unserer Benutzer erleben eine schnelle App! Sie haben tolles WLAN! All das WLAN! Das ist alles schön und gut, aber es gibt immer noch Benutzer auf der anderen Seite, die eine miserablere Erfahrung ertragen müssen, und ein auf tatsächlichen Benutzerdaten basierendes Bild ermöglicht es uns, zu sehen, welche spezifischen Aktionen die Dinge verlangsamen. Diese Informationen geben uns die Zuversicht, in den Code einzusteigen und das Problem zu beheben, aber sie helfen auch, diese Probleme überhaupt erst zu priorisieren. Das ist etwas, worüber wir bei der Leistung nicht wirklich sprechen.

Was ist das wichtigste Leistungsproblem Ihrer App *jetzt gerade*? Dies ist eine schwierigere Frage, als wir vielleicht zugeben möchten. Vielleicht ist ein First Paint von fünf Sekunden auf der Einstellungsseite Ihrer App kein Dealbreaker, aber drei Sekunden auf der Checkout-Seite sind für das Geschäft und die Kunden unerträglich.

Also, ja, Leistungsprobleme sind so seltsam; das gleiche Ergebnis einer Kennzahl kann je nach Kontext unterschiedliche Bedeutungen haben. Und einige Kennzahlen sind je nach Kontext wichtiger als andere.

Deshalb bin ich von all diesen Tools so begeistert. Zu sehen, wie Benutzer eine App in Echtzeit erleben und dann anschließend zu visualisieren, wie sich die Kennzahlen im Laufe der Zeit ändern – das ist einfach Magie. Lighthouse-Scores sind in Ordnung und nett, und verstehen Sie mich nicht falsch, sie sind sehr nützlich. Sie sind nur keine äußerst genaue Messung dafür, wie Benutzer *Ihre* App basierend auf *Ihren* Daten tatsächlich nutzen.

Hier kommt eine weitere Sentry-Funktion ins Spiel. Nachdem Sie sich angemeldet und alles konfiguriert haben, gehen Sie zum Abschnitt Leistung und Sie sehen, welche Transaktionen sich im Laufe der Zeit verbessern und welche sich verschlechtert oder langsamer geworden sind.

Tony Xiao ist Ingenieur bei Sentry und er schrieb darüber, wie er diese Funktion nutzte, um ein Frontend-Problem zu untersuchen. Das stimmt: Wir nutzen Sentry, um unsere Sentry-Arbeit zu messen (wow, Inception). Durch den Blick auf den Bericht „Most Regressed Transactions“ konnte Tony die spezifische Transaktion, die ein negatives Ergebnis ausgelöst hat, untersuchen und das Problem sofort identifizieren. Hier ist, wie er es beschrieb:

Code ist bis zu einem gewissen Grad loyal zu seinem Autor. Deshalb ist die Kommunikation mit Ihrem Code entscheidend. Und deshalb ist das Trend-Monitoring in der Leistungsüberwachung so wertvoll: Es hilft Ihnen nicht nur, die Höhen und Tiefen zu verstehen, sondern kann Ihnen auch in die richtige Richtung weisen.

Wie auch immer, ich versuche hier nicht wirklich, Ihnen Sentry zu verkaufen. Ich bin mehr daran interessiert, wie sich das Feld der Frontend-Entwicklung verändert, und ich finde es super aufregend, dass all diese Tools in der Branche zu diesem Zeitpunkt zusammenkommen. Es fühlt sich an, als ob unser Verständnis von Leistungsproblemen besser wird – die Sprache, die Tools, die Techniken entwickeln sich weiter und ein Wandel zeichnet sich in unserer Branche ab.

Und das ist etwas zum Feiern.