Beginn der Messung von Web Vitals

Das Sammeln von Daten zu den wichtigsten Webelementen Ihrer Website ist der erste Schritt zu deren Verbesserung. Bei einer vollständigen Analyse werden Leistungsdaten aus Labor- und realen Umgebungen erfasst. Die Messung der Web-Vitalwerte erfordert nur minimale Codeänderungen und kann mit kostenlosen Tools durchgeführt werden.

Web-Vitalwertmessung mit RUM-Daten

Echte Benutzerüberwachung (RUM), auch als Felddaten bezeichnet, erfasst die Leistung, die tatsächliche Benutzer einer Site erfahren. Mit RUM-Daten ermittelt Google, ob eine Website die von Core Web Vitals empfohlenen Schwellenwerte erfüllt.

Starten

Wenn Sie kein RUM-Setup haben, erhalten Sie mit den folgenden Tools schnell Daten zur tatsächlichen Leistung Ihrer Site. Alle diese Tools basieren auf demselben zugrunde liegenden Datensatz (der Chrome User Experience Report), aber sie haben leicht unterschiedliche Anwendungsfälle:

• PageSpeed ​​Insights (PSI): PageSpeed ​​Insights meldet die Gesamtleistung auf Seiten- und Quellenebene für die letzten 28 Tage. Darüber hinaus bietet es Vorschläge zur Verbesserung der Leistung. Wenn Sie nach einer einzigen Aktion suchen, um die Web-Vitalwerte Ihrer Website zu messen und zu verbessern, empfehlen wir Ihnen, PSI zur Prüfung Ihrer Website zu verwenden. PSI ist verfügbar in Netz und als API.
• Suchkonsole: Suchkonsole informa datos de rendimiento por página. Esto lo hace adecuado para identificar páginas específicas que necesitan mejoras. A diferencia de PageSpeed ​​Insights, los informes de Suchkonsole¿Qué es Search console?Servicio sin costes ofrecido por Google que ayuda a supervisar y a mantener la presencia de un portal web en los resultados de búsqueda, así como a aprovechar al máximo su visibilidad. Conocido anteriormente como Webmaster Central y Google Webmaster tools, proporciona herramientas y recursos para monitorizar la apariencia de búsqueda, el tráfico de búsqueda, el estado técnico o los errores de rastreo, entre otras funcionalidades. Plus incluyen datos históricos de rendimiento. Search Console solo se puede usar con sitios de los que seas propietario y de los que hayas verificado la propiedad.
• CrUX-Dashboard: CrUX-Karte ist ein vorgefertigtes Dashboard, das CrUX-Daten für eine Quelle Ihrer Wahl anzeigt. Es basiert auf Data Studio und der Einrichtungsvorgang dauert ungefähr eine Minute. Im Vergleich zu PageSpeed ​​Insights und Search Console enthalten CrUX-Dashboard-Berichte mehr Dimensionen. Beispielsweise können die Daten nach Gerät und Verbindungstyp aufgeschlüsselt werden.

Vale la pena señalar que, aunque las herramientas enumeradas anteriormente son adecuadas para «comenzar» con la medición de Web Vitals, también pueden ser útiles en otros contextos. En particular, tanto CrUX como PSI están disponibles como APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Plus y se pueden utilizar para Paneele bauen und andere Berichte.

RUM-Datenerfassung

Obwohl CrUX-basierte Tools ein guter Ausgangspunkt für die Untersuchung der Leistung von Web Vitals sind, empfehlen wir dringend, sie durch Ihr eigenes RUM zu ergänzen. Die RUM-Daten, die Sie selbst sammeln, können detailliertere und unmittelbarere Rückmeldungen zur Leistung Ihrer Website geben. Dies erleichtert das Erkennen von Problemen und das Testen möglicher Lösungen.

Sie können Ihre eigenen RUM-Daten erfassen, indem Sie einen dedizierten RUM-Anbieter verwenden oder Ihre eigenen Tools einrichten.

