«Si tu sitio carga lento estás matando conversiones»
Muchos estudios lo certifican…
La frase anterior es un hecho irrefutable, así que vamos a aprender a medir la velocidad de carga de tu web y analizar cómo puedes mejorar tus páginas para que carguen más rápido.
La disciplina que se encarga de analizar y optimizar el rendimiento de carga de los sitios web es lo que se conoce como WPO (Web Performance Optimization) y para ello existen muchas herramientas gratuitas que nos van a ayudar a hacer los test de velocidad.
Cuidado: no debes confundir las pruebas de velocidad de conexión de Internet (miden qué tan rápida es tu conexión de red o Wifi, analizan la velocidad de bajada y subida de datos) con los tests de velocidad de carga de una web (qué miden cuánto tarda tu sitio web en cargar, qué elementos son más rápidos o lentos, qué se debe mejorar a nivel de imágenes, Javascript, CSS, servidor, etc.)
Herramientas gratuitas para medir la velocidad de carga
PageSpeed Insights de Google (la más conocida)
Basta con colocar la URL de tu sitio y podrás recibir sugerencias para mejorar la velocidad de carga, tanto para dispositivos móviles como de escritorio u ordenador. Algunas sugerencias que podrás encontrar son:
- Puntuación o scoring (de 0–49 es malo, de 50–89 es medio y de 90-100 es bueno)
- Indicadores de velocidad (expresado en segundos, ej. 5,5 segundos para cargar tu web, lo ideal sería estar debajo de 3 seg.)
- Oportunidades y diagnósticos de mejora (ej. optimiza el tamaño de las imágenes, reduce el número de solicitudes, elimina archivos CSS sin uso, mejora la velocidad de respuesta del servidor web, etc.)
- También te indica las cosas que considera que están correctas.
Pingdom Website Speed Test
Esta aplicación es ideal para complementar el análisis con PageSpeed Insights u otras, puedes evaluar la web desde diversas ubicaciones (ej. Londres, Tokio, San Francisco, Sidney, etc.) y analizar los tipos de elementos del sitio.
Además de las recomendaciones de mejora (reducir redirects, comprimir elementos, añadir cabeceras, etc.), te permite analizar las peticiones de los elementos de la web en forma de cascada para detectar dónde hay cuellos de botella, elementos «pesados» o lentos, etc.
Otro aspecto interesante es que te permite ver el tamaño y proporción de los diversos elementos que componen la página, así como el número y cuota de las peticiones por:
- Tipo de contenido (ej. imágenes, script, css, etc.), de esta manera puedes ver si el mayor peso lo componen las imágenes o el código JavaScript o CSS.
- Dominio (ej. tusitio.com, pagead2.googlesyndication.com, etc.), de esta manera puedes detectar si son los elementos internos o externos los que añaden más peso o peticiones a tu web.
WebPageTest (muchas funcionalidades)
La interfaz es un poco más anticuada que el resto, pero tiene muchas funcionalidades interesantes.
Puedes realizar un test simple pero lo mejor lo tiene la opción avanzada, donde puedes seleccionar:
- Muchas ubicaciones para el test (la lista es enorme, tiene varias ciudades y países en todos los continentes)
- Tipo de navegador (ej. Chrome, Firefox, Opera, Edge, IE 11…)
- Categoría de dispositivo (ej. mobile, desktop…)
- Sistema operativo (ej. Android, iOS…)
- Velocidad de conexión (ej. DSL, 3G lenta o rápida, 4G, etc.)
- Y muchas más…
Otra aspecto interesante es la comparativa visual, esta opción es ideal para demostrar a tu equipo, jefes o compañeros de trabajo, el rendimiento de tu web frente a otras páginas (ej. tus competidores o sitios relacionados), ya que permite ver qué sitio comienza a cargar más rápido, cómo progresan y cuál termina primero. Si necesitas ayuda para demostrar que el sitio no va tan rápido como esperabas, esta herramienta te será muy útil (te lo puedo asegurar).
GTmetrix (varios análisis en uno)
Esta herramienta, también gratis, te permite tener una visión conjunta de las puntuaciones y recomendaciones de acuerdo a PageSpeed Insights (Google), Yslow (método más antiguo, de Yahoo), Waterfall o cascada, además de otras opciones para usuarios registrados (ej. timings, vídeo, histórico, etc.).
Si tienes alguna duda donde estas herramientas, no dudes es comentarlo más abajo.