Herramientas para medir Core Web Vitals

Sus herramientas de desarrollo favoritas ahora pueden medir los Core Web Vitals.

28 de mayo de 2020

La iniciativa Web Vitals, recientemente anunciada, proporciona una guía unificada sobre las señales de calidad que son esenciales para que todos los sitios brinden una excelente experiencia de usuario en la web. Estamos felices de anunciar que todas las herramientas populares de Google para desarrolladores web ahora admiten la medición de Core Web Vitals, ayudándole a diagnosticar y solucionar problemas de experiencia de usuario más fácilmente. Esto incluye Faro, PageSpeed ​​Insights, DevTools de Chrome, Consola de búsqueda, la herramienta de medición de web.dev, Extensión de Chrome Web Vitals y un nuevo (!) Informe de UX de Chrome API.

Ahora que la Búsqueda de Google incluye Core Web Vitals como base para evaluar experiencia de página, es importante que estas métricas estén disponibles y sean lo más procesables posible.

Para comenzar su viaje optimizando la experiencia del usuario con Core Web Vitals, pruebe el siguiente flujo de trabajo:

• Utilice el nuevo informe Core Web Vitals de Search Console para identificar grupos de páginas que requieren atención (según los datos de campo).
• Una vez que haya identificado las páginas que necesitan trabajo, use PageSpeed ​​Insights (con tecnología de Lighthouse y Chrome UX Report) para diagnosticar problemas de laboratorio y de campo en una página. PageSpeed ​​Insights (PSI) está disponible a través de Search Console o puede ingresar una URL en PSI directamente.
• ¿Está listo para optimizar su sitio localmente en el laboratorio? Utilice Lighthouse y Chrome DevTools para medir Core Web Vitals y obtenga una guía práctica sobre qué corregir exactamente. La extensión Web Vitals Chrome puede brindarle una vista en tiempo real de las métricas en el escritorio.
• ¿Necesita un panel personalizado de Core Web Vitals? Utilice el panel de control CrUX actualizado o la nueva API de informes de Chrome UX para datos de campo o la API de PageSpeed ​​Insights para datos de laboratorio.
• ¿Busca orientación? web.dev/measure puede medir su página y mostrarle un conjunto priorizado de guías y laboratorios de código para la optimización, utilizando datos de PSI.
• Finalmente, use Lighthouse CI en las solicitudes de extracción para asegurarse de que no haya regresiones en Core Web Vitals antes de implementar un cambio en producción.

Con esa introducción, ¡profundicemos en las actualizaciones específicas para cada herramienta!

Faro

Lighthouse es una herramienta automatizada de auditoría de sitios web que ayuda a los desarrolladores a diagnosticar problemas e identificar oportunidades para mejorar la experiencia del usuario de sus sitios. Mide varias dimensiones de la calidad de la experiencia del usuario en un entorno de laboratorio, incluido el rendimiento y la accesibilidad. La última versión de Lighthouse (6.0, lanzada a mediados de mayo de 2020) incluye auditorías adicionales, nuevas métricas y una puntuación de rendimiento recién compuesta.

Lighthouse 6.0 introduce tres nuevas métricas en el informe. Dos de estas nuevas métricas, la pintura de contenido más grande (LCP) y el cambio de diseño acumulativo (CLS), son implementaciones de laboratorio de Core Web Vitals y brindan información de diagnóstico importante para optimizar la experiencia del usuario. Dada su importancia para evaluar la experiencia del usuario, las nuevas métricas no solo se miden e incluyen en el informe, sino que también se tienen en cuenta para calcular la puntuación de rendimiento.

La tercera nueva métrica incluida en Lighthouse —Tiempo total de bloqueo (TBT) — se correlaciona bien con la métrica de campo First Input Delay (FID), otra métrica de Core Web Vitals. Seguir las recomendaciones proporcionadas en el informe Lighthouse y optimizar con respecto a sus puntajes lo prepara para brindar la mejor experiencia posible a sus usuarios.

Todos los productos que potencia Lighthouse se actualizan para reflejar la última versión, incluida Faro CI que le permite medir fácilmente sus Core Web Vitals en solicitudes de extracción antes de que se fusionen e implementen.

Para obtener más información sobre las últimas actualizaciones de Lighthouse, consulte nuestra publicación de blog Novedades de Lighthouse 6.0.

