Analítica web
Reflexiones sobre madurez digital, datos y tecnología

Presta atención al rendimiento de tu web

Se lee en 5 minutos

Mucho se ha hablado del tema del rendimiento en páginas web, cómo afecta a la usabilidad de cara al usuario y cómo, por tanto, influye en los objetivos de negocio. Hay muchos diseñadores, desarrolladores y dueños de páginas web que ya están evangelizados en este tema, pero para otros no tanto. Esto es normal, porque saber con seguridad si una web ya está suficientemente optimizada, es complicado. Como todo, es un compromiso: hay que averiguar cuánto esfuerzo merece la pena invertir en este área, para lo cual hace falta en cierta medida estimar en qué grado beneficiará a los objetivos de la empresa.

En este post hablaremos sobre el tema, y recomendaremos herramientas disponibles de forma gratuita que ayudan a analizar el rendimiento en una página web, teniendo en cuenta las necesidades de usuarios de todo tipo.

El rendimiento tiene consecuencias

En primer lugar, nada mejor que unos cuantos estudios y análisis de casos de éxito recientes para dejar claro que hablamos de la vida real:

  • Cuando Zitmaxx Wonen redujo el tiempo de carga de su página principal a 3 segundos en dispositivos móviles, su ratio de conversión aumentó en un 50%, y sus beneficios en un 98.7% [1]
  • En la BBC, con cada segundo extra de tiempo de carga, el 10% de los usuarios salen de la página. [2]
  • Cuando Carousell redujo su tiempo de carga de página en un 65%, su tráfico orgánico aumentó en un 63% y los clics en anuncios se triplicaron. [3]
  • Mediante A/B testing, Zalando observó que mejoras en el tiempo de carga de 100ms suponen un aumento de 0.7% en la conversión [4]
  • COOK aumentó su ratio de conversión conversion en un 7% gracias a disminuir su tiempo de carga en 0.85 segundos. [5]
  • Al acortar el tiempo de carga en 4 segundos, Missguided aumentó sus beneficios en un 26%. [6]

Con esto, creo que está claro que el rendimiento de tu página web es importante, y que dependiendo de las condiciones particulares de cada caso, optimizaciones relativamente pequeñas pueden generar aumentos en beneficios muy grandes.

¿Y ahora qué?

Pero si tienes una página web, en tu caso particular sigue siendo necesario averiguar hasta qué punto tienes un problema, cuánto esfuerzo merece la pena invertir, y predecir en qué grado te beneficiará mejorarla. Y para ello, es preciso entender la situación de partida: ¿cómo se comporta mi web de cara a mis usuarios? Conviene no analizar esto a la ligera.

Anteriormente, habíamos descrito Lighthouse, una herramienta muy recomendable como punto de partida, disponible en el panel de desarrollador de Chrome para auditado de webs. En el ejemplo descrito en ese post, se obtuvo una puntuación de 88 sobre 100 en cuanto a rendimiento, lo cual parece que está bastante bien. Sin embargo, por sí mismo ese resultado no nos dice nada, ya que esa prueba se configuró con las mejores condiciones de red posibles. ¿Qué pasa si simulamos un dispositivo con poca CPU, operando en una conexión 3G lenta? Lo que pasa es esto:

lighthouse-mobile-simul-results
Ups

¿Tengo que esperar 6.1 segundos para algo tan simple como leer texto en un blog? Vaya. Este ejemplo delata una práctica de la que pecamos a menudo: asumir que porque un sitio web carga rápido para mi, también carga rápido para el resto de usuarios. La realidad es otra, y en muchos casos esto repercute en los objetivos de negocio sin que nunca lleguemos a saberlo. Muchos usuarios tienen un dispositivo de bajas o medias prestaciones (un móvil suele considerarse “viejo” a partir de los 2 años) u opera a menudo en conexiones de mala calidad, o ambos. Para ellos, navegar la web desde el móvil no es una buena experiencia: páginas que nunca acaban de visualizarse, que cambian su interfaz a medida que nuevos componentes (anuncios) se renderizan, animaciones lentas al hacer scroll y una batería que no para de subir de temperatura. La web moderna tiende a dejar de lado a estos usuarios, y eso es un error.

Para hacer un análisis detallado conviene empezar por tener una solución de analítica, que permita ver qué porcentaje de los usuarios accede desde un dispositivo móvil, y analizar cómo se comparan algunas métricas clave (conversiones, ratio visitas/usuario, porcentaje de rebote, etc.) para cada grupo.

Pero este no es el fin de la historia: entre otras cosas, por sí solo, este análisis no tendría en cuenta los usuarios que abandonan la web antes de que ésta cargue por completo (y por tanto se realice la medición). Por eso, es muy conveniente usar herramientas diseñadas para ponerse en el lugar de esos usuarios (simular distintos dispositivos, condiciones de red, etc.), y analizar el comportamiento de la web en estos casos, desde distintos puntos de vista. Y, en cualquier caso, familiarizarse con estas herramientas es muy instructivo, y quizá no venga mal ser capaces de manejarlas hasta cierto punto, de cara al futuro.

Algunas herramientas útiles

Las herramientas a las que me refiero, en este caso, vienen incluidas en cualquier navegador web moderno, ya que todos incluyen funcionalidades que permiten hacer estudios muy detallados, de una manera o de otra. A continuación, mencionamos algunas de las que ofrece Google Chrome, por ser el navegador más popular.

    • Lighthouse: esta herramienta realiza un auditado de un sitio web, y ofrece puntuación y recomendaciones de mejora en varias categorías. Es muy adecuada como una primera toma de contacto con factores que influyen en el rendimiento y para obtener una visión general de problemas que pueda haber. Además, proporciona links a recursos con más información relativa a todas las recomendaciones que hace. Ya lo describimos, en detalle, en este post.
    • Pestaña “Seguridad”: este panel resume el estado de los certificados HTTPS de las peticiones realizadas en la carga del site. Es útil para detectar problemas de cross-origin, certificados caducados o para ver los recursos externos de la web.
    • Pestaña “Rendimiento” en devtools: realiza un seguimiento de lo que hace el navegador al mostrar la web, permitiendo analizar en detalle el uso de javascript, CPU, memoria, etc. a lo largo de la carga de la web. Esta herramienta está orientada al diagnóstico en profundidad de problemas, y requiere algunos conocimientos técnicos de antemano. La cantidad de datos que devuelve es muy grande:panel-rendimiento

La interfaz es compleja, pero permite hacer un análisis muy profundo. Es especialmente útil para detectar cuellos de botella en la ejecución, y ver qué trozos de código pueden optimizarse.

  • Pestaña “Memoria” en devtools: permite analizar el uso de la memoria RAM de una página web. Esto incluye ver todas las funciones y variables javascript definidas, los objetos DOM, el código ejecutado por extensiones, etc. Está orientada a realizar análisis en profundidad y requiere unos conocimientos técnicos de antemano.
  • Panel Rendering: desde aquí podemos activar opciones para analizar el renderizado de contenido en un site. Pueden ser útiles para detectar problemas en páginas con animaciones (elementos interactivos, cambios en layout al hacer scroll, etc). Se puede acceder a él desde el panel de desarrolladores, pulsando ctr+shift+p y escribiendo “show rendering” en el input que se abre, como se resalta en la imagen:panel-rendering
  • Panel “Coverage”: permite saber qué porcentaje de los archivos que carga la web están siendo usados, de verdad, por el usuario. Para acceder a ella, se puede pulsar ctr+shift+p y escribir “show coverage”. Por ejemplo, los resultados para este blog muestran que un 71% de los bytes transmitidos no se llegaron a usar. En particular, hay una librería javascript de cuyo código el 85.1% nunca se ejecutó en página:coverage-tab-results

Seleccionando los elementos de la lista, podemos ver lo que se ejecutó y lo que no de cada archivo, línea a línea. Esto no significa que el código en desuso se pueda eliminar sin más: dada la complejidad subyacente en la web moderna, es normal que parte de los datos transmitidos no lleguen a usarse en una ejecución dada. No obstante, estos resultados pueden servir para encontrar posibles optimizaciones en un análisis en profundidad.

Espero que os animéis a experimentar con estas herramientas, y aprender un poco del tema del rendimiento web. La web moderna tiene un problema de obesidad, y el primer paso para solucionarlo es creérselo, y para eso hace falta entender cómo funciona.


*Fuente imagen destacada: Pexels

Escribe tu comentario

20 + Trece =

Navegar