Core Web Vitals muestra las tres métricas en las que Google clasifica (LCP, CLS e INP), medidas en vivo en la página que estás viendo, clasificadas según los umbrales de Google y rastreadas hasta el elemento exacto detrás de cada número.
Core Web Vitals decide parte de la clasificación de sus páginas, pero las formas habituales de medirlas son incómodas. Las herramientas de laboratorio obtienen una carga sintética que nadie experimenta. Search Console informa sobre usuarios reales, con cuatro semanas de retraso, agrupados en grupos de URL. Ninguno de los dos le dice qué elemento de la página que tiene delante es el problema.
Esta herramienta mide la página que realmente estás viendo, a medida que la usas. LCP, CLS e INP obtienen cada uno un mosaico con su valor, una calificación Bueno, Necesita trabajo o Malo según los umbrales publicados por Google, y una barra que muestra dónde se sienta. FCP y TTFB se ubican junto a ellos para brindar contexto, porque un LCP lento causado por un servidor lento es un problema diferente a uno causado por una imagen pesada.
Las definiciones coinciden con lo que Chrome informa a CrUX, lo cual es importante si desea comparar números con Search Console. CLS utiliza ventanas de sesión (una ventana termina después de un intervalo de un segundo o de cinco segundos, y gana la peor ventana) en lugar de sumar ingenuamente todos los turnos. INP es el percentil 98 de sus latencias de interacción, que para una visita normal es simplemente la interacción más lenta. LCP deja de cambiar en su primera interacción, exactamente como lo hace Chrome.
Lo más útil es que se atribuya cada número. El panel nombra el elemento de pintura más grande, los elementos que cambiaron y las interacciones más lentas, y un botón Mostrar se desplaza a cualquiera de ellos y lo describe en la página. En lugar de saber que CLS es 0,31, ve el banner que empuja su contenido hacia abajo. Copiar informe le entrega todo como texto para un ticket.
Las tres métricas de clasificación se actualizan a medida que utiliza la página: desplazarse mueve CLS, hacer clic y escribir mover INP. Cada uno tiene una calificación de Bueno, Necesita trabajo o Malo según los umbrales de Google.
Nombra el elemento de pintura más grande, los elementos que cambiaron y las interacciones más lentas. Presione Mostrar para desplazarse a cualquiera de ellos y delinearlo directamente en la página.
CLS utiliza ventanas de sesión con un espacio de 1 s y un límite de 5 s, INP es el percentil 98 de latencias de interacción y LCP se congela en la primera interacción, por lo que sus números se alinean con Search Console.
First Contentful Paint y Time To First Byte se encuentran junto a los tres grandes, por lo que puedes distinguir un servidor lento de una imagen principal pesada antes de comenzar a optimizar lo incorrecto.
Enumera sus interacciones más lentas con el tipo de evento y el elemento involucrado, de modo que se pueda encontrar un menú desplegable o un filtro lento en lugar de adivinarlo.
Un clic copia cada métrica, calificación y selector infractor como texto sin formato, listo para pegar en un ticket, una solicitud de extracción o un correo electrónico de un cliente.
Confirme que LCP, CLS e INP estén en verde en una nueva plantilla antes de que se publique, en lugar de descubrirlo en Search Console un mes después.
Search Console le indica que un grupo de URL falla en CLS; abra uno de ellos con esta herramienta y vea exactamente qué elemento realiza el cambio.
Desplácese por la página y observe el ascenso de CLS, luego presione Mostrar para delinear el anuncio, banner o fuente web de carga tardía que está moviendo su contenido.
Haga clic en filtros, menús y modales, luego lea la lista de interacción más lenta para encontrar qué control cuesta cientos de milisegundos.
Registre los números, implemente la solución, luego mida la misma página nuevamente y compare los dos informes uno al lado del otro.
Haga clic en el icono Core Web Vitals en el Dock de DevSuite Pro. Los mosaicos de métricas aparecen de inmediato utilizando lo que la página ya haya registrado.
LCP solo es significativo desde el inicio de la carga de una página, así que vuelva a cargar con el panel abierto cuando desee una lectura en la que pueda confiar.
Desplácese por toda la página para ejercitar CLS y haga clic, toque y escriba para generar mediciones de INP. Los mosaicos se actualizan a medida que avanzas.
Presione Mostrar junto al elemento LCP, una fuente de cambio de diseño o una interacción lenta. La página se desplaza hasta él y lo describe para que no haya ambigüedad sobre qué elemento es responsable.
Haga clic en Copiar informe para obtener un resumen en texto sin formato de cada métrica, calificación y selector. Presione Restablecer para iniciar CLS e INP nuevamente desde cero.
Instala DevSuite Pro gratis y desbloquea más de 71 herramientas de desarrollador para tu navegador.
