Recopilar datos sobre las Métricas web de tu sitio es el primer paso para mejorarlas. Un análisis integral recopilará datos de rendimiento tanto de entornos de laboratorio como del mundo real. Medir las Métricas web requiere cambios mínimos en el código y se puede lograr con herramientas gratuitas.
Mide las Métricas web con datos de RUM
Los datos de supervisión de usuarios reales (RUM), también conocidos como datos de campo, capturan el rendimiento que experimentan los usuarios reales de un sitio. Los datos de RUM son los que Google usa para determinar si un sitio cumple con los umbrales recomendados de las Métricas web esenciales.
Cómo comenzar
Si no tienes una configuración de RUM, las siguientes herramientas te proporcionarán rápidamente datos sobre el rendimiento real de tu sitio. Todas estas herramientas se basan en el mismo conjunto de datos subyacente (el Informe sobre la experiencia del usuario en Chrome), pero tienen casos de uso ligeramente diferentes:
- Chrome DevTools se integra con el conjunto de datos de CrUX en la vista de métricas en vivo del panel Rendimiento. Si comparas tu experiencia local con las experiencias de usuarios reales en la misma página, puedes tomar una decisión más fundamentada sobre dónde enfocar tus esfuerzos de depuración. Si buscas una sola acción para comenzar a medir y mejorar las Métricas web de tu sitio, te recomendamos que uses el panel Rendimiento de las Herramientas para desarrolladores de Chrome.
- PageSpeed Insights (PSI) genera informes sobre el rendimiento agregado a nivel de la página y del origen durante los últimos 28 días. Además, proporciona sugerencias para mejorar el rendimiento. El PSI está disponible en la Web y como una API.
- Search Console informa los datos de rendimiento por página. Esto la hace adecuada 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 los sitios de los que eres propietario y cuya propiedad verificaste.
- CrUX Vis es un panel precompilado que muestra los datos históricos de CrUX para una URL o un origen de tu elección (cuando están disponibles en el conjunto de datos de CrUX). Se basa en la API de CrUX History y el proceso de configuración tarda alrededor de un minuto. En comparación con PageSpeed Insights y Search Console, CrUX Vis incluye más ejemplos de datos, subpartes del LCP, tipos de navegación, etcétera.
- CrUX Vis es un panel histórico que muestra los datos de CrUX para un origen o una URL de tu elección. Se basa en la API de CrUX History. En comparación con PageSpeed Insights y Search Console, los informes de CrUX Vis incluyen más detalles. Por ejemplo, en CrUX Vis, están disponibles los tipos de navegación y los datos de LCP y RTT.
Cabe destacar que, si bien las herramientas mencionadas anteriormente son adecuadas para "comenzar" a medir las Métricas web, también pueden ser útiles en otros contextos. En particular, tanto CrUX como PSI están disponibles como API y se pueden usar para crear paneles y otros informes.
Recopila datos de RUM
Si bien las herramientas basadas en CrUX son un buen punto de partida para investigar el rendimiento de las Métricas web, te recomendamos que las complementes con tu propio RUM. Los datos de RUM que recopilas por tu cuenta pueden proporcionar comentarios más detallados e inmediatos sobre el rendimiento de tu sitio. Esto facilita la identificación de problemas y la prueba de posibles soluciones.
Puedes recopilar tus propios datos de RUM con un proveedor de RUM exclusivo o configurar tus propias herramientas.
Los proveedores de RUM dedicados se especializan en recopilar y generar informes de datos de RUM. Para usar las métricas web esenciales con estos servicios, pídele a tu proveedor de RUM que habilite la supervisión de las métricas web esenciales para tu sitio.
Si no tienes un proveedor de RUM, es posible que puedas aumentar tu configuración de Analytics existente para recopilar estas métricas y generar informes sobre ellas con la biblioteca de JavaScript de web-vitals. Este método se explica con más detalle a continuación.
La biblioteca de JavaScript de web-vitals
Si implementas tu propia configuración de RUM para las Métricas web, la forma más sencilla de recopilar mediciones de las Métricas web es usar la biblioteca de JavaScript web-vitals. web-vitals es una biblioteca pequeña y modular (~2 KB) que proporciona una API conveniente para recopilar y registrar cada una de las métricas de las métricas web esenciales medibles en el campo.
Las métricas que componen las Métricas web no se exponen directamente a través de las APIs de rendimiento integradas del navegador, sino que se basan en ellas. Por ejemplo, el Cambio de diseño acumulado (CLS) se implementa con la API de inestabilidad de diseño. Si usas web-vitals, no tienes que preocuparte por implementar estas métricas por tu cuenta. Además, garantiza que los datos que recopiles coincidan con la metodología y las prácticas recomendadas para cada métrica.
Para obtener más información sobre la implementación de web-vitals, consulta la documentación y la guía Prácticas recomendadas para medir las Métricas web esenciales en el campo.
Agregación de datos
Es fundamental que informes las mediciones recopiladas por web-vitals. Si estos datos se miden, pero no se registran, nunca los verás. La documentación de web-vitals incluye ejemplos que muestran cómo enviar los datos a un extremo de API genérico, Google Analytics o Google Tag Manager.
Si ya tienes una herramienta de informes favorita, considera usarla. De lo contrario, Google Analytics es gratuito y se puede usar para este propósito.
Cuando consideres qué herramienta usar, es útil pensar quién necesitará tener acceso a los datos. Por lo general, las empresas obtienen los mayores logros en cuanto al rendimiento cuando toda la empresa, en lugar de un solo departamento, se interesa en mejorar el rendimiento. Consulta Cómo solucionar la velocidad del sitio web de forma interfuncional para obtener información sobre cómo obtener la aprobación de diferentes departamentos.
Interpretación de datos
Cuando analices los datos de rendimiento, es importante que prestes atención a los extremos de la distribución. Los datos de RUM suelen revelar que el rendimiento varía mucho: algunos usuarios tienen experiencias rápidas y otros, lentas. Sin embargo, usar la mediana para resumir los datos puede ocultar este comportamiento.
En cuanto a las Métricas web, Google utiliza el porcentaje de experiencias "buenas", en lugar de estadísticas como las medianas o los promedios, para determinar si un sitio o una página cumplen con los umbrales recomendados. Específicamente, para que se considere que un sitio o una página cumplen con los umbrales de las Métricas web esenciales, el 75% de las visitas a la página deben cumplir con el umbral de "buena" para cada métrica.
Cómo medir las métricas web con datos de laboratorio
Los datos de lab, también conocidos como datos sintéticos, se recopilan en 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 a los procesos de integración continua. Lighthouse y WebPageTest son ejemplos de herramientas que recopilan datos sintéticos.
Consideraciones
Siempre habrá discrepancias entre los datos de RUM y los datos de prueba, en especial si las condiciones de la red, el tipo de dispositivo o la ubicación del entorno de prueba difieren significativamente de los de los usuarios. Sin embargo, cuando se trata de recopilar datos de laboratorio sobre las métricas de Métricas web, en particular, hay algunas consideraciones específicas que es importante tener en cuenta:
- El Procesamiento de imagen con contenido más grande (LCP) medido en entornos de laboratorio puede ser diferente del medido en el campo con datos de RUM debido a retrasos en la carga de la página (a través de redireccionamientos, latencia de conexión al servidor o datos sin almacenar en caché), diferente contenido que se muestra a diferentes usuarios según la pantalla o debido a otros motivos (incluidos los banners de cookies y la personalización).
- El cambio de diseño acumulado (CLS) que se mide en entornos de laboratorio puede ser artificialmente más bajo que el CLS que se observa en los datos de RUM. Muchas herramientas de laboratorio solo cargan la página, no interactúan con ella. Como resultado, solo capturan los cambios de diseño que se producen durante la carga inicial de la página. Por el contrario, el CLS que miden las herramientas de RUM captura los cambios de diseño inesperados que ocurren durante toda la vida útil de la página.
- La Interacción a la siguiente pintura (INP) no se puede medir en entornos de laboratorio porque requiere interacciones del usuario con la página. Por lo tanto, el Total Blocking Time (TBT) es el proxy de lab recomendado para el INP. El TBT mide la "cantidad total de tiempo entre el First Contentful Paint y el Tiempo de carga durante el cual la página está bloqueada y no responde a las entradas del usuario". Si bien el INP y el TBT se calculan de manera diferente, ambos reflejan un subproceso principal bloqueado durante el proceso de arranque. Cuando el subproceso principal está bloqueado, el navegador se demora en responder a las interacciones del usuario.
Herramientas
Estas herramientas se pueden usar para recopilar mediciones de laboratorio de las Métricas web:
- Chrome DevTools mide las Métricas web esenciales de una página determinada y genera informes sobre ellas en la vista de métricas en tiempo real del panel Rendimiento. Esta vista proporciona a los desarrolladores comentarios sobre el rendimiento en tiempo real a medida que realizan cambios en el código.
- Lighthouse Lighthouse genera informes sobre el LCP, el CLS y el TBT, y también destaca las posibles mejoras de rendimiento. Lighthouse está disponible en las Herramientas para desarrolladores de Chrome, como un paquete npm, y también se puede incorporar en flujos de trabajo de integración continua con Lighthouse CI.
- WebPageTest incluye las Métricas web como parte de sus informes estándares. WebPageTest es útil para recopilar información sobre las Métricas web en condiciones particulares de dispositivos y redes.