PageSpeed ​​Insights

PageSpeed ​​Insights (PSI) informa sobre el rendimiento de laboratorio y de campo de una página en dispositivos móviles y de escritorio. La herramienta proporciona una descripción general de cómo los usuarios del mundo real experimentan la página (impulsada por Chrome UX Report) y un conjunto de recomendaciones prácticas sobre cómo el propietario de un sitio puede mejorar la experiencia de la página (proporcionada por Lighthouse).

PageSpeed ​​Insights y el API de PageSpeed ​​Insights También se han actualizado para usar Lighthouse 6.0 bajo el capó y ahora admiten la medición de Core Web Vitals en las secciones de laboratorio y de campo del informe. Core Web Vitals están anotados con una cinta azul como se muestra a continuación.

Mientras Consola de búsqueda proporciona a los propietarios de sitios una excelente descripción general de los grupos de páginas que necesitan atención, PSI ayuda a identificar oportunidades por página para mejorar la experiencia de la página. En PSI, puede ver claramente si su página cumple o no con los umbrales para una buena experiencia en todos los Core Web Vitals en la parte superior del informe, indicado por pasa la evaluación de Core Web Vitals o no pasa la evaluación de Core Web Vitals.

Quid

los Informe UX de Chrome (CrUX) es un conjunto de datos públicos de datos reales de la experiencia del usuario en millones de sitios web. Mide las versiones de campo de todos los Core Web Vitals. A diferencia de los datos de laboratorio, los datos de CrUX provienen de usuarios inscritos en el campo. Con estos datos, los desarrolladores pueden comprender la distribución de las experiencias de los usuarios del mundo real en sus propios sitios web o incluso en los de la competencia. Incluso si no tiene RUM en su sitio, CrUX puede proporcionar una manera rápida y fácil de evaluar sus Core Web Vitals. los Conjunto de datos CrUX en BigQuery incluye datos de rendimiento detallados para todos los Core Web Vitals y está disponible en instantáneas mensuales en el nivel de origen.

La única forma de saber realmente el rendimiento de su sitio para sus usuarios es medir su rendimiento en el campo a medida que esos usuarios lo cargan e interactúan con él. Este tipo de medición se conoce comúnmente como Monitoreo de usuarios reales, o RUM para abreviar. Incluso si no tiene RUM en su sitio, CrUX puede proporcionar una manera rápida y fácil de evaluar sus Core Web Vitals.

Presentamos la API de CrUX

Hoy nos complace anunciar el API de CrUX, una forma rápida y gratuita de integrar fácilmente sus flujos de trabajo de desarrollo con el origen y la medición de calidad a nivel de URL para las siguientes métricas de campo:

• Pintura con contenido más grande
• Cambio de diseño acumulativo
• Retardo de la primera entrada
• Primera pintura con contenido

Los desarrolladores pueden buscar un origen o URL y segmentar los resultados por diferentes factores de forma. La API se actualiza a diario y resume los datos de los 28 días anteriores (a diferencia del conjunto de datos de BigQuery, que se agrega mensualmente). La API también tiene las mismas cuotas de API públicas relajadas que colocamos en nuestra otra API, la API de PageSpeed ​​Insights (25,000 solicitudes por día).

A continuación se muestra un manifestación utilizando la API de CrUX para visualizar las métricas de Core Web Vitals con distribuciones para bueno, necesita mejorary pobre:

En versiones futuras, planeamos expandir la API para permitir el acceso a dimensiones y métricas adicionales del conjunto de datos CrUX.

Tablero CrUX renovado

El recién rediseñado Tablero CrUX le permite rastrear fácilmente el desempeño de un origen a lo largo del tiempo, y ahora puede usarlo para monitorear las distribuciones de todas las métricas de Core Web Vitals. Para comenzar con el panel, consulte nuestro tutorial en web.dev.

Hemos introducido una nueva página de inicio de Core Web Vitals para que sea aún más fácil ver el rendimiento de su sitio de un vistazo. Agradecemos sus comentarios sobre todas las herramientas de CrUX; para compartir sus pensamientos y preguntas, llámenos al @ChromeUXReport Cuenta de Twitter o Grupo de Google.

Panel de rendimiento de Chrome DevTools

Depurar eventos de cambio de diseño en la sección Experiencia

