El primer paso para mejorar las métricas web de tu sitio es recopilar datos sobre ellas. Un análisis completo recopilará datos de rendimiento de entornos reales y de lab. La medición de 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. Google usa los datos de RUM 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 de tu sitio en el mundo real. 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:
- Las Herramientas para desarrolladores de Chrome se integran en 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 quieres realizar 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 Chrome DevTools.
- PageSpeed Insights (PSI) informa 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. PSI está disponible en la Web y como una API.
- Search Console informa los datos de rendimiento por página. Esto lo hace muy adecuado para identificar páginas específicas que deben mejorarse. 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 que te pertenecen y cuya propiedad verificaste.
- El panel de CrUX es un panel precompilado que muestra los datos de CrUX para el 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 APIs 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 esenciales, te recomendamos que las complementes con tu propio RUM. Los datos de RUM que recopiles 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 dedicado o configurando tus propias herramientas.
Los proveedores de RUM dedicados se especializan en recopilar e informar los 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 para tu sitio.
Si no tienes un proveedor de RUM, es posible que puedas mejorar tu configuración de estadísticas existente para recopilar y generar informes sobre estas métricas con la biblioteca de JavaScript web-vitals. A continuación, se explica este método con más detalle.
La biblioteca JavaScript web-vitals
Si implementas tu propia configuración de RUM para las métricas web vitales, la forma más fácil de recopilar mediciones de las métricas web vitales es usar la biblioteca de JavaScript web-vitals. web-vitals es una biblioteca modular pequeña (~2 KB) que proporciona una API conveniente para recopilar y generar informes de cada una de las métricas de Web Vitals medibles en el campo.
Las APIs de rendimiento integradas del navegador no exponen directamente todas las métricas que conforman las Métricas web, sino que se compilan sobre ellas. Por ejemplo, el Cambio de diseño acumulado (CLS) se implementa con la API de inestabilidad de diseño. Cuando usas web-vitals, no tienes que preocuparte por implementar estas métricas por tu cuenta. También te 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 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 fin.
Al considerar qué herramienta usar, es útil pensar en quién necesitará tener acceso a los datos. Por lo general, las empresas logran los mayores logros de rendimiento cuando toda la empresa, en lugar de un solo departamento, está interesada en mejorar el rendimiento. Consulta Cómo corregir la velocidad del sitio web de forma multifuncional para obtener información sobre cómo lograr la aceptación de diferentes departamentos.
Interpretación de datos
Cuando analices los datos de rendimiento, es importante prestar 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 enmascarar este comportamiento.
En el caso de 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 cumple con los umbrales recomendados. Específicamente, para que un sitio o una página se considere que cumple 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.
Mide las métricas web con datos de lab
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 lab 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. Algunos ejemplos de herramientas que recopilan datos sintéticos son Lighthouse y WebPageTest.
Consideraciones
Siempre habrá discrepancias entre los datos de RUM y los de lab, en especial, si las condiciones de red, el tipo de dispositivo o la ubicación del entorno de lab difieren significativamente de las de los usuarios. Sin embargo, cuando se trata de recopilar datos de lab sobre las métricas de las Métricas web esenciales 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 lab puede ser diferente al que se mide en el campo con datos de RUM debido a demoras en la carga de la página (a través de redireccionamientos, latencia de conexión al servidor o datos sin almacenar en caché), el contenido diferente que se muestra a los usuarios según la pantalla o por otros motivos (incluidos los banners de cookies y la personalización).
- El desplazamiento del diseño acumulativo (CLS) medido en entornos de lab puede ser artificialmente más bajo que el CLS observado en los datos de RUM. Muchas herramientas de lab 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 medido por las herramientas de RUM captura los cambios de diseño inesperados que ocurren durante toda la vida útil de la página.
- No se puede medir la Interacción con la siguiente pintura (INP) en entornos de lab porque requiere que el usuario interactúe con la página. Como resultado, Total Blocking Time (TBT) es el proxy de lab recomendado para INP. El 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 está bloqueada para no responder a las entradas del usuario". Aunque el INP y el TBT se calculan de forma diferente, ambos son reflejos de un subproceso principal bloqueado durante el proceso de inicio. Cuando se bloquea el subproceso principal, el navegador se retrasa en responder a las interacciones del usuario.
Herramientas
Estas herramientas se pueden usar para recopilar mediciones de lab de las métricas web:
- Las herramientas para desarrolladores de Chrome miden y, también, informan las Métricas web esenciales de una página determinada en la vista de métricas en vivo del panel Rendimiento. Esta vista proporciona a los desarrolladores comentarios de rendimiento en tiempo real a medida que realizan cambios en el código.
- Lighthouse Lighthouse informa sobre el LCP, el CLS y el TBT, y también destaca 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 esenciales como parte de sus informes estándares. WebPageTest es útil para recopilar información sobre las métricas web en condiciones específicas de red y dispositivo.