Recopilar datos sobre las Métricas web de tu sitio es el primer paso para mejorarlas. Mediante un análisis completo, se recopilarán datos de rendimiento de entornos reales y de laboratorio. La medición de las Métricas web requiere cambios mínimos en el código y se puede lograr con herramientas gratuitas.
Cómo medir las Métricas web con datos de RUM
Los datos de monitoreo de usuarios reales (RUM), también conocidos como datos de campo, capturan el rendimiento que experimentan los usuarios reales de un sitio. Google usa los datos de RUM para determinar si un sitio cumple con los umbrales recomendados de Métricas web esenciales.
Primeros pasos
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:
- PageSpeed Insights (PSI): PageSpeed Insights informa sobre el rendimiento total a nivel de la página y del origen durante los últimos 28 días. Además, se proporcionan sugerencias sobre cómo mejorar el rendimiento. Si quieres realizar una sola acción para comenzar a medir y mejorar las Métricas web de tu sitio, te recomendamos que uses PSI para auditarlo. PSI está disponible en la Web y como una API.
- Search Console: Search Console informa datos de rendimiento por página. Esto lo convierte en una buena opción para identificar páginas específicas que necesitan mejoras. A diferencia de PageSpeed Insights, los informes de Search Console incluyen datos del historial de rendimiento. Search Console solo se puede utilizar con sitios de los que seas propietario y de los que tengas propiedad verificada.
- Panel de CrUX: El panel de CrUX es un panel precompilado que muestra los datos de CrUX del origen que elijas. Se basa en Data Studio y el proceso de configuración tarda alrededor de 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 mencionadas anteriormente son adecuadas para "comenzar" a medir las Métricas web, también pueden ser útiles en otros contextos. En particular, CrUX y PSI están disponibles como API y se pueden usar para crear 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 las Métricas web, te recomendamos que lo complementes con tu propio RUM. Los datos RUM que recopilas tú mismo 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 a través de un proveedor exclusivo de RUM o puedes configurar tus propias herramientas.
Los proveedores exclusivos de RUM se especializan en recopilar e informar datos 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 en tu sitio.
Si no tienes un proveedor de RUM, puedes ampliar tu configuración de estadísticas existente para recopilar y generar informes sobre estas métricas mediante la biblioteca JavaScript de web-vitals. Este método se explica con más detalle a continuación.
La biblioteca JavaScript de web-vitals
Si implementas tu propia configuración de RUM para las Métricas web, la forma más sencilla de recopilar las mediciones de las Métricas web es usar la biblioteca de JavaScript web-vitals. web-vitals es una biblioteca modular pequeña (~1 KB) que proporciona una API conveniente para recopilar e informar cada una de las métricas de Métricas web medibles por campo.
Las APIs de rendimiento integradas del navegador no exponen directamente las métricas que componen las Métricas web, 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 necesitas preocuparte por implementar estas métricas, ya que también garantiza que los datos que recopilas 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 de Prácticas recomendadas para medir las Métricas web en el campo.
Agregación de datos
Es fundamental que informes las mediciones que recopila web-vitals. Si estos datos se miden, pero no se informan, nunca los verás. La documentación de web-vitals incluye ejemplos que muestran cómo enviar los datos a un extremo genérico de la API, a Google Analytics o a Google Tag Manager.
Si ya tienes una herramienta de denuncia favorita, considera utilizarla. De lo contrario, Google Analytics es gratuito y puede utilizarse para este fin.
Al considerar qué herramienta usar, es útil pensar en quién necesitará tener acceso a los datos. Las empresas suelen lograr los mayores logros de rendimiento cuando toda la empresa, en lugar de un solo departamento, está interesada en mejorarlo. Consulta el artículo Cómo corregir la velocidad del sitio web de forma multidisciplinaria para obtener información sobre cómo conseguir la aprobació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 mucho: algunos usuarios tienen experiencias rápidas, otros tienen experiencias lentas. Sin embargo, usar la mediana para resumir los datos puede enmascarar fácilmente este comportamiento.
Con respecto a las Métricas web, Google usa el porcentaje de "buenas" experiencias, en lugar de estadísticas como la mediana o los promedios, para determinar si un sitio o una página cumple con los umbrales recomendados. Específicamente, para que se considere que un sitio o una página cumple con los umbrales de las Métricas web esenciales, el 75% de las visitas a la página debe cumplir con el umbral de "buena" para cada métrica.
Medir las Métricas web con datos de lab
Los datos de lab, también conocidos como datos sintéticos, se recopilan de un entorno controlado y no de usuarios reales. A diferencia de los datos de RUM, los datos de laboratorio pueden recopilarse de entornos de preproducción y, por lo tanto, incorporarse en los flujos de trabajo de los desarrolladores y 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 laboratorio, especialmente si las condiciones de la red, el tipo de dispositivo o la ubicación del entorno del lab difieren significativamente de las de los usuarios. Sin embargo, cuando se trata de recopilar datos de laboratorio en particular sobre métricas de Métricas web, debes tener en cuenta algunas consideraciones específicas:
- Cambio de diseño acumulado (CLS): El Cambio de diseño acumulado medido en entornos de lab puede ser artificialmente más bajo que el CLS observado en los datos de RUM. El 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 ocurre 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 para medir el rendimiento. Muchas herramientas de lab solo cargan la página, no interactúan con ella. Como resultado, solo capturan los cambios de diseño que ocurren durante la carga inicial de la página. En cambio, el CLS medido por las herramientas de RUM captura los cambios de diseño inesperados que ocurren durante toda la vida útil de la página.
- Retraso de primera entrada (FID): El Retraso de primera entrada no se puede medir en entornos de lab porque requiere interacciones del usuario con la página. Como resultado, Total Blocking Time (TBT) es el proxy de lab recomendado para FID. TBT mide la "cantidad total de tiempo entre el primer procesamiento de imagen con contenido y el tiempo de carga durante el cual la página no puede responder a las entradas del usuario". Aunque FID y TBT se calculan de manera diferente, ambos son reflejos de un subproceso principal bloqueado durante el proceso de arranque. Cuando se bloquea el subproceso principal, el navegador se demora en responder a las interacciones del usuario. FID mide el retraso, si existe alguno, que se produce la primera vez que un usuario intenta interactuar con una página.
Herramientas
Estas herramientas se pueden usar para recopilar mediciones de laboratorio de las Métricas web:
- Extensión de Chrome de Métricas web: La extensión de Chrome de Métricas web mide e informa las Métricas web esenciales (LCP, FID y CLS) de una página determinada. Esta herramienta está diseñada para proporcionar a los desarrolladores comentarios sobre el rendimiento en tiempo real a medida que realizan cambios en el código.
- Lighthouse: Lighthouse genera informes sobre los sistemas LCP, CLS y TBT, y también destaca posibles mejoras en el rendimiento. Lighthouse está disponible en las Herramientas para desarrolladores de Chrome, como una extensión de Chrome y como un paquete npm. Lighthouse también se puede incorporar en flujos de trabajo de integración continua a través de Lighthouse CI.
- WebPageTest: WebPageTest incluye Métricas web como parte de sus informes estándar. WebPageTest es útil para recopilar información sobre las Métricas web en condiciones particulares de dispositivos y redes.