Las nuevas métricas mejoran los comentarios sobre la velocidad relacionada con el servidor y brindan una representación más completa del rendimiento de la página que la disponible anteriormente.
PageSpeed Insights de Google agregó dos nuevas métricas a la API y la interfaz de usuario de PageSpeed Insights para Lighthouse. Las dos métricas etiquetadas como experimentales ahora se recopilan para datos de campo, mientras que los datos de laboratorio correspondientes se pueden usar con fines de diagnóstico.
Google Lighthouse actualizado con nuevas métricas
Las nuevas métricas de Lighthouse son:
- Interacción con la siguiente pintura (INP)
- Tiempo hasta el primer byte (TTFB)
Tiempo hasta el primer byte (TTFB)
Mucha gente ya sabrá de Time to First Byte, existe desde hace muchos años y es posible que algunos ya estén familiarizados con él.
La métrica Tiempo hasta el primer byte (TTFB) mide qué tan rápido responde el servidor a una solicitud de un recurso.
Por lo tanto, la importancia de esta métrica es que ayuda a aislar un factor (la capacidad de respuesta del servidor) que puede tener un efecto negativo sobre todas las demás métricas de carga de la página que vienen después.
Eso hace que TTFB sea una métrica muy importante para revisar con fines de diagnóstico.
Cualquiera que se centre en mejorar Core Web Vitals debería echar un vistazo a TTFB para una posible victoria rápida.
Lo que ha cambiado en TTFB es que esta es la primera vez que está disponible como métrica en la sección de resultados de PageSpeed Insights.
Chrome también recopilará e informará datos de campo TTFB por primera vez.
Interacción con la siguiente pintura (INP)
Interaction to Next Paint (INP) es una nueva métrica que representa cuánto tiempo se tarda en interactuar con la página completa, lo que Google llama “latencia de interacción general”.
Las medidas de INP representan cuánto tiempo lleva interactuar con la página completa, lo que contrasta con First Input Delay, que solo mide cuánto tiempo tarda la página en responder a la primera interacción de un visitante del sitio.
Un ejemplo de una página de compras
Google usa un ejemplo de una página de compras para ilustrar la diferencia entre un buen INP y un INP deficiente.
El ejemplo de una página de compras muestra una imagen en la que se puede hacer clic que genera una versión de primer plano más grande.
Asimismo, el ejemplo de capacidad de respuesta deficiente es un usuario que hace clic en la imagen y luego espera que suceda algo mientras la imagen más grande se descarga en el navegador. No hay respuesta de retroalimentación al clic.
Otro ejemplo de una buena capacidad de respuesta es un usuario que hace clic en la misma imagen que responde inmediatamente con un gráfico de carga de página que comunica que se recibió la solicitud de la imagen y que ahora se está cargando.
Lo anterior es un ejemplo de cómo la nueva métrica INP medirá todos los elementos receptivos de una página web para llegar a una representación de Interacción a Next Paint.
Google Web.dev explica la nueva métrica Interaction to Next Paint (INP):
“INP es una métrica que tiene como objetivo representar la latencia de interacción general de una página al seleccionar una de las interacciones más largas que ocurren cuando un usuario visita una página.
Para páginas con menos de 50 interacciones en total, INP es la interacción con peor latencia.
Para páginas con muchas interacciones, el INP suele ser el percentil 98 de latencia de interacción”.
Nuevo diseño de PageSpeed Insights
Las dos nuevas métricas están disponibles para revisar ahora mismo en la herramienta PageSpeed Insights.
Sin embargo, es posible que los datos de campo tarden un tiempo en aparecer porque los datos de campo se derivan de los usuarios reales del navegador Chrome que han optado por permitir que los datos de velocidad de la página se envíen a Google para visitar el sitio y registrar sus datos.
Los puntajes principales de Web Vitals se enumeran primero en una fila (en la vista de escritorio).
Lighthouse luego muestra una segunda fila de métricas:
- First contentful text
- INP
- TTFB
Captura de pantalla de la nueva pantalla de métricas de Lighthouse
Extensión de Chrome Lighthouse
Otra forma de ver las nuevas métricas es con la extensión Chrome Lighthouse.
La forma de usarlo es navegar a cualquier página y un cuadro cuadrado en el lado superior derecho del navegador se volverá rojo o verde dependiendo de si la página pasa las métricas de Core Web Vitals.
Al hacer clic en el cuadro en sí, se activa una visualización del CWV y las métricas experimentales.
Captura de pantalla de Chrome Lighthouse Extension
Nuevas métricas disponibles en herramientas de terceros
Las muchas herramientas de velocidad de página que usan Lighthouse en su análisis también mostrarán las métricas INP y TTFB.
Por ejemplo, WebPageTest.org ahora muestra las nuevas métricas.
Captura de pantalla de los resultados de WebPageTest Lighthouse
Actualizaciones de información sobre la velocidad de la página
También hay actualizaciones adicionales para la herramienta PageSpeed Insights.
Un cambio notable es la velocidad a la que se muestran los resultados, que se logra cargando datos de campo y de laboratorio en paralelo.
Otro cambio es que PageSpeed Insights intentará resolver los redireccionamientos HTTP primero antes de enviarlo a Lighthouse para realizar el análisis. Anteriormente, Lighthouse manejaba los redireccionamientos HTTP mientras realizaba el análisis.
Además de otros dos cambios adicionales:
“Las métricas de Core Web Vitals (CWV) (LCP, FID, CLS) aparecen directamente debajo de la evaluación de CWV.
Ajustamos el diseño, reduciendo la verbosidad y el espacio vertical”.
Los datos de Lighthouse son más útiles
La adición de estas dos métricas, TTFB e INP, hace que todas las herramientas de velocidad de página que utilizan el análisis Lighthouse sean significativamente más útiles. TTFB proporciona comentarios sobre los problemas relacionados con el servidor que pueden ser la base del bajo rendimiento de velocidad en otros lugares e INP ofrece una descripción general más amplia del rendimiento de la página que la que estaba disponible anteriormente.
¿Qué te pareció este artículo?
What do you think about this post?
¡Mira también esto!