Las DevTools de Chrome Actuación el panel tiene un nuevo Sección de experiencia que pueden ayudarlo a detectar cambios de diseño inesperados. Esto es útil para encontrar y solucionar problemas de inestabilidad visual en su página que contribuyen al cambio de diseño acumulativo.

Seleccione un cambio de diseño para ver sus detalles en el Resumen lengüeta. Para visualizar dónde ocurrió el cambio en sí, coloque el cursor sobre el Movido de y Trasladado a campos.

Preparación de la interacción de depuración con Tiempo total de bloqueo en el pie de página

La métrica Total Blocking Time (TBT) se puede medir en herramientas de laboratorio y es un excelente proxy para el retraso de la primera entrada. TBT mide la cantidad total de tiempo entre First Contentful Paint (FCP) y Time to Interactive (TTI) donde el hilo principal se bloqueó durante el tiempo suficiente para evitar la respuesta de entrada. Las optimizaciones de rendimiento que mejoran el TBT en el laboratorio deberían mejorar la FID en el campo.

TBT ahora se muestra en el pie de página de Chrome DevTools Actuación panel cuando mide el rendimiento de la página:

1. prensa Control+Shift+J (o Command+Option+J en Mac) para abrir DevTools.
2. Haga clic en el Actuación lengüeta.
3. Hacer clic Grabar.
4. Vuelva a cargar la página manualmente.
5. Espere a que se cargue la página y luego detenga la grabación.

Para más información, ver Novedades de DevTools (Chrome 84).

Consola de búsqueda

El nuevo Informe Core Web Vitals en Search Console lo ayuda a identificar grupos de páginas en su sitio que requieren atención, según los datos del mundo real (de campo) de CrUX. El rendimiento de la URL se agrupa por estado, tipo de métrica y grupo de URL (grupos de páginas web similares).

El informe se basa en las tres métricas de Core Web Vitals: LCP, FID y CLS. Si una URL no tiene una cantidad mínima de datos de informes para estas métricas, se omite del informe. Pruebe el nuevo informe para obtener una visión integral del rendimiento de su origen.

Una vez que identifique un tipo de página que tiene problemas relacionados con Core Web Vitals, puede usar PageSpeed ​​Insights para obtener información sobre sugerencias de optimización específicas para páginas representativas.

web.dev

web.dev/measure le permite medir el rendimiento de su página a lo largo del tiempo, proporcionando una lista priorizada de guías y codelabs sobre cómo mejorar. Su medición está impulsada por PageSpeed ​​Insights. La herramienta de medición ahora también es compatible con las métricas de Core Web Vitals, como se muestra a continuación:

Extensión Web Vitals

La extensión Web Vitals mide las tres métricas de Core Web Vitals en tiempo real para (escritorio) Google Chrome. Esto es útil para detectar problemas desde el principio durante el flujo de trabajo de desarrollo y como herramienta de diagnóstico para evaluar el rendimiento de Core Web Vitals mientras navega por la web.

La extensión ahora está disponible para instalar desde el Tienda virtual de Chrome! Esperamos que te sea de utilidad. Agradecemos cualquier contribución para mejorarlo, así como comentarios sobre el proyecto. GitHub repositorio.

Destacados rápidos

¡Eso es un envoltorio! ¿Qué puedes hacer a continuación?

• Utilizar Faro en DevTools para optimizar su experiencia de usuario y asegurarse de que se está preparando para el éxito con Core Web Vitals en el campo.
• Utilizar PageSpeed ​​Insights para comparar el rendimiento de Core Web Vitals de laboratorio y de campo.
• Prueba lo nuevo API de informe de experiencia de usuario de Chrome para acceder fácilmente al rendimiento de su origen y URL con Core Web Vitals durante los últimos 28 días.
• Utilizar el Experiencia sección y pie de página en DevTools Actuación panel para profundizar y depurar contra Core Web Vitals específicos.
• Utilizar Informe de Core Web Vitals de Search Console para obtener un resumen de cómo se están desempeñando sus orígenes en el campo.
• Utilizar el Extensión Web Vitals para realizar un seguimiento del rendimiento de una página frente a Core Web Vitals en tiempo real.

Cubriremos más sobre nuestras herramientas Core Web Vitals en web.dev Live en junio. ¡Regístrese para recibir actualizaciones sobre el evento!

~ por Elizabeth y Addy, conserjes de WebPerf