Engagierte RUM-Anbieter sind auf die Erfassung und Berichterstattung von RUM-Daten spezialisiert. Um Core Web Vitals mit diesen Diensten zu verwenden, fragen Sie Ihren RUM-Anbieter, ob Sie die Überwachung von Core Web Vitals für Ihre Site aktivieren möchten.

Wenn Sie keinen RUM-Anbieter haben, können Sie möglicherweise Ihr vorhandenes Analyse-Setup erweitern, um diese Metriken mithilfe von zu erfassen und zu melden Web-Vitale JavaScript-Bibliothek. Diese Methode wird nachstehend ausführlicher erläutert.

La biblioteca JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Plus de web-vitals

Wenn Sie Ihre eigene RUM-Konfiguration für Web Vitals implementieren, ist es am einfachsten, Messungen von Web Vitals zu erfassen Web-Vitale JavaScript-Bibliothek. Web-Vitale ist eine kleine modulare Bibliothek (~ 1 KB), die eine praktische API zum Sammeln und Berichten aller vor Ort messbaren Web Vitals-Metriken bietet.

Las métricas que componen Web Vitals no están todas directamente expuestas por las API de rendimiento integradas del BrowserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Plus, sino que se basan en ellas. Por ejemplo, Acumulative Layout Shift (CLS) se implementa utilizando el Entwurfsinstabilitäts-API. Durch die Nutzung Web-VitaleSie müssen sich nicht darum kümmern, diese Metriken selbst zu implementieren. Außerdem wird sichergestellt, dass die gesammelten Daten mit der Methodik und den Best Practices für jede Metrik übereinstimmen.

Weitere Informationen zur Implementierung Web-Vitale, beziehen auf Dokumentation und das Best Practices-Handbuch zur Messung von Web-Vitalen vor Ort.

Datenaggregation

Es ist wichtig, dass Sie die von gesammelten Maßnahmen melden Web-Vitale. Wenn diese Daten gemessen, aber nicht gemeldet werden, werden Sie sie nie sehen. das Web-Vitale Die Dokumentation enthält Beispiele, die zeigen, wie die Daten an gesendet werden ein generischer API-Endpunkt, Google Analyticsoder Google Tag Manager.

Si ya tiene una herramienta de informes favorita, considere usarla. De lo contrario, Google AnalyticsConcepto de Google Analytics¿Qué es Google Analytics?Google Analytics es una de las herramientas SEO gratuitas y más populares al momento de realizar la analítica de una web. Es un panel web que se emplea para conocer el tráfico web de una página, el volumen de usuarios que se mueven en tiempo real, la procedencia de las visitas y toda esa información útil para establecer el comportamiento de una página con Plus es gratuito y puede utilizarse para este propósito.

Bei der Überlegung, welches Tool verwendet werden soll, ist es hilfreich zu überlegen, wer Zugriff auf die Daten benötigt. In der Regel erzielen Unternehmen die beste Rendite, wenn das gesamte Unternehmen und nicht nur eine Abteilung an einer Leistungsverbesserung interessiert ist. Informationen zum Erhalten des Buy-ins von verschiedenen Abteilungen finden Sie unter Standortübergreifende Geschwindigkeitskorrektur.

Dateninterpretation

Bei der Analyse von Leistungsdaten ist es wichtig, die Warteschlangen der Verteilung zu berücksichtigen. RUM-Daten zeigen oft, dass die Leistung stark variiert - einige Benutzer haben schnelle Erfahrungen, andere langsame Erfahrungen. Die Verwendung des Medians zur Zusammenfassung der Daten kann dieses Verhalten jedoch leicht maskieren.

Bei Web Vitals verwendet Google den Prozentsatz "guter" Erfahrungen anstelle von Statistiken wie Median oder Durchschnitt, um festzustellen, ob eine Website oder Seite die empfohlenen Schwellenwerte erfüllt. Damit eine Site oder Seite die Schwellenwerte für Core Web Vitals erfüllen kann, müssen 75% der Seitenaufrufe den Schwellenwert "gut" für jede Metrik erfüllen.

