Bei Cloudflare sind viele von uns ganz besessen davon, Websites schneller zu machen. Doch wer die Performance verbessern will, muss sie erst einmal messen können. Letztes Jahr haben wir Browser Insights herausgebracht und unseren Kunden die Möglichkeit gegeben, Web-Performance aus der Perspektive der Endnutzer zu messen.
Heute integrieren wir gemeinsam mit dem Google-Chrome-Team Messungen aus Web Vitals in Browser Insights. Web Vitals sind eine neue Reihe von Kennzahlen, mit denen Webentwickler und Websitebesitzer die Ladezeit, Reaktionsfähigkeit und visuelle Stabilität besser messen und verstehen können. Und mit Browser Insights von Cloudflare sind sie einfacher zu messen als je zuvor – jeder kann kostenlos Daten aus dem gesamten Web erfassen.
Warum brauchen wir Web Vitals?
Wenn man der Performance auf den Grund gehen möchte, neigt man oft dazu, sich auf die leicht zu messenden Kennzahlen zu konzentrieren – z. B. Time To First Byte (TTFB). TTFB und ähnliche Kennzahlen sind zwar wichtig, aber wir haben festgestellt, dass sie nicht immer die ganze Geschichte erzählen.
Unsere Partner im Google-Chrome-Team teilen die Nutzererfahrung in drei Komponenten auf, um dieses Problem zu untersuchen:
Laden: Wie lange hat es gedauert, bis die Inhalte verfügbar waren?
Interaktivität: Wie reaktionsfähig ist die Website, wenn man mit ihr interagiert?
Visuelle Stabilität: Wie stark bewegt sich die Seite beim Laden? (Ich denke dabei an das Gegenteil von „Ruckeln“).
Dieses Bild wird aus von Google erstellten und geteilten Arbeiten reproduziert und gemäß den in der Creative Commons 4.0 Attribution License beschriebenen Bedingungen verwendet.
Es ist schwierig, eine einzelne Kennzahl zu bilden, die diese übergeordneten Komponenten erfasst. Glücklicherweise hat das Google-Chrome-Team sich darüber Gedanken gemacht und Anfang dieses Jahres drei „Kern“-Kennzahlen für Web Vitals eingeführt: Largest Contentful Paint, First Input Delay und Cumulative Layout Shift.
Wie tragen Web Vitals zur Beschleunigung Ihrer Website bei?
Mit der Messung der Core Web Vitals sind Sie noch nicht am Ziel. Sie ist erst der Ausgangspunkt für die Fragestellung, welche Faktoren die Performance einer Website beeinflussen. Web Vitals sagen Ihnen, was auf hoher Ebene geschieht. Andere detailliertere Kennzahlen helfen Ihnen zu verstehen, warum die Website für die Nutzer langsam sein könnte.
Nehmen Sie zum Beispiel die Ladezeit. Wenn Sie merken, dass der Wert für Largest Contentful Paint „verbesserungsbedürftig“ ist, möchten Sie herausfinden, warum das Laden so lange dauert. Browser Insights misst außerdem Kennzahlen für Navigation Timing wie DNS-Lookup-Zeit und TTFB. Wenn Sie diese Kennzahlen der Reihe nach analysieren, wünschen Sie sich möglicherweise mehr Informationen zur Optimierung der Cache-Trefferraten, um die Performance Ihres Ursprungsservers zu optimieren oder die Reihenfolge zu ändern, in der Ressourcen wie JavaScript und CSS geladen werden.
Weitere Informationen zur Verbesserung der Web-Performance finden Sie in den Leitfäden von Google zur Verbesserung von LCP, FID und CLS.
Warum Web Vitals mit Cloudflare messen?
Erstens glauben wir, dass RUM (Real User Measurement) eine wichtige Ergänzung der synthetischen Messung ist. Sie können zwar immer ein paar Seitenladevorgänge auf Ihrem eigenen Laptop durchführen und sich die Ergebnisse ansehen, aber das Sammeln von Daten von echten Nutzern ist die einzige Möglichkeit, reale Geräteleistung und die realen Netzwerkbedingungen zu berücksichtigen.
Es gibt noch andere großartige RUM-Werkzeuge. In Googles Chrome User Experience Report (CrUX) werden Daten zum gesamten Web gesammelt und in Form von Werkzeugen wie Page Speed Insights (PSI) verfügbar gemacht. Dieses Tool kombiniert synthetische Ergebnisse und RUM-Ergebnisse zu nützlichen Diagnosedaten.
Ein großer Vorteil der Browser Insights von Cloudflare ist, dass es ständig aktualisiert wird; neue Datenpunkte stehen kurz nach einer Anfrage eines Endnutzers zur Verfügung. Die Daten im Chrome-UX-Bericht sind ein 28-Tage-Durchschnittswert aggregierter Kennzahlen. Es dauert also, bis sich Änderungen auch in den Daten widerspiegeln.
Ein weiterer Vorteil von Browser Insights ist, dass wir jeden Browser messen können, nicht nur Chrome. Zum Zeitpunkt der Abfassung dieses Artikels werden die APIs, die zum Melden von Web Vitals erforderlich sind, nur in Chromium-Browsern unterstützt. Aber wir werden Safari und Firefox unterstützen, sobald sie diese APIs implementieren.
Außerdem ist die Nutzung von Brower Insights kostenlos! Wir haben wirklich hart daran gearbeitet, unsere Analytics für Websites mit beliebigem Traffic-Aufkommen blitzschnell zu machen. Wir unterstützen das Aufteilen und Gruppieren nach URL, Browser, Betriebssystem und Land, und wir möchten in Kürze mehrere weitere Dimensionen einführen.
Messung auf Knopfdruck
Um Browser Insights zu verwenden, gehen Sie in Ihrem Dashboard einfach zur Registerkarte „Speed“. Ab heute sind die Web Vitals für alle verfügbar!
Intern funktioniert Browser Insights so, dass ein JavaScript-Beacon in HTML-Seiten eingefügt wird. Wenn Sie nur bestimmte Seiten oder Hostnamen messen möchten, können Sie steuern, wo das Beacon geladen wird. Wenn Sie CSP Version 3 verwenden, erkennen wir sogar automatisch die Nonce (falls vorhanden) und nehmen sie in das Skript auf.
Wo wir herkommen und wo wir hingehen
Wir sind wirklich stolz auf den Erfolg von Browser Insights. Wir haben im letzten Jahr harte Arbeit geleistet und viel verbessert – zum Beispiel haben wir das Dashboard schnell und reaktionsschnell (und immer noch kostenlos!) gestaltet, selbst für die größten Websites.
Wir freuen uns, dies in Kürze allen unseren Web-Analytics-Kunden zur Verfügung stellen zu können – auch denen, die Cloudflare noch nicht verwenden. Wir arbeiten außerdem an dringend nachgefragten Features wie clientseitigen Fehlerberichten und Diagnose-Tools, mit denen man besser erkennen kann, wo Verbesserungen möglich sind.