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 por ejemplo deshabilitadas en modo incógnito.

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:

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