Cómo auditar las Core Web Vitals – Herramientas Online

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.

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.


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.

Ejemplo de un análisis de una página de web dev donde se ofrecen los datos

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).

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.

Workflow recomendado por Google para optimizar CWV
  • 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

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.

Web Vitals Extension Chrome

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.

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)

Layout Shift – GIF Generator