Joan León
Siempre que alguien me muestra un dashboard con métricas, lo primero que hago es hacer una evaluación del diseño de la interfaz y de cómo se muestran los datos. Me gustan los dashboards con datos. Una vez hecho ese análisis, que no tardo más de 4 o 5 segundos, pregunto: ¿qué estoy viendo? ¿cómo interpreto lo que veo?
El número de una métrica no es más que un número, hasta que sabemos cómo interpretarlo.
Como ejemplo, echa un vistazo a esta gráfica, ¿qué opinas?
Sin singún contexto no podemos saber si son buenos datos, si tenemos margen de mejora, o si son malos.
Es por eso que es muy importante saber qué estamos viendo y cómo debemos interpretar los datos.
La consulta
Un amigo, le llamaremos Efe, me hace una consulta:
Efe: Joan, una duda. ¿Cómo impacta en la performance añadir una librería que se cargue en cliente? Se trata de GA4, la están cargando en cliente, y como los datos (el avg de la performance) no han cambiando, nos dicen que no influye.
Aquí podría poner cualquier gif (en formato vídeo claro), pero como me intereso por tu UX, no voy a consumir datos de tu red. Dejo a tu imaginación mi reacción.
Analizo los datos que “validan” la hipótesis de que añadir una librería de terceros no está afectado, y rápidamente detecto cual es el problema.
El problema
Como podrás imaginar, el problema es no tener contexto para interpretar los datos que se han mirado antes y después de añadir esa libería.
¿Cuál es el problema?
Se está monitorizando la Web Performance sin cargar la nueva librería. ¿Cómo puede pasar esto? fácil, la ley de protección de datos Europea indica que para poder recoger datos de usuarias/os, explícitamente deben dar el consentimiento… la famosa modal de los consents.
Si usamos una herramienta como Page Speed Insights la lectura que va a hacer es de una primera carga, sin caché, esto da para otro post, pero me voy a centrar, que como me dice mi Engineering Manager, me disperso por querer entrar en detalle en todo lo que explico… el caso es que la primera carga de una web visitada, desde Europa, debe mostrar la información y aceptación de la autorización para que se puedan recoger datos.
Pues eso es lo que está pasando en esa primera lectura con una herramienta como Page Speed Insights, lo que nos lleva a una falsa lectura de la performance, ya que no se están cargando los scripts de terceros hasta que no se dé el consentimiento. Seguro que ya lo estás pensando, claro, si no hay consents aceptados, hay menos scripts que se están descargando o alterando el DOM.
Esto nos lleva a tener una lectura de performance mejor de la que tienen las visitas recurrentes que ya han dado el consentimiento.
Cuando veas un informe como el que podemos ver en Page Speed Insights, mira la captura de pantalla que aparece, por lo general se muestra la modal de los consents. Ah!, habitualmente en el Lighthouse que ejecutes desde las DevTools de Chrome, no verás la modal porque (a no ser que elimines las cookies) tendrás la cookie de aceptación de consents.
Veamos un ejemplo
Voy a utilizar WebPageTest, ya que nos permitirá evaluar los dos escenarios y entender la gran diferencia.
Si estás interesada/o en que cree contenido sobre WebPageTest, deja un like en este tweet
Analizaremos la web de uno de los productos que tenemos en la empresa que trabajo, Adevinta: Coches.net
Análisis
Accedemos a WebPageTest e insertamos la URL en el campo.
Voy a hacer algunos cambios en la configuración por defecto en la sección Advanced Configuration:
- Selecciono la ubicación del servidor desde el que se va a hacer el test, en nuestro caso selecciono París, por proximidad, ya que nuestro producto está focalizado en usuarias/os de España.
- Selecciono que haga el test 5 veces, para tener una media.
- Como he comentado que el tema de la caché lo veremos en otro post, dejo seleccionada la opción Repeat View con un valor de First View Only
Todo listo, ejecutamos el test… y aquí tenemos el resultado.
Analicemos el resultado
En el resultado del test veremos las Observed Metrics, con métricas de laboratorio y Real User Measurements con métricas de campo (usuarias/os reales), pero ahora nos interesa bajar un poco y ver la información que tenemos en la sección Individual Runs. En este test, tal y como hemos indicado, tenemos 5 runs, y el tercero es el que nos ofrece como la media.
Para entrar a ver el detalle, hacemos click en la imagen que hay bajo Waterfall, y accederemos al detalle del test. Veremos que tenemos mucha información, pero hoy nos vamos a centrar en Waterfall View, concretamente en el número de peticiones. Que en este caso son 86 peticiones.
En la parte superior derecha del test, podemos ver una captura de pantalla de la web, y claramente se visualiza la modal de aceptación de cookies.
Vamos a hacer un test con los consents aceptados.
Análisis con consents
Una de las cosas que nos permite hacer WebPageTest es ejecutar scripts para conseguir emular comportamientos de usuarias/os. Así que haremos un test emulando una visita con los consents previamente aceptados.
Para hacer esto volvemos a la home de WebPageTest, y en esta ocasión accedemos directamente a la sección Advanced Configuration, con la misma configuración en el test anterior. Para definir el comportamiento, accedemos a la pestaña Script e insertamos el siguiente código:
logData 0
navigate https://www.coches.net
execAndWait document.querySelector('[data-testid="TcfAccept"]').click()
clearCache
logData 1
navigate https://www.coches.netAquí podemos ver el resultado del test, y al igual que antes, si accedemos a uno de los detalles veremos que el número de peticiones ha aumentado a 157.
Esto es debido a que ahora se están cargando scripts de terceros que están recogiendo datos para poder personalizar la experiencia, pero claro, a costa de descargarnos más recursos.
Comparativa
| Sin aceptación de consents | Con aceptación de consents |
|---|---|
 |  |
Conclusión
Volviendo a la duda de Efe, al estar monitorizando la performance en un escenario donde no se estaban cargando los scripts de terceros por no haber aceptado los consents, por más scripts que se añadieran no se estaba reflejando la degradación de la performance. Y evidentemente esa no era la realidad de las usuarias/os.
Así que hemos de saber, y entender, qué estamos analizando y monitorizando para poder valorar los cambios en esas métricas.