¿Y si empezamos a medir realmente lo que el usuario experimenta, mejor que lo que dice Google que pasa?
En el trabajo estamos montando sistemas de monitorización con Playwright bla bla bla, y hoy en una reunión, alguien con mucho criterio ha dicho algo como «esos son datos laboratorio», planteando la opción de tener mediciones en distintas ubicaciones, no sólo donde está ubicado el playwright de turno.
Y se me ha quedado rondando en la cabeza el «eso son datos de laboratorio, de laboratorio, de laboratorio …», y es totalmente cierto, medir con un playwright, con Page Speed, con algún sistema de medición en servidor es una mentira como un templo, pero nos sirve para decir lo grande que la tenemos y para tener un cerca de 100 en Page Speed y que el cliente se quede contento.
Así que ha sido llegar a casa y ponerme a pelotear con Claudio.
Quiero medir realmente los tiempos de carga de los usuarios reales.
¿qué opciones tenemos para medir por usuario?
¿podemos crear un mapa mundial de tiempos de carga según localizaciones?
Y unas pocas de preguntas más, me tropiezo con el término de RUM – Real User Monitoring, BINGO !! a eso me refería, a saber los tiempos reales que sufren los usuarios, que son los que van a sacar la billetera con suerte.
Me habla de posibilidad de un javascript que mida y mande a un endpoint los datos, lo cual me parece guay, pero claro, me surge la primera duda:
Si es un Javascript, hasta que el navegador no lo tenga, no va a empezar a medir, por lo que para medir tiempos de carga, 🤔 no se Rick !!
Y aquí es donde viene la magia, porque por lo visto el navegador recoge tiempos 0s, es decir que cuando tu mandas la request el navegador ya guarda ese momento, por lo que cuando tengamos el .js podremos tomar esa cota como momento cero y poder calcular tiempos, mooola.
La respuesta molona que me soltó:
t=0 el usuario pide la página (timeOrigin)
t=12 termina la consulta DNS ┐
t=48 conexión TCP establecida │ esto pasa ANTES de que
t=95 TLS negociado │ exista el script,
t=310 llega el primer byte (TTFB) │ pero el navegador
t=1200 DOMContentLoaded │ lo va apuntando todo
t=2100 load ┘
t=2101 ← aquí se ejecuta vuestro script, lee esas marcas y las envía
Todas esas marcas se guardan en performance.getEntriesByType('navigation'), con tiempos relativos al instante 0. Da igual que el script llegue tarde: lee el historial de lo que ya pasó, como la caja negra de un avión, que se consulta después del vuelo.
Lo que sí se pierde
- Visitas que no terminan de cargar. Si alguien se cansa y cierra antes de que el script se ejecute, esa medición no llega. Justo las cargas más lentas tienden a perderse un poco, y eso sesga algo los datos a favor. Se mitiga enviando también en visibilitychange/pagehide, que se dispara cuando el usuario se va.
O sea, que cada navegador de usuario recoge una serie de tiempos, lo cual significa que podemos saber lo que tarda nuestra web en cargarle a cada usuario, a cada usuario, no a los servidores de Google, no al navegador de nuestro Playwright, sino a los que realmente nos importa ! 😍
Y vamos a por la siguiente pregunta obligatoria, ¿alguna librería?
Siiiii, y de Google, así que siiiii: https://github.com/googlechrome/web-vitals
y con menos de 5 KBytes, y lo puedo mandar como evento de GA4, GTM o donde narices me interese.
No hay más preguntas señoría, veredicto para sentencia, tenemos culpable, es hora de usarlo.
Montando Real User Monitoring
Tenemos la librería, tenemos unas pocas webs donde probarla, pues manos a la obra.
Plugin de WordPress, lo instalamos, ponemos en producción y a probar y medir.
Dejo el repo del plugin por si quieres instártelo (en un arranque de creatividad lo he llamado rum-data, matadme !!):
https://github.com/ablancodev/rum-data
En la sección de admin he intentado dejarlo lo más configurable posible para que poder jugar con la librería con cierta libertad.
Ya lo tenemos entonces corriendo y mandando la info a GA4 en mi caso, que como lo tengo recién instalado tendré que esperarme a mañana a tenerlo en los dashboard normales, pero ya desde los de tiempo real puedo ir viendo cositas:
Ya sé que poco ves ahí, pero cuando pase a la data normal de GA4 imagina el potencial de análisis, tienes tiempos de cargas de tus usuarios, que GA4 alimenta con ubicación por lo que puedes ver lo que tarda realmente en cargar tus páginas para los usuarios, según ubicación, según navegador y mil cosas más, imagina el mapa tan chulo que puedes crear con esto.
Y si le dejas el modo debug (un ratito sólo, que a los malos no es bueno darles demasiada info), desde consola puedes ver la info que mandamos, por ejemplo en mi web:
Y con esto sólo puedo decir que a tomar por saco Page Speed, que vaya si me ha dado quebraderos de cabeza, con sus fluctuaciones «fantasmas», y esos número que suben y bajan según les pille el día. Datos reales desde usuarios reales.
¿Te atreves a implementarlo en tu web? es sencillo, baja el plugin desde GitHub, instálalo y configúralo.
Y si se te escapa, don’t worry para eso estamos, me llamas y por menos de lo que vale comer en DiverXO te lo dejo fino fino.