Midiendo la velocidad de tu sitio
Entender cómo está parado tu sitio en términos de velocidad, es fundamental para saber donde podés accionar para mejorarlo.
En Tiendanube usamos dos herramientas de Google para medir la velocidad: PageSpeed y Lighthouse.
Ambas devuelven resultados con oportunidades de mejora similar. ¿Cuál es la diferencia? PageSpeed es más constante con el puntaje final (probablemente de siempre lo mismo haciendo 1 o 5 pruebas) pero también es un poco más “benévolo” con el puntaje.
Lighthouse por otro lado puede que dé un poco más errático con variaciones de hasta 10 pts entre una prueba y otra, pero si ya obtenés un buen resultado acá, con PageSpeed vas a ser The Flash.
Ambas herramientas trabajan de una forma similar, de hecho PageSpeed menciona que los datos son analizados por Lighthouse.
¿En qué quedamos? Usá ambas para estar seguros y hacer varias pruebas para sacar un promedio, nunca te quedes solo con la primera o la última prueba.
Usar PageSpeed es un poco más sencillo, simplemente entrás a este link, pegás la url de tu sitio y analizás:
Para Lighthouse podés descargar una extensión del Chrome para usar, que luego verás en la parte superior derecha
O simplemente haciendo click derecho en el Chrome y luego click en “inspeccionar elemento”, vas a notar una tab de “Audits” donde ya podés usarlo.
Los resultados obtenidos se dan con un puntaje general y luego un desglose de cómo se compone esta calificación en detalle.
Lo más importante acá no es solo mirar los puntajes finales, sino prestar atención a estos números:
Algunos de estos puntos son demasiado técnicos y cómo este artículo está enfocado para diseñadores voy a mencionar que significa brevemente cada uno:
Primer renderizado con contenido: Básicamente lo que tarda el sitio en mostrar el primer bit de contenido, lo que dura en tener la pantalla “en blanco”
Primer renderizado significativo: Similar al anterior, en este caso es lo que demora el sitio en mostrar el contenido más relevante, por lo general se lo llama “above the fold” y hace referencia al contenido que se “pinta” dentro del marco de la pantalla o viewport, es decir que un footer por ejemplo no forma parte de este contenido.
Índice de velocidad: Es el tiempo con el que se puede ver el contenido de una página, cuanto menor sea mejor.
Primer tiempo inactivo de la CPU: Es el tiempo que demora la página hasta que el usuario pueda interactuar con los primeros elementos a nivel funcional. Es cuando la página está “mínimamente interactiva”.
Tiempo hasta que está interactiva: Similar al punto anterior pero es el tiempo hasta que la página está totalmente interactiva.
Latencia de entrada estimada: Es el tiempo que tarda el sitio en responder a la acción de los usuarios.
Haciendo las pruebas tanto con PageSpeed como Lighthouse vas a encontrar una parte de “Oportunidades” donde podés ir desplegando puntos de mejora en tu sitio. En Tiendanube esta es la receta a seguir para implementar las mejoras.
Otra herramienta que a veces usamos para ver algunas cosas específicas es Pingdom, funciona similar a PageSpeed
Pero lo que está bueno, es que te muestra el tipo de pedidos que tiene el sitio y la distribución del tamaño del DOM (en resumen es como el navegador construye y muestra el HTML) distribuido en porcentajes:
Pero a veces, solamente con estas herramientas no alcanza. Para entender aún más el comportamiento se puede complementar con un análisis más “manual” a través de las “Herramientas del desarrollador” que ofrece el navegador.
Si inspeccionas elemento en el Chrome y activás la pestaña “Network” podés detectar en el timeline cuales son los elementos necesarios para la carga inicial y así entender la lógica. Si hay algún elemento particular que está bloqueando y que se pueda posponer su carga (ej: imágenes del footer, etc.) ¡Deberías hacerlo!
Si hacés un zoom out bastante grande tenemos una foto más completa de los recursos.
¿Qué sigue?
Ahora que ya sabes cómo medir y encontrar oportunidades, ¡Salí a buscarlas! y una vez que las encuentres te recomiendo leer los siguientes artículos para mejorar la velocidad de tu sitio:
Gracias por tomarte este rato e interesarte en mejorar la velocidad de carga, espero que te haya servido y haber aportado un granito de arena a mejorar la experiencia en tus sitios.
Para más contexto de como mejoramos la velocidad en en nuestras tiendas Tiendanube, les recomiendo leer:
[Actualización 09/2020]
Este artículo muestra mejoras de performance previas a la actualización de Google Lighthouse 6 durante Mayo del 2020. Si bien siguen vigentes, hubo nuevos aprendizajes que podés ver este otro artículo. 👇
