Core Web Vitals. Cómo medir estas señales de calidad

Core Web Vitals. Cómo Medir Estas Señales de Calidad

Core Web Vitals. Cómo Medir Estas Señales de Calidad

 

Web Vitals es una iniciativa de Google para proporcionar una guía unificada para señales de calidad que son esenciales para ofrecer una excelente experiencia de usuario en la web. Es por esto que usted necesita comenzar a medir sus core web vitals.

Google ha proporcionado una serie de herramientas a lo largo de los años para medir e informar sobre el rendimiento. Algunos desarrolladores son expertos en el uso de estas herramientas, mientras que otros han encontrado que la abundancia de herramientas y métricas es un desafío constante.

Los propietarios de sitios no deberían tener que ser gurús del rendimiento para comprender la calidad de la experiencia que ofrecen a sus usuarios. La iniciativa de Web Vitals tiene como objetivo simplificar el panorama y ayudar a los sitios a centrarse en las métricas más importantes, los Core Web Vitals.

Recopilar datos en los Web Vitals de su sitio es el primer paso para mejorarlos. Un análisis completo recopilará datos de rendimiento de entornos del mundo real y de laboratorio. Medir Web Vital requiere cambios mínimos de código y se puede lograr con herramientas gratuitas.

Medición de valores vitales web utilizando datos RUM

Los datos de Monitoreo de usuario real, Real user monitoring (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 Web Vitals.

Comenzando

Si no tiene una configuración 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 subyacente (el Informe de experiencia del usuario de Chrome), pero tienen casos de uso ligeramente diferentes:

  • PageSpeed ​​Insights (PSI) : informes de PageSpeed ​​Insights sobre el rendimiento agregado a nivel de página y de origen en los últimos 28 días. Además, proporciona sugerencias sobre cómo mejorar el rendimiento. Si está buscando una sola acción para comenzar a medir y mejorar los Web Vitals de su sitio, le recomendamos usar PSI para auditar su sitio. PSI está disponible en la web y como API.
  • Search Console : Search Console informa los datos de rendimiento por página. Esto lo hace ideal 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 que son de su propiedad y cuya propiedad ha sido verificada.
  • Panel de control de CrUX : el panel de control de CrUX es un panel de control prefabricado que muestra los datos de CrUX para el origen que elija. Está construido sobre Data Studio y el proceso de configuración dura 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 pueden desglosarse por dispositivo y tipo de conexión.

Vale la pena señalar que, aunque las herramientas enumeradas anteriormente son adecuadas para «comenzar» a medir los Web Vitals, 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.

Recopilando datos RUM

Aunque las herramientas basadas en CrUX son un buen punto de partida para investigar el rendimiento de Web Vitals, recomendamos encarecidamente complementarlo con su propio RUM. Los datos de RUM que recopile usted mismo pueden proporcionar comentarios más detallados e inmediatos sobre el rendimiento de su sitio. Esto facilita la identificación de problemas y la prueba de 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 el rendimiento observado en 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 utilizando un proveedor de RUM dedicado, o configurando sus propias herramientas.

Los proveedores dedicados de RUM se especializan en recopilar e informar datos de RUM. Para usar Core Web Vitals con estos servicios, pregúntele a su proveedor de RUM sobre cómo habilitar el monitoreo de Core Web Vitals para su sitio.

Si no tiene un proveedor de RUM, puede aumentar su configuración de análisis existente para recopilar e informar sobre estas métricas mediante el uso de la web-vitalsbiblioteca 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 la web-vitals biblioteca de JavaScript. web-vitals es una biblioteca pequeña y modular (~ 1 KB) que proporciona una API conveniente para recopilar e informar sobre cada una de las métricas de Web Vital medibles en el campo.

Las métricas que componen los Web Vitals no están expuestas directamente por las API de rendimiento nativas del navegador, sino que se basan en ellas. Por ejemplo, el cambio de diseño acumulativo, Cumulative Layout Shift (CLS) se implementa utilizando la API de inestabilidad de diseño. Al usarlo 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, consulte la documentación y las Mejores prácticas para medir los Web Vital en la guía de campo.

Agregación de datos

Es esencial que informe las mediciones recopiladas por web-vitals. Si esta información se mide pero no se informa, nunca la verá. La web-vitals documentación incluye ejemplos que muestran cómo enviar los datos a un punto final genérico de APIGoogle Analytics o Google Tag Manager.

Si ya tiene una herramienta de informes favorita, considere usarla. De lo contrario, Google Analytics es gratuito y se puede utilizar para este propósito.

Al considerar qué herramienta usar, es útil pensar quién necesitará tener acceso a los datos. Las empresas generalmente alcanzan las mayores ganancias de rendimiento cuando toda la empresa, en lugar de un solo departamento, está interesada en mejorar el rendimiento. Consulte Fijación de la velocidad del sitio web de manera cruzada para aprender cómo obtener 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, usar la mediana para resumir datos puede enmascarar fácilmente este comportamiento.

Con respecto a los Web Vitals, Google utiliza el porcentaje de «buenas» experiencias, 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 un sitio o página se considere que cumple con los umbrales de Core Web Vitals, el 75% de las visitas a la página deben cumplir con el umbral «bueno» para cada métrica.

Medición de los valores vitales de la 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 RUM, los datos de laboratorio pueden recopilarse de entornos de preproducción y, por lo tanto, incorporarse a los flujos de trabajo de los desarrolladores y a 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 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 los de los usuarios. Sin embargo, cuando se trata de recopilar datos de laboratorio sobre las 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 todos los puntajes de cambio de diseño individual 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 dependiendo de si la está cargando 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 los 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 a lo largo de toda la vida útil de la página.
  • Primer retraso de entrada (FID): el primer retraso de entrada no se puede medir en entornos de laboratorio porque requiere interacciones del usuario con la página. Como resultado, el Tiempo de bloqueo total (TBT) es el proxy de laboratorio recomendado para FID. TBT mide la «cantidad de tiempo total 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 la demora, si la hay, que ocurre la primera vez que un usuario intenta interactuar con una página.

Herramientas

Estas herramientas se pueden usar para recopilar mediciones de laboratorio de Web Vitals:

  • Web vitales Chrome Extensión: Los signos vitales Web Chrome extensión mide e informa la web vitales Core (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.
  • Lighthouse: Lighthouse informa sobre LCP, CLS y TBT, y también destaca 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 en flujos de trabajo de integración continua a través de Lighthouse CI.
  • WebPageTest: WebPageTest incluye Web Vitals como parte de su informe estándar. WebPageTest es útil para recopilar información sobre Web Vitals en condiciones particulares de dispositivo y red.

Ahora puede comenzar a medir sus Core Web Vitals. Queremos conocer tus opiniones en la sección de comentarios.

Contenido Relacionado:

 

Como Mejorar First Contentful Paint
Herramientas CSS no utilizadas
Como Hacer una Campaña SEO
Elimine CSS no utilizadas
Que Es Largest Contentful Paint
Agregue Datos Estructurados a su Sitios WordPress
Como Conseguir Trafico a mi Sitio o Blog ¡Inyecta sangre a tu sitio!
Cómo Hacer una Auditoría de Accesibilidad
Blog de PPC
Blog de Search Engine Optimization

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

This function has been disabled for Blog de Marketing.