Visualizador de Core Web Vitals

Estamos orgullosos de presentar  el visualizador de Core Web Vitals.

Hoy lanzamos el visualizador de Core Web Vitals gratuito en la Chrome Web Store. 

El visualizador de Core Web Vitals es un complemento de Chrome que ayuda a los usuarios a rastrear y visualizar las Core Web Vitals de una página. Estas métricas incluyen Largest Contentful Paint, First Input Delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint y Time to First Byte. El complemento crea una superposición que muestra al usuario qué elementos son responsables de la inestabilidad visual y qué eventos causan un retraso en la entrada. Además, el complemento desglosa las Core Web Vitals en sus componentes básicos, lo que permite a los usuarios obtener una comprensión más detallada del rendimiento de una página. El complemento está disponible de forma gratuita en la Chrome Web Store.

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

Por supuesto que uso seguimiento RUM.  Eso me dice a nivel de página específica qué métricas pasan y cuáles fallan en Core Web Vitals.  Pero, ¿por qué fallan?  Eso es algo que realmente solo puedes descubrir cuando interactúas con la página.

Para ahorrarme mucho tiempo, decidí automatizar una pequeña parte de un proceso largo y crear un complemento de Chrome que haga parte del trabajo tedioso por mí.  El resultado es el visualizador de Core Web Vitals.  Decidí hacer este complemento disponible para todos.  Así que adelante, pruébalo en la Chrome Web Store.

¿Qué hace el visualizador de Core Web Vitals?

Primero, registra las Core Web Vitals basándose en tu interacción con la página.  Rastrea Largest Contentful Paint,  First Input Delay,  Cumulative Layout Shift,  First Contentful Paint,  Interaction to Next Paint y  Time to First Byte.

Luego creará una superposición que visualizará todas esas métricas. Esto te dirá cuál es el elemento de Largest Contentful Paint,  qué elementos  causan inestabilidad visual  y, si has interactuado con la página, qué evento causó el First Input Delay.

Finalmente, cuando hagas clic en cualquiera de las métricas, el visualizador de Core Web Vitals  desglosará estas métricas en sus componentes más básicos.

¿Por qué no usar Lighthouse?

¡Prueba el visualizador de Core Web Vitals!

Dirígete a la Chrome Store e instala el visualizador de Core Web Vitals. Y quizás... si te gusta, deja una reseña. Te lo agradecería.