Tus herramientas para desarrolladores favoritas ahora pueden medir las Métricas web esenciales.
La iniciativa de Métricas web, que se anunció recientemente, proporciona orientación unificada sobre los indicadores de calidad que son esenciales para que todos los sitios ofrezcan una excelente experiencia del usuario en la Web. Nos complace anunciar que todas las herramientas populares de Google para desarrolladores web ahora admiten la medición de las Métricas web esenciales, lo que te ayuda a diagnosticar y solucionar problemas con la experiencia del usuario con mayor facilidad. Esto incluye Lighthouse, PageSpeed Insights, las Herramientas para desarrolladores de Chrome, Search Console, la herramienta de medición de web.dev, la extensión de Chrome de Métricas web y una nueva API de Informe de UX de Chrome.
Ahora que la Búsqueda de Google incluye las Métricas web esenciales como base para evaluar la experiencia en la página, es importante que estas métricas estén lo más disponibles y sean prácticas posibles.
Para comenzar a optimizar la experiencia del usuario con las Métricas web esenciales, prueba el siguiente flujo de trabajo:
- Usa el nuevo informe de Métricas web esenciales de Search Console para identificar los grupos de páginas que requieren atención (en función de los datos de campo).
- Cuando hayas identificado las páginas que necesitan trabajo, usa PageSpeed Insights (con la tecnología de Lighthouse y el informe de UX de Chrome) para diagnosticar problemas de laboratorio y de campo en una página. PageSpeed Insights (PSI) está disponible a través de Search Console o puedes ingresar una URL directamente en PSI.
- ¿Todo listo para optimizar tu sitio de forma local en el lab? Usa Lighthouse y las Herramientas para desarrolladores de Chrome para medir las Métricas web esenciales y obtener orientación práctica sobre lo que debes corregir. La extensión de Chrome de Métricas web le brinda una vista en tiempo real de las métricas en computadoras de escritorio.
- ¿Necesitas un panel personalizado de Métricas web esenciales? Usa el panel de CrUX actualizado o la nueva API de Chrome UX Report para los datos de campo o la API de PageSpeed Insights para los datos de lab.
- Si buscas orientación, web.dev/measure puede ayudarte a medir tu página y mostrarte un conjunto priorizado de guías y codelabs para la optimización usando datos de PSI.
- Por último, usa Lighthouse CI en las solicitudes de extracción para asegurarte de que no haya regresiones en las Métricas web esenciales antes de implementar un cambio en la producción.
Con esa introducción, profundicemos en las actualizaciones específicas de cada herramienta.
Faro
Lighthouse es una herramienta automatizada de auditoría de sitios web que ayuda a los desarrolladores a diagnosticar problemas y a identificar oportunidades para mejorar la experiencia del usuario de sus sitios. Mide varias dimensiones de la calidad de la experiencia del usuario en el entorno de un lab, incluidos el rendimiento y la accesibilidad. La versión más reciente de Lighthouse (6.0, lanzada a mediados de mayo de 2020) incluye auditorías adicionales, métricas nuevas y una puntuación de rendimiento nueva.
Lighthouse 6.0 incorpora tres métricas nuevas en el informe. Dos de estas métricas nuevas, el Largest Contentful Paint (LCP) y el Cambio de diseño acumulado (CLS), son implementaciones de lab de las Métricas web esenciales y proporcionan información de diagnóstico importante para optimizar la experiencia del usuario. Dada su importancia para evaluar la experiencia del usuario, las métricas nuevas no solo se miden y se incluyen en el informe, sino que también se tienen en cuenta para calcular la puntuación de rendimiento.
La tercera métrica nueva incluida en Lighthouse, el Tiempo de bloqueo total (TBT), se correlaciona bien con la métrica de campo Retraso de primera entrada (FID), otra métrica de Métricas web esenciales. Seguir las recomendaciones proporcionadas en el informe de Lighthouse y realizar optimizaciones en función de tus puntuaciones te permitirá proporcionar la mejor experiencia posible a tus usuarios.
Todos los productos que administra Lighthouse se actualizan para reflejar la versión más reciente, incluido Lighthouse CI, que te permite medir con facilidad tus Métricas web esenciales en las solicitudes de extracción antes de que se combinen y se implementen.
Para obtener más información sobre las actualizaciones más recientes de Lighthouse, consulta nuestra entrada de blog Novedades de Lighthouse 6.0.
PageSpeed Insights
La herramienta PageSpeed Insights (PSI) informa sobre el rendimiento de labs y campos de una página en dispositivos móviles y computadoras. La herramienta proporciona una descripción general de la manera en que los usuarios del mundo real experimentan la página (con la tecnología del Informe sobre la experiencia del usuario de Chrome) y un conjunto de recomendaciones prácticas sobre cómo el propietario de un sitio puede mejorar la experiencia de página (proporcionadas por Lighthouse).
También se actualizaron PageSpeed Insights y la API de PageSpeed Insights para usar Lighthouse 6.0 de forma interna y ahora admiten la medición de Métricas web esenciales en las secciones del lab y de los campos del informe. Las Métricas web esenciales se anotan con una cinta azul, como se muestra a continuación.
Mientras que Search Console les ofrece a los propietarios de sitios una excelente descripción general de los grupos de páginas que requieren atención, PSI ayuda a identificar oportunidades por página para mejorar la experiencia de página. En PSI, puedes ver claramente si tu página cumple con los umbrales de una buena experiencia en todas las Métricas web esenciales en la parte superior del informe, que se indica aprueba la evaluación de Métricas web esenciales o no aprueba la evaluación.
CrUX
El Informe de UX de Chrome (CrUX) es un conjunto de datos público que incluye datos sobre la experiencia del usuario real en millones de sitios web. Mide las versiones de campo de todas las Métricas web esenciales. A diferencia de los datos de lab, los de CrUX provienen de usuarios que aceptaron participar en el campo. Con estos datos, los desarrolladores pueden comprender la distribución de las experiencias del usuario en el mundo real en sus propios sitios web o incluso en los de la competencia. Incluso si no tienes RUM en tu sitio, CrUX puede proporcionar una forma rápida y sencilla de evaluar tus Métricas web esenciales. El conjunto de datos de CrUX en BigQuery incluye datos de rendimiento detallados para todas las Métricas web esenciales y está disponible en instantáneas mensuales a nivel del origen.
La única forma de conocer realmente el rendimiento de tu sitio para los usuarios es medir su rendimiento en el campo mientras esos usuarios lo cargan y lo interactúan con él. Este tipo de medición se conoce comúnmente como supervisión de usuarios reales o RUM. Incluso si no tienes RUM en tu sitio, CrUX puede proporcionar una forma rápida y sencilla de evaluar tus Métricas web esenciales.
Presentamos la API de CrUX
Hoy nos complace anunciar la API de CrUX, una forma rápida y gratuita de integrar fácilmente tus flujos de trabajo de desarrollo con la medición de la calidad a nivel de origen y URL para las siguientes métricas de campo:
- Procesamiento de imagen con contenido más grande
- Cambio de diseño acumulado
- Retraso de primera entrada
- Primer procesamiento de imagen con contenido
Los desarrolladores pueden buscar un origen o una URL y segmentar los resultados según diferentes factores de forma. La API se actualiza a diario y resume los datos de los últimos 28 días (a diferencia del conjunto de datos de BigQuery, que se agrega mensualmente). Además, la API tiene las mismas cuotas de API públicas flexibles que establecemos en nuestra otra API, la API de PageSpeed Insights (25,000 solicitudes por día).
A continuación, se muestra una demostración con la API de CrUX para visualizar las métricas web esenciales con distribuciones buenas, requieren mejoras y deficientes:
En versiones futuras, planeamos expandir la API para habilitar el acceso a dimensiones y métricas adicionales de los conjuntos de datos de CrUX.
Panel de CrUX renovado
El nuevo diseño del Panel de CrUX te permite hacer un seguimiento con facilidad del rendimiento de un origen en el tiempo, y ahora puedes usarlo para supervisar las distribuciones de todas las métricas web esenciales. Para comenzar a usar el panel, consulta nuestro instructivo en web.dev.
Presentamos una nueva página de destino de Métricas web esenciales para que sea aún más fácil consultar el rendimiento de tu sitio de un vistazo. Agradecemos tus comentarios sobre todas las herramientas de CrUX. Para compartir tus ideas y preguntas, escríbenos a la cuenta de Twitter @ChromeUXReport o al Grupo de Google.
Panel de rendimiento de las Herramientas para desarrolladores de Chrome
Depura eventos de Cambio de diseño en la sección Experiencia
El panel Rendimiento de las Herramientas para desarrolladores de Chrome tiene una nueva sección Experiencia que puede ayudarte a detectar cambios de diseño inesperados. Esto es útil para encontrar y corregir problemas de inestabilidad visual en tu página que contribuyen al Cambio de diseño acumulado.
Selecciona un Cambio de diseño para ver sus detalles en la pestaña Resumen. Para ver dónde ocurrió el cambio, coloca el cursor sobre los campos Se movió desde y Se movió a.
Depura la preparación de interacción con el tiempo de bloqueo total en el pie de página
La métrica del tiempo de bloqueo total (TBT) se puede medir en las herramientas del lab y es un excelente proxy para el retraso de primera entrada. TBT mide la cantidad de tiempo total entre el primer procesamiento de imagen con contenido (FCP) y el tiempo de carga (TTI), durante el cual se bloqueó el subproceso principal durante el tiempo suficiente para evitar la capacidad de respuesta de la entrada. Las optimizaciones de rendimiento que mejoran la TBT en el lab deberían mejorar el FID en el campo.
La TBT ahora se muestra en el pie de página del panel Rendimiento de las Herramientas para desarrolladores de Chrome cuando se mide el rendimiento de la página:
- Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Rendimiento.
- Haz clic en Grabar.
- Vuelve a cargar la página manualmente.
- Espera a que se cargue la página y, luego, deja de grabar.
Para obtener más información, consulte Novedades de Herramientas para desarrolladores (Chrome 84).
Search Console
El nuevo informe de Métricas web esenciales de Search Console te ayuda a identificar grupos de páginas de tu sitio que requieren atención, en función de datos reales (de campo) de CrUX. El rendimiento de las URLs se agrupa por estado, tipo de métrica y grupo de URLs (grupos de páginas web similares).
El informe se basa en las tres métricas web esenciales: LCP, FID y CLS. Si una URL no tiene una cantidad mínima de datos de informes para estas métricas, se omitirá del informe. Prueba el nuevo informe para obtener una visión integral del rendimiento de tu origen.
Una vez que identifiques un tipo de página que tiene problemas relacionados con las Métricas web esenciales, puedes usar PageSpeed Insights para obtener sugerencias de optimización específicas para páginas representativas.
web.dev
https://pagespeed.web.dev/ te permite medir el rendimiento de tu página a lo largo del tiempo y proporciona una lista priorizada de guías y codelabs sobre cómo mejorar. Su medición cuenta con la tecnología de PageSpeed Insights. La herramienta de medición ahora también admite las métricas web esenciales, como se muestra a continuación:
Extensión de Métricas web
La extensión de Métricas web mide tres métricas en tiempo real para Google Chrome (para computadoras de escritorio). Esto es útil para detectar problemas al principio del flujo de trabajo de desarrollo y como herramienta de diagnóstico para evaluar el rendimiento de las Métricas web esenciales mientras navegas por la Web.
La extensión ya está disponible para instalarla desde Chrome Web Store. Esperamos que te resulte útil. Agradecemos cualquier contribución para mejorarlo, así como los comentarios sobre el repositorio de GitHub del proyecto.
Aspectos destacados
¡Eso es todo! Qué puedes hacer a continuación:
- Usa Lighthouse en las Herramientas para desarrolladores a fin de optimizar la experiencia del usuario y asegurarte de alcanzar el éxito con las Métricas web esenciales en el campo.
- Usa PageSpeed Insights para comparar el rendimiento de las Métricas web esenciales de tu lab y campo.
- Prueba la nueva API del Informe sobre la experiencia del usuario en Chrome para acceder fácilmente al rendimiento de tu origen y URL en relación con las Métricas web esenciales durante los últimos 28 días.
- Usa la sección Experiencia y el pie de página en el panel Rendimiento de Herramientas para desarrolladores para profundizar y depurar en función de Métricas web esenciales específicas.
- Usa el informe de Métricas web esenciales de Search Console para obtener un resumen del rendimiento de tus orígenes en el campo.
- Usa la extensión de Métricas web para hacer un seguimiento del rendimiento de una página en comparación con las Métricas web esenciales en tiempo real.
En junio, analizaremos nuestras herramientas de Métricas web esenciales en web.dev Live. Regístrate para enterarte de las novedades del evento.
~ de Elizabeth y Addy, WebPerf Janitors