Actualizado
La recopilación de datos sobre los elementos vitales web de su sitio es el primer paso para mejorarlos. Un análisis completo recopilará datos de rendimiento de entornos de laboratorio y del mundo real. La medición de valores vitales web requiere cambios mínimos en el código y se puede lograr utilizando herramientas gratuitas.
Medición de valores vitales web utilizando datos RUM
Monitoreo de usuarios reales (RUM), también conocidos como datos de campo, capturan el rendimiento experimentado por los usuarios reales de un sitio. Los datos de RUM son los que utiliza Google para determinar si un sitio cumple con los umbrales recomendados de Core Web Vitals.
Empezando
Si no tiene una configuración de RUM, las siguientes herramientas le proporcionarán rápidamente datos sobre el rendimiento real de su sitio. Todas estas herramientas se basan en el mismo conjunto de datos subyacentes (el Informe de experiencia del usuario de Chrome), pero tienen casos de uso ligeramente diferentes:
- PageSpeed Insights (PSI): PageSpeed Insights informa sobre el rendimiento agregado a nivel de página y a nivel de origen durante los últimos 28 días. Además, ofrece sugerencias sobre cómo mejorar el rendimiento. Si está buscando una sola acción para comenzar a medir y mejorar los valores vitales web de su sitio, le recomendamos que utilice PSI para auditar su sitio. PSI está disponible en web y como un API.
- Consola de búsqueda: Consola de búsqueda 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 Search Console 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.
- Tablero de instrumentos CrUX: Tablero de CrUX es un tablero prediseñado que muestra los datos de CrUX para un origen de su elección. Está construido sobre Data Studio y el proceso de configuración tarda aproximadamente un minuto. En comparación con PageSpeed Insights y Search Console, los informes del panel de CrUX incluyen más dimensiones; por ejemplo, los datos se pueden desglosar por dispositivo y tipo de conexión.
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 API y se pueden utilizar para construir paneles y otros informes.
Recopilación de datos de RUM
Aunque las herramientas basadas en CrUX son un buen punto de partida para investigar el rendimiento de Web Vitals, recomendamos encarecidamente complementarlas con su propio RUM. Los datos de RUM que recopila usted mismo pueden proporcionar comentarios más detallados e inmediatos sobre el rendimiento de su sitio. Esto hace que sea más fácil identificar problemas y probar posibles soluciones.
Las fuentes de datos basadas en CrUX informan datos utilizando una granularidad de aproximadamente un mes; sin embargo, los detalles de esto varían ligeramente según la herramienta. Por ejemplo, PSI y Search Console informan sobre el rendimiento observado durante los últimos 28 días, mientras que el conjunto de datos y el panel de CrUX se desglosan por mes calendario.
Puede recopilar sus propios datos de RUM mediante el uso de un proveedor de RUM dedicado o configurando sus propias herramientas.
Los proveedores de RUM dedicados se especializan en recopilar y reportar datos de RUM. Para utilizar Core Web Vitals con estos servicios, pregúntele a su proveedor de RUM sobre la habilitación del monitoreo de Core Web Vitals para su sitio.
Si no tiene un proveedor de RUM, es posible que pueda aumentar su configuración de análisis existente para recopilar e informar sobre estas métricas utilizando el web-vitals Biblioteca de JavaScript. Este método se explica con más detalle a continuación.
La biblioteca JavaScript de web-vitals
Si está implementando su propia configuración de RUM para Web Vitals, la forma más fácil de recopilar mediciones de Web Vitals es utilizar el web-vitals Biblioteca JavaScript. web-vitals es una pequeña biblioteca modular (~ 1KB) que proporciona una API conveniente para recopilar e informar cada una de las métricas de Web Vitals medibles en el campo.
Las métricas que componen Web Vitals no están todas directamente expuestas por las API de rendimiento integradas del navegador, sino que se basan en ellas. Por ejemplo, Acumulative Layout Shift (CLS) se implementa utilizando el API de inestabilidad de diseño. Mediante el uso web-vitals, no necesita preocuparse por implementar estas métricas usted mismo; también garantiza que los datos que recopile coincidan con la metodología y las mejores prácticas para cada métrica.
Para obtener más información sobre la implementación web-vitals, referirse a documentación y la guía de Mejores prácticas para medir Web Vitals en el campo.
Agregación de datos
Es fundamental que informe las medidas recogidas por web-vitals. Si estos datos se miden pero no se informan, nunca los verá. los web-vitals La documentación incluye ejemplos que muestran cómo enviar los datos a un punto final de API genérico, Google analiticoo Administrador de etiquetas de Google.
Si ya tiene una herramienta de informes favorita, considere usarla. De lo contrario, Google Analytics es gratuito y puede utilizarse para este propósito.
Al considerar qué herramienta usar, es útil pensar en quién necesitará tener acceso a los datos. Por lo general, las empresas obtienen el mayor rendimiento cuando toda la empresa, en lugar de un solo departamento, está interesada en mejorar el rendimiento. Consulte Corrección de la velocidad del sitio web de forma cruzada para obtener información sobre cómo conseguir la aceptación de diferentes departamentos.
Interpretación de datos
Al analizar los datos de rendimiento, es importante prestar atención a las colas de la distribución. Los datos de RUM a menudo revelan que el rendimiento varía ampliamente: algunos usuarios tienen experiencias rápidas, otros tienen experiencias lentas. Sin embargo, el uso de la mediana para resumir los datos puede enmascarar fácilmente este comportamiento.
Con respecto a Web Vitals, Google usa el porcentaje de experiencias «buenas», en lugar de estadísticas como medianas o promedios, para determinar si un sitio o página cumple con los umbrales recomendados. Específicamente, para que se considere que un sitio o página cumple con los umbrales de Core Web Vitals, el 75% de las visitas a la página deben alcanzar el umbral «bueno» para cada métrica.
Medición de valores vitales web utilizando datos de laboratorio
Los datos de laboratorio, también conocidos como datos sintéticos, se recopilan de un entorno controlado, en lugar de usuarios reales. A diferencia de los datos de RUM, los datos de laboratorio se pueden recopilar de entornos de preproducción y, por lo tanto, se pueden incorporar a los flujos de trabajo de los desarrolladores y los procesos de integración continua. Ejemplos de herramientas que recopilan datos sintéticos son Lighthouse y WebPageTest.
Consideraciones
Siempre habrá discrepancias entre los datos de RUM y los datos de laboratorio, especialmente si las condiciones de la red, el tipo de dispositivo o la ubicación del entorno del laboratorio difieren significativamente de las de los usuarios. Sin embargo, cuando se trata de recopilar datos de laboratorio sobre métricas de Web Vitals en particular, hay un par de consideraciones específicas que es importante tener en cuenta:
- Cambio de diseño acumulativo (CLS): El cambio de diseño acumulativo medido en entornos de laboratorio puede ser artificialmente más bajo que el CLS observado en los datos de RUM. CLS se define como la «suma total de todas las puntuaciones de cambio de diseño individuales para cada cambio de diseño inesperado que se produce durante toda la vida útil de la página. «Sin embargo, la vida útil de una página suele ser muy diferente según si la carga un usuario real o una herramienta sintética de medición del rendimiento. Muchas herramientas de laboratorio solo cargan la página, no interactúan con ella. Como resultado, , solo capturan cambios de diseño que ocurren durante la carga inicial de la página. Por el contrario, el CLS medido por las herramientas RUM captura cambios de diseño inesperados que ocurren durante toda la vida útil de la página.
- Retardo de la primera entrada (FID): El retraso de la primera entrada no se puede medir en entornos de laboratorio porque requiere interacciones del usuario con la página. Como resultado, Total Blocking Time (TBT) es el proxy de laboratorio recomendado para FID. TBT mide la «cantidad total de tiempo entre First Contentful Paint y Time to Interactive durante el cual la página no puede responder a la entrada del usuario». Aunque FID y TBT se calculan de manera diferente, ambos son reflejos de un hilo principal bloqueado durante el proceso de arranque. Cuando el hilo principal está bloqueado, el navegador se demora en responder a las interacciones del usuario. FID mide el retraso, si lo hubiera, que se produce la primera vez que un usuario intenta interactuar con una página.
Estampación
Estas herramientas se pueden utilizar para recopilar mediciones de laboratorio de Web Vitals:
- Extensión de Chrome Web Vitals: The Web Vitals Chrome extensión mide e informa los Core Web Vitals (LCP, FID y CLS) para una página determinada. Esta herramienta está destinada a proporcionar a los desarrolladores comentarios sobre el rendimiento en tiempo real a medida que realizan cambios en el código.
- Faro: Lighthouse informa sobre LCP, CLS y TBT, y también destaca las posibles mejoras de rendimiento. Lighthouse está disponible en Chrome DevTools, como una extensión de Chrome y como un paquete npm. Lighthouse también se puede incorporar a los flujos de trabajo de integración continua a través de Faro CI.
- WebPageTest: WebPageTest incluye Web Vitals como parte de sus informes estándar. WebPageTest es útil para recopilar información sobre Web Vitals bajo condiciones particulares de dispositivo y red.
