Cómo auditar las Core Web Vitals – Herramientas Online

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.

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.

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.

Patrick Meenan tweet

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