Core Web Vitals Visualizer: Extensión gratuita de Chrome para depurar CWV

Una extensión gratuita de Chrome para depurar Core Web Vitals

El Core Web Vitals Visualizer es una extensión gratuita de Chrome que creé para depurar los Core Web Vitals sin abrir DevTools. Crea una superposición en tiempo real en cualquier página, mostrándote exactamente qué elementos afectan tu LCP, CLS e INP. Más de 14,000 desarrolladores la utilizan.

Última revisión por Arjen Karel en marzo de 2026

Como especialista en Core Web Vitals, paso mucho tiempo comprobando cómo reacciona y responde una página cuando interactúo con ella. ¿Qué le hace eso a los Core Web Vitals y cómo cambian las métricas cuando cambio a la emulación móvil o desactivo la caché del navegador?

Por supuesto, utilizo el seguimiento RUM. Eso me indica a nivel de página qué métricas aprueban y cuáles no. Pero, ¿por qué fallan? Eso es algo que en realidad solo puedes averiguar cuando interactúas con la página.

Para ahorrarme mucho tiempo, decidí automatizar una pequeña parte de un proceso largo y crear una extensión de Chrome que hace parte del trabajo tedioso por mí. El resultado es el Core Web Vitals Visualizer. Decidí ponerlo a disposición de todos, así que anímate y échale un vistazo en la Chrome Web Store.

¿Qué hace el Core Web Vitals Visualizer?

Primero, registra los Core Web Vitals según tu interacción con la página. Rastrea el Largest Contentful Paint, el Interaction to Next Paint, el Cumulative Layout Shift, el First Contentful Paint y el Time to First Byte.

A continuación, crea una superposición que visualiza todas esas métricas. Esto te indica qué elemento es el Largest Contentful Paint, qué elementos causan inestabilidad visual y, si has interactuado con la página, qué evento causó el peor retraso de entrada.

Al hacer clic en cualquiera de las métricas, el Core Web Vitals Visualizer las desglosa en sus componentes más básicos. Para el LCP, eso significa que ves el retraso de carga del recurso, la duración de carga y el retraso de renderizado del elemento. Para el INP, obtienes el retraso de entrada, el tiempo de procesamiento y el retraso de presentación.

¿Por qué no usar Lighthouse?

Me hacen mucho esta pregunta. Mi respuesta siempre es: "Nunca dije que no uso Lighthouse" (aunque no uso Lighthouse tan a menudo). Lighthouse es una gran herramienta y deberías familiarizarte con ella.

Pero hay diferencias importantes. Lighthouse es una prueba de laboratorio y los datos podrían no ser representativos de la vida real. Es por eso que mi extensión utiliza los datos reales de tu navegador. Lighthouse tampoco te proporciona resultados de interacción reales. No puede medir el INP porque no hay un usuario real interactuando con la página. En su lugar, utiliza el Total Blocking Time como indicador. Mi extensión visualiza el CLS real a medida que ocurre y desglosa el LCP y el INP en sus subpartes para que puedas ver exactamente en qué se va el tiempo.

¿Qué pasa con la extensión Web Vitals de Google?

Google descontinuó su extensión de Chrome Web Vitals en enero de 2025. Ahora recomiendan usar el panel de Rendimiento de DevTools en su lugar. DevTools es potente, pero a veces solo quieres una superposición rápida sin abrir una sesión de perfilado completa. Eso es exactamente lo que hace el Core Web Vitals Visualizer. También proporciona los desgloses de las subpartes de las métricas que DevTools no muestra en una sola vista.

Instala el Core Web Vitals Visualizer

Dirígete a la Chrome Web Store e instala el Core Web Vitals Visualizer. Y tal vez, si te gusta, deja una reseña. Te lo agradecería.