Google ha añadido recientemente 2 nuevas métricas del motor de Lighthouse a los análisis de métricas web principales: INP y TTFB. Estas nuevas métricas ya están disponibles tanto en el analizador PageSpeed como en otros servicios como WebPageTest.
¿Por qué estas dos nuevas métricas?
La pregunta más bien sería ¿por qué no antes?, y me explico …
En mi opinión siempre han faltado en el análisis de optimización web de PageSpeed medir el tiempo hasta el primer byte de información servido por la página, una métrica que siempre ha existido y se apartó de la herramienta, y por otro lado, algún modo de medir cuándo todos los recursos de la página están disponibles y se puede interactuar con ellos, no solo el primero (FID).
Hasta ahora PageSpeed parecía – extrañamente – obsesionado solamente con el momento desde el que se pinta el primer elemento de la parte inicialmente visible del documento (FCP) hasta la primera interacción (FID), en el primer pliegue. (above the fold), pero no en el comportamiento global de la página.
Y esto es lo que viene a subsanar esta incorporación.
TTFB – Time To First Byte
El TTFB o tiempo hasta el primer byte es ya una métrica conocida, y es ni más ni menos el tiempo que tarda el navegador desde que tecleas una URL y pulsas Intro o haces clic en la URL y esta empieza a cargar.
No hace falta recordar que un TTFB alto es peor que uno bajo, cuanto menos tarde en cargar el primer byte de la página mejor.
En esta métrica influyen muchísimo las redirecciones, el tiempo de respuesta del servidor de DNS, del certificado SSL y, finalmente, del servidor web donde esté alojada la web, y en realidad era ya una métrica que afectaba a todas las demás.
Siempre ha sido una métrica muy importante, y ahora tiene su reflejo en PageSpeed. Como ya escribí en profundidad sobre el TTFB te animo a repasar esta guía de qué factores le afectan, y cómo mejorar el TTFB en tu WordPress.
No obstante, por resumir, esta sería una buena estrategia para mantener un TTFB bajo:
- Evita las redirecciones múltiples
- Añade la cabecera HSTS para evitar la latencia de comprobación de http a https
- Usa HTTP/2 o HTTP/3
- Precarga todos los recursos posibles
- Aplica un prefetch predictivo a ser posible
- Contrata con un buen hosting
INP – Interaction to Next Paint
El INP o interacción con el siguiente pintado sí es una métrica nueva, pero para los análisis, pues no es algo que como usuario no tuviésemos en cuenta a la hora de analizar la experiencia de navegación por una web.
Parece ser que – por fin – Google se ha dado cuenta de que el usuario medio pasa la mayoría del tiempo navegando por tooodo ese otro 90% de la página que no es el primer pliegue (above the fold), haciendo clic en imágenes, botones, productos, interactuando con los distintos elementos de las páginas.
Pues bien, ahora ya medirá también esas «otras» interacciones, no solo la primera (FID).
Ejemplos de INP serían …
- Tiempo desde que el usuario hace clic en un menú móvil hasta que se muestran sus elementos desplegables.
- Tiempo desde que el usuario añade un producto al carrito y la página muestra el mensaje de que se ha añadido al carrito y puede visitarlo o finalizar compra.
- Tiempo desde que el usuario hace clic en la miniatura de una galería de imágenes y se muestra la imagen elegida.
Y esto en toda la página, no solo en el primer pliegue de la misma.
Google ilustra con este gráfico un ejemplo de buena y mala respuesta de INP…
En la segunda imagen la respuesta (good responsiveness) de la página a la interacción del usuario es inmediata, y eso sería un buen INP.
¿Cómo mide Google el INP?
Ahora, resulta que en una página puede haber varios elementos que ofrezcan interacción, o ninguno, entonces ¿cómo hace Google para mostrar una métrica que refleje si esa página tiene un buen o mal INP?
Básicamente la medición es esta:
- INP inferior a 200 ms es igual a buena capacidad de respuesta de la página.
- INP entre 200 y 500 ms indica que debe mejorarse la capacidad de respuesta.
- INP de más de 500 ms es que la página tiene una pobre capacidad de respuesta.
Y se analizará así:
- Si la página no tiene elementos interactivos (botones, etc.) no se muestra resultado de INP.
- Si la página tiene menos de 50 elementos interactivos se muestra el resultado del que obtenga el peor resultado (peor tiempo de disponibilidad)
- Si la página tiene muchos elementos interactivos (más de 50) el resultado será el percentil 98 del tiempo de disponibilidad.
¿Cómo puedo mejorar el INP?
La incorporación de la nueva métrica de INP, aún en pruebas, introduce unos cuantos interrogantes a la hora de aplicar estrategias de WPO a nuestras webs WordPress, y no es para menos.
Resulta que, hasta ahora, Google se estaba centrando muchísimo en el primer pliegue, en esa primera impresión de las páginas web, y esto ha llevado a muchos administradores a aplicar técnicas de optimización de carga específicamente centradas en ese primer pliegue (above the fold), quizás descuidando de algún modo la disponibilidad del resto de recursos de las páginas.
Y es que si te obsesionas con el primer contenido de una página, lógicamente, aplicarás técnicas de optimización que aplacen todos los recursos que no sean necesarios para ese primer contenido. Me refiero a técnicas como:
Una aplicación demasiado concienzuda de estas técnicas puede provocar que otros recursos interactivos de la página simplemente no funcionen, o que tarden demasiado en estar disponibles, perjudicando la métrica del INP.
¿Significa esto que debo cambiar totalmente de técnicas de WPO y empezar a optimizar a muerte el INP?
Tampoco. Para empezar, recuerda que el INP es una métrica aún en pruebas, y que por su interrelación con otras métricas habrá próximas modificaciones en el modo de medir esta y otras de las métricas afectadas. Esto significa, además, que de momento no debería tener influencia alguna en los factores de posicionamiento.
Ahora bien, lo que sí es el INP es una métrica importante para tus usuarios, hasta ahora igual algo menospreciada por las métricas web de Google, pues recuerda que tu usuario va a querer interactuar con varios elementos de tus páginas, no solo el primero, y todos deben funcionar, y estar disponibles lo antes posible.
Esto implica que, además de no olvidar ofrecer una primera gran impresión de la optimización de tus páginas (LCP, FCP, FID, TTFB, CLS y TBT), esto no debe perjudicar al resto de elementos de la página (INP), que deben estar disponibles para que el usuario interactúe con ellos lo antes posible.
¿Y cómo se come esto en la vida real, cómo optimizo ahora mis páginas para una experiencia global?
Toda la razón, y como yo lo veo, la cuestión está en que hasta ahora lo estabas haciendo bien, solo que debes tener cuidado de no descuidar el resto del contenido tus páginas.
- ¿Debes crear la ruta crítica de CSS? – Sí, pero asegurándote de que recoge el CSS necesario para todos los recursos de la página.
- ¿Debo cargar condicionalmente CSS y JS? – Sí, pero no dejes de cargar CSS o JS que necesite cualquier recurso interactivo de la página.
- ¿Debo aplazar la carga de JS que bloquee la visualización? – Aplazar sí, pero no dejar de cargarlo en cuando sea necesario por el resto de recursos interactivos de la página.
La prueba definitiva para saber si estás optimizando bien una página de cara a las métricas web principales de Google, y una buena experiencia de tus usuarios sería:
- La página carga rápido y está interactiva de inmediato.
- Todos los recursos interactivos de la página funcionan correctamente y sin esperas.
Lo mejor de todo es que ahora Google PageSpeed también te ayuda con esa segunda parte, que hasta ahora parecía menos importante para las métricas, pero que nunca dejó de tener relevancia para la experiencia global de tus usuarios.
La entrada INP y TTFB – Nuevas métricas de PageSpeed para medir el WPO la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.
0 Commentaires