NOTA: Mi recomendación siempre que realices una auditoría con estas herramientas, es que las hagas en una pestaña de incógnito y con todas las extensiones en Chrome deshabilitadas en modo incógnito. Leer artículo «Cómo entender y aplicar CWV«.
Antes de comenzar a ver las diferentes herramientas de auditoría de las CWV, es importante tener claro que los resultados ofrecidos por las herramientas GSC, PSI y Lighthouse son diferentes ya que miden cosas distintas (así lo aclaró Rick Viscomi en este post del foro 02/08/21):
Resumen: Search Console y PageSpeed Insights son herramientas que informan sobre las experiencias reales de los usuarios en tu sitio aunque lo hagan con diferentes niveles de granularidad. Sin embargo, Lighthouse (que también se informa en PageSpeed Insights en la sección "Datos de laboratorio") informa sobre experiencias sintéticas / simuladas o también conocidas como de Laboratorio.
Estructura del contenido
17/08/2021 – ¿Por qué Lab y Field data pueden dar resultados distintos?
Después del comentario de Rick Viscomi en el foro de Chromium a respuesta de un usuario, la seguida publicación del post de Google oficial sobre la combinación y uso de las tools de Google para auditar las CWV, el pasado 17 de agosto de 2021 se publicó una nueva entrada en la página web.dev donde tratan de aclaran aún más por qué es que existe diferencia en los resultados que se ofrecen en las diferentes herramientas de field y lab data para una página concreta.
En el ejemplo que mencionan en la entrada se ve la diferencia en los resultados obtenidos para esa página entre lab and field data.
La explicación básica de por qué difieren esos datos para una misma métrica es porque las herramientas de lab y field data son distintas de origen en el análisis, una se hace bajo un entorno simulado y la otra con información real de los usuarios. Y es que, field data integra una gran variedad de condiciones en las conexiones y dispositivos además de diferentes comportamientos del usuario, caché del navegador, caché de las páginas AMP, etc. Sin embargo, lab data limita esos condicionantes anteriores a un tipo concreto de conexión, un único dispositivo y una única zona de geolocalización.
El entorno de laboratorio es recomendable para aplicar en una fase de desarrollo antes de una subida a producción del cambio aunque no se esté teniendo algunas acciones del usuario reales como el scrolling, selección de texto o tapping en ciertos elementos de la página (FID).
Lo malo de los datos de campo que usa la herramienta, es que se recogen cada 28 días y no en tiempo real, por lo que esa información que ofrece tras el análisis es de los últimos 28 días / 1 mes. Ver enlace al directo de Twitch de midudev.
09/08/2021 – Cómo combinar las distintas herramientas de Google para auditar, mejorar y monitorizar las Core Web Vitals
El pasado 9 de agosto de 2021 Google hizo público un post desde su dominio de web.dev (donde está toda la información acerca de performance, etc.) donde apuntan los pasos a seguir en la auditoría de las CWV de un sitio mediante sus herramientas.
- CrUX en DataStudio por ejemplo para detectar a grandes rasgos el % de urls buenas, malas o a mejorar agregado del dominio.
- GSC para identificar los grupos de páginas donde focalizar las acciones.
- PSI para darle más detalle a nivel url e identificar el problema concreto que se aplicará al resto del grupo.
- Lighthouse para auditar una página en concreto a nivel simulado y detectar las mejoras.
- La extensión de navegador «Web Vitals» para analizar las métricas CWV en tiempo real en una página. Su punto fuerte respecto a Lighthouse por ejemplo, es que, la extensión mide el FID y CLS durante la interacción con la página, mientras que la segunda solo captura las métricas hasta que se carga la página (y excluye FID).
- La herramienta de desarrolladores de Chrome para hacer debugging de los errores de rendimiento y testar cambios de código…
- Usar CrUX BigQuery, las API de CrUX y PSI y el JS de web-vitals para automatizar y personalizar dashboard a medida.
- Usar la suite de herramientas de Lighthouse para crear un dashboard que monitorice datos de laboratorio.
Chrome DevTools
Desde la última versión de Chrome v.90 ya es posible ver el overlay de las Core Web Vitals a nivel de página.
Sólo tienes que habilitar una opción desde el propio panel de renderizado llamado «Core Web Vitals» y se mostrará un panel visual junto a la página que marcará las tres métricas.
Para ello tienes que, dentro de la herramienta de DevTool, pulsar Command+Shift+P (Mac) o Control+Shift+P (Windows, Linux) y se abrirá un Menú de Comandos – buscas «Show Rendering» y se te desplegará un panel que te permitirá seleccionar dicha opción.
También, dentro de la parte de Chrome DevTools, en Performance, se encuentra habilitada la opción de «Web Vitals» que permite analizar la información sobre First Contentful Paint (FCP), Largest Contentful Paint (LCP) y Layout Shift (LS).
Lighthouse – Chrome
Desde el panel de desarrolladores de Chrome, en la opción «Lighthouse» es posible hacer una auditoría de rendimiento completo de una url simulando desktop o móvil (recordemos que Lighthouse es una herramienta de laboratorio). Desde Chrome es posible realizar una auditoría de performance y filtrar las diferentes acciones según las métricas CWV (+FCP).
AMP Page Experience Guide
Aunque por defecto el framework de AMP ya goza de una estructura html optimizada para las Core Web Vitals, a través de la herramienta AMP Page Experience Guide es posible detectar mejoras en cuanto al rendimiento de este formato. Más información en este post.
El funcionamiento es muy sencillo, simplemente añades la url en su versión AMP a analizar y te reporta un informe detallado sobre mejoras. Si tienes dudas a la hora de saber cuál es la url AMP de tus páginas, puedes comprobarlo en el código fuente de la versión web (rel amphtml) o activando la extensión de Chrome «AMP Validator».
WebPageTest.org by Catchpoint
Se trata de una herramienta gratuita referente en la comunidad webperf y que te permite analizar los estados de carga de cada elemento testado en la página durante la misma. Existen otras herramientas de pago que llevan a más detalle como Dareboost, GTMetrix, Pingdom, SpeedCurve o Quanta y que permiten evaluar la velocidad de carga y el rendimiento del sitio.
La nueva versión de WebPageTest, está en constante evolución adaptándose a la novedades sobre medición de las CWV. Os recomiendo seguir su cuenta oficial de Twitter donde van comunicando sus actualizaciones.
Es una de las mejores opciones para analizar por ejemplo CLS y LCP porque tras el análisis puedes ver resaltado en el filmstrip del render de la página cuáles son las ventanas de cambios de layout que se producen, su peso y puntuación total; y por otro lado puedes ver resaltado cuál es el elemento LCP más importante de la páginas para optimizarlo. Además de analizar el waterfall de peticiones que pueden lastrar tu FID con largas tareas de ejecución de javascript, etc.
Recientemente publicaron una actualización de la herramienta que integra la opción de Web Vitals y donde se ofrecen los resultados de lab y field data.
También se ha añadido un visual en el análisis que ayuda a identificar aquellos recursos que están bloqueando el renderizado de la página.
Page Speed Insights
Con la herramienta de PageSpeed Insights vas a poder ver los resultados para una url específica tanto de laboratorio como de campo. También te ofrece la información de todo el origen del site si es capaz de recopilar información suficiente. Esta herramienta es una buena forma de empezar a analizar las CWV porque combinan ambos mundos «field» y «lab». Enlace «Novedades CWV Google I/O 2021«.
Ten en cuenta que la discrepancia de valores en las CWV que da SPI entre Field Data y Lab Data existen porque la forma de analizarlos es diferente. En Lab te ayuda a debugger la página mientras que Field te da la información real de experiencia de usuario.
«Web Vitals» Chrome Extensión
El pasado 2 de julio se publicó un post por parte de Google donde actualizaban algunas características de la extensión «Web Vitals» en Chrome.
A la hora de realizar una prueba de rendimiento sobre una página, hay que tener en cuenta que lo resultados no van a ser igual que los que pueden experimentar tus usuarios reales, ya que la conectividad y el equipo sobre el que realizas la prueba seguramente difieran.
Es por ello, que la extensión en su versión 1.0 incluye una nueva mejora que es la integración de datos de usuarios reales de CrUX por defecto a nivel de página y desde desktop, así como también de origen.
Al ser una extensión de Chrome en PC, los datos por defecto se analizar desde desktop, pero es posible configurarlo para móvil desde la parte de configuración «opciones» y en la opción «compare local experiences to phone field data».
Existen casos en los que no se reportan datos en la extensión, esto es quizás porque esa url no tiene datos en el CrUX de Google, ya sea porque esa página es de reciente creación y no ha sido analizada en el dataset o porque no tiene suficiente tráfico registrado, etc.
También hay casos en los que el resultado de FID es «Waiting por input», esto ocurre porque la métrica First Input Delay es una métrica de campo que mide la experiencia real del usuario en cuanto a su interacción con la página, por lo que la extensión necesita de interacción para poder ofrecer datos.
Si el origen o web entera no tiene suficiente data, la extensión mostrará los resultados locales.
Chrome UX Report Compare Tool
Otra de las alternativas a la hora de medir las CWV de forma gratuita y online, para además de tener información de la competencia es la herramienta creada por Addy Osmani llamada «Chrome UX Report Compare Tool«.
Con esta herramienta puedes ver la información de campo adelantada (como si fuera en «tiempo real») del estado de las CWV que tendrás en CrUX pasados los 28 días de recolección de la data y que después verás en tus informes de DataStudio o GSC…, tanto a nivel de página por url como del sitio por origen (dominio), e incluso discriminar por tipo de dispositivo. Además de las tres métricas clave, añade FCP como métrica de rendimiento adicional.
Es posible también que la tool no devuelva información si la url no tiene suficiente información como para ser recogida en CrUX…
Herramientas alternativas gratuitas y online
Otras herramientas online para hacer análisis de CWV y monitorización en el tiempo son:
Analizando CLS
- Extensiones Chrome
Journey Further CLS Checker – permite ver en tiempo real la métrica directamente en el navegador.
- Otras herramientas online
Cumulative Layout Shift Debugger (CLS)