Messung der Web-Vitalwerte anhand von Labordaten

Labordaten, auch als synthetische Daten bezeichnet, werden in einer kontrollierten Umgebung und nicht von tatsächlichen Benutzern erfasst. Im Gegensatz zu RUM-Daten können Labordaten aus Vorproduktionsumgebungen erfasst und daher in Entwickler-Workflows und kontinuierliche Integrationsprozesse integriert werden. Beispiele für Tools, die synthetische Daten erfassen, sind Lighthouse und WebPageTest.

Überlegungen

Es wird immer Diskrepanzen zwischen RUM-Daten und Labordaten geben, insbesondere wenn sich die Netzwerkbedingungen, der Gerätetyp oder der Standort der Laborumgebung erheblich von denen der Benutzer unterscheiden. Insbesondere bei der Erfassung von Labordaten zu Web Vitals-Metriken sind jedoch einige spezifische Überlegungen zu beachten:

• Kumulative Designänderung (CLS): Die in Laboreinstellungen gemessene kumulative Designänderung kann künstlich niedriger sein als der in den RUM-Daten beobachtete CLS. CLS ist definiert als die Gesamtsumme aller einzelnen Konstruktionsänderungswerte für jede unerwartete Konstruktionsänderung, die auftritt während der gesamten Lebensdauer der Seite. „Die Lebensdauer einer Seite ist jedoch oft sehr unterschiedlich, je nachdem, ob sie von einem echten Benutzer oder einem synthetischen Tool zur Leistungsmessung geladen wird. Viele Labortools laden nur die Seite, sie interagieren nicht mit ihr. Infolgedessen erfassen sie nur Layoutänderungen, die beim ersten Laden der Seite auftreten. Im Gegensatz dazu erfasst der von RUM-Tools gemessene CLS unerwartete Designänderungen, die während der gesamten Lebensdauer der Seite auftreten.
• First Entry Delay (FID): Die Verzögerung nach dem ersten Beitrag kann in Laborumgebungen nicht gemessen werden, da Benutzerinteraktionen mit der Seite erforderlich sind. Daher ist die Total Blocking Time (TBT) der empfohlene Labor-Proxy für FIDs. TBT misst die "Gesamtzeit zwischen First Contentful Paint und Time to Interactive, während der die Seite nicht auf Benutzereingaben reagieren kann". Obwohl FID und TBT unterschiedlich berechnet werden, sind sie beide Reflexionen eines blockierten Hauptthreads während des Startvorgangs. Wenn der Hauptthread blockiert ist, reagiert der Browser nur langsam auf Benutzerinteraktionen. FID misst die Verzögerung, falls vorhanden, die auftritt, wenn ein Benutzer zum ersten Mal versucht, mit einer Seite zu interagieren.

Stempeln

Mit diesen Tools können Labormessungen von Web Vitals erfasst werden:

• Chrome Web Vitals-Erweiterung: Die Web Vitals Chrome Erweiterung misst und meldet Core Web Vitals (LCP, FID und CLS) für eine bestimmte Seite. Dieses Tool soll Entwicklern Echtzeit-Leistungsfeedback geben, wenn sie Änderungen am Code vornehmen.
• Leuchtturm: Lighthouse berichtet über LCP, CLS und TBT und zeigt auch mögliche Leistungsverbesserungen auf. Lighthouse ist in den Chrome DevTools als Chrome-Erweiterung und als npm-Paket verfügbar. Lighthouse kann auch in kontinuierliche Integrationsworkflows integriert werden CI Scheinwerfer.
• WebPageTest: WebPageTest nimmt Web Vitals als Teil seiner Standardberichte auf. WebPageTest ist nützlich, um Informationen zu Web Vitals unter bestimmten Geräte- und Netzwerkbedingungen zu sammeln.