El algoritmo de Google y el usuario tienen una cosa en común. A ambos les encanta que tu sitio web cargue rápidamente. Es por ello, que la optimización de la velocidad web cumplirá una doble función. Por una parte, mejorar el posicionamiento orgánico en Google, y por otra, ofrecer una buena experiencia de usuario.

En este post, queremos hablaros de manera más extensa sobre qué implica que un sitio web tenga optimizados los tiempos de carga, puesto que puede ser un factor que condicione el éxito de cualquier sitio web.

Y tú ¿sabes si tu página web carga al instante? ¿Has realizado en alguna ocasión algún test de velocidad web? Hoy te contamos todo lo que debes saber sobre dos herramientas online y gratuitas para medir la velocidad de una página web: GTmetrix y PageSpeed. Continua leyendo para conocer más acerca de estas herramientas.

¿Qué es la velocidad web?

Es muy probable que como usuario te haya ocurrido en más de una ocasión. Encuentras un enlace o página web que te resulta interesante, haces clic en él y seguidamente te aparece una pantalla en blanco que tarda varios segundos en responder. ¿Qué ocurre entonces? Probablemente abandones el sitio web, antes de haber visualizado su contenido, dirigiéndote al siguiente enlace que resuelva tu consulta.

Esto, que es más habitual de lo que piensas, ocurre porque los tiempos de carga web, no se encuentran optimizados. Por este motivo, un usuario que hemos conseguido atraer de manera orgánica, o bien recomendado, hacia nuestra página web, ha abandona la misma porque hemos tardado demasiado tiempo en ofrecerle nuestro contenido, y por tanto, ha ido a buscarlo a otras páginas de la competencia.

Podemos definir la velocidad web, como el tiempo que tarda una página web en descargar todo el contenido y mostrarlo en la ventana del navegador del usuario. Un tiempo de carga web aceptable, ronda los 2-3 segundos. Si tu sitio web excede este tiempo, es recomendable que puedas optimizarlo.

¿Por qué influye la velocidad de carga en el éxito de un sitio web?

• Minimizar la tasa de rebote

Hace referencia a aquellas visitas que llegan a tu sitio web, y salen de él, sin llegar a haber interactuado con el mismo. Uno de los principales factores que afecta al hecho de tener un porcentaje de rebote elevado, es la velocidad web. Como comentamos anteriormente, el usuario no suele esperar más de 3 segundos segundos a que la web haya cargado por completo.

• Conseguir la fidelización de los usuarios

Cuando un usuario tiene una mala experiencia en un sitio web, es bastante frecuente que no vuelva a interactuar con él. Por ello, una buena optimización de carga puede llegar a fidelizar a nuestros usuarios, convirtiéndolos en recurrentes.

• La velocidad de carga influye en la conversión

Si tu velocidad de carga es lento, es muy posible que tu porcentaje de conversión se vea disminuido. Como hemos comentado, el usuario puede llegar a abandonar el proceso de compra, si detecta que debe esperar mucho tiempo en la carga de un sitio web.

• Mejorar la usabilidad móvil

Los usuarios de dispositivos móviles son mucho más exigentes, en cuanto a la velocidad de carga se refiere. Por ello, si buscamos una buena experiencia de usuario a nivel móvil, debemos tener en cuenta la optimización al máximo de nuestros tiempos de carga.

GTmetrix VS PageSpeed

Si estás pensando en mejorar los tiempos de carga de tu sitio web, existen algunas herramientas online, que de manera gratuita nos permiten realizar un test de velocidad para páginas web, ofreciendo recomendaciones sobre cómo mejorarla. A continuación, te hablaremos sobre algunas de ellas

GTmetrix

Se trata de una completa herramienta que nos permitirá analizar con profundidad un sitio web, creando informes personalizados. Es posiblemente una de las más conocidas y utilizadas hoy en día.

No requiere registro para ser utilizada, no obstante, si optamos por registrarnos podremos obtener un histórico sobre las URL´s que analicemos y comprobar así, la efectividad de las medidas que vayamos aplicando. Lo primero que deberás hacer es introducir la URL que quieres analizar.

A continuación, obtendremos un informe completo de nuestro sitio sobre diferentes factores que afectan a la velocidad de carga. ¿Sabes cómo interpretar estos datos? Te contamos algunos de los principales indicadores que utiliza esta herramienta.

1. Test Server Region: La ubicación del servidor desde el cual se realizan las pruebas.
2. Using: El navegador más recurrente, y por tanto, donde se están realizando las pruebas.
3. Connection: El tipo de conexión que estaría simulando el test.
4. Analysis Options: Puedes incluir en la simulación un vídeo, o en el caso, de que quieras evitar que se tengan en cuenta los anuncios de tu sitio web.

Lo siguiente que nos encontraremos, será aquello que podemos denominar “Puntuación de rendimiento” o “Performance Score”. En este apartado, nos encontraremos diferentes puntos que habrá que analizar.

1. PageSpeed Score: Se trata de la puntuación total sobre 100 que ha obtenido tu sitio web. Si tienes una puntuación de tipo A significa que tu sitio web se encuentra optimizado a los ojos de Google, en cuanto a velocidad web se refiere. A partir de esa puntuación, B, C en adelante, te mostrará algunas recomendaciones.¿En base a qué parámetros se obtiene dicha puntuación? Repasamos los mensajes más importantes que nos proporciona la herramienta para mejorar tu velocidad web.
   • Combine Images Using CSS Sprites: GTmetrix te mostrará una serie de URL´s para cada imagen que deberás mejorar, por ello te recomienda la instalación de un plugin o la implementación de un código CSS.
   • Defer Parsing of JavaScript: Tiene relación con aquellas animaciones implementadas en tu sitio web. GTmetrix nos recomendará instalar un plugin que solucione el bloqueo de la carga de los Javascripts.
   • Serve Scaled Images: Tiene que ver con el escalado que estemos utilizando en las imágenes que cargan en nuestro sitio web. Esto puede ocurrir, porque subas una imagen con un tamaño muy superior al que se va a mostrar en la web, por lo que te recomienda ajustar dicho tamaño.
2. YSlow Score: Hará referencia a la puntuación total sobre 100, pero en este caso para Yahoo. YSlow Score nos proporcionará información sobre más de 34 parámetros que afectan al rendimiento web, entre ellos, Javascript, datos del servidor, cookies o imágenes.

A continuación, el apartado denominado “Page details” o “Detalles de página”, nos ampliará algo más de información acerca de nuestro sitio web.

1. Page Load Time: Se trata del tiempo de carga de una página medido en segundos. Cuanto menor sea este valor, mejor será considerado un sitio web. Para que nuestro análisis sea lo más fiable posible, es recomendable realizar dicho análisis 3-4 veces, pudiendo sacar la media de estos resultados.
2. Total Page Size:Hará referencia al tamaño total de tu página teniendo como medida de referencia los Kylobytes o Megabytes. Los elementos que suelen aumentar el peso de una URL son vídeos e imágenes.
3. Request:Indica la cantidad de peticiones que son necesarias para construir por completo la URL que se está analizando. Son un conjunto de advertencias que deberemos llevar a cabo para mejorar algún aspecto de la web.

Tanto para analizar el sitio web en Google como en Yahoo, GTmetrix, nos ofrecerá una serie de parámetros y recomendaciones, que deberemos seguir para mejorar nuestra velocidad de carga. Éstas, se encontrarán en un desplegable, siguiendo la misma puntuación comentada anteriormente. Aquellas recomendaciones que cuenten con un grado A, significará que ya las estamos llevando a cabo. Por lo contrario, a partir de la puntuación B, C, D y en adelante, significará que aún hay margen de mejora.

PageSpeed

En Pagespeed Insights, encontramos una muy potente herramienta, que Google pone a nuestra disposición para analizar el rendimiento y tiempos de carga de un sitio web. Al igual que GTmetrix, viene siendo una de las más utilizadas hoy en día. El primer paso, será introducir la URL a análisis.

Lo primero que nos encontramos, es que esta herramienta nos ofrece dos versiones, el análisis de la carga web a través de un dispositivo móvil, y por otro lado, a través de un ordenador.

Para cada una de ellas, nos muestra una puntuación sobre 100 acerca de nuestra velocidad web. Los datos serán mostrados de la siguiente manera: En rojo, aquellos que debemos corregir, en amarillo aquellas sugerencias que deberíamos tener en cuenta y en verde aquellos aspectos que ya estás realizando correctamente. A continuación, nos encontramos con algunas métricas, que será interesante analizar.

1. Datos de campo: Nos indica una primera aproximación del tiempo de carga de la web durante el último periodo, en torno a unos 30 días. Este dato lo comparará con el rendimiento de otras webs incluidas en el informe de Chrome User Experience Report. Los resultados se mostrarán a través de una escala de colores, representando cómo se ha cargado la web para los diferentes usuarios.
2. Datos de experimento: La herramienta simulará un test de carga, ofreciendo algunas métricas sobre el rendimiento web.
   • Primer renderizado con contenido: Indica el momento en el cual se renderiza la primera imagen o texto.
   • Índice de velocidad: Mide lo rápido que se hayan llenado los blancos de los contenidos
   • Tiempo hasta que está interactiva: Cuánto tarda la web en estar interactiva al 100%
   • Primer renderizado significativo: El tiempo que ha tardado el sitio web en cargar el contenido principal.
   • Primer tiempo inactivo de la CPU: La primera vez que el hilo principal de la página está el suficiente tiempo inactivo como para recibir acciones por parte del usuario.
   • Latencia potencial máxima de la primera interacción: La latencia de la primera interacción que pueden llegar a experimentar los usuarios cuando se produce la tarea más larga.
3. Oportunidades: En esta sección, la herramienta nos muestra una serie de recomendaciones para optimizar nuestro rendimiento web. Incluye también, una estimación de la rapidez que se ganaría, si dichas mejoras fueran implementadas.
4. Diagnóstico: En este apartado se incluyen algunas mejoras más técnicas que tienen que ver con el desarrollo web.
5. Auditorías aprobadas: Por último, nos mostrará un resumen sobre aquellos test que el sitio web haya superado correctamente. Es decir, parámetros que nuestra web tenga ya optimizados.

Comparativa GTmetrix Vs PageSpeed

¡Ha llegado el momento de que ambas herramientas entren a combate! Queremos comprobar qué puntos fuertes y qué debilidades presenta cada una de ellas. Para ello, hemos realizado un análisis exhaustivo sobre los datos que nos proporciona cada una de ellas.

Puntuación global

Ambas difieren en la manera en la que muestran los resultados al usuario. Aunque las dos herramientas utilizan un sistema de color a la hora de indicar cada una de las puntuaciones, es necesario destacar cómo de amplio es el rango para cada una de ellas.

En el caso de PageSpeed, observamos cómo categorizada los resultados en tres colores diferenciados, indicando aquello que debemos corregir (rojo), las sugerencias para mejorar nuestra velocidad de carga (naranja) y aquellos aspectos que ya realizamos correctamente (verde). Para GTmetrix, este rango de puntuaciones será más amplio (A, B, C, D, E, F…), estableciendo de esta manera, una forma más fácil de establecer prioridades a la hora de ir realizando las correcciones que nos sugiere la herramienta.

Características de la simulación

Es importante tener en cuenta a la hora de revisar los resultados de un test de velocidad web, ciertas características sobre cómo se ha producido su simulación. Principalmente la ubicación, el navegador y el dispositivo.

Es posible que la ubicación desde donde se realiza la prueba, afecte a los resultados del rendimiento. Por ello, si quieres ajustar lo más posible la simulación de tu audiencia, te recomendamos que escojas la herramienta con la ubicación de prueba más cercana. GTmetrix, suele escoger por defecto Canadá, y en el caso de PageSpeed no permite seleccionar la ubicación.

El tipo de dispositivo, será otro factor de gran importancia. Como hemos visto anteriormente, en el caso de PageSpeed, contamos la posibilidad de poner escoger entre la opción de visualización de datos para móvil o para ordenador. En cada uno de ellas, observaremos tiempos de carga diferenciados, así como las recomendaciones a seguir según el dispositivo. Esto se diferencia de la manera en que GTmetrix nos muestra dicha información, puesto que la versión gratuita nos proporcionará datos de la versión Deskpot.

Además, la versión gratuita de GTmetrix nos proporcionará por defecto datos acerca de la velocidad de nuestra web en Google Chrome. PageSpeed irá un paso más allá, mostrándonos los tiempos de simulación, también en Yahoo.

Tiempos de mejora

Un aspecto a tener en cuenta, es cómo en el caso de PageSpeed nos proporciona ciertos datos que nos permiten ver el margen de mejora de nuestra web si realizáramos una acción en concreto. Esto viene reflejado a través del ahorro estimado en segundos. Nos puede ayudar a la hora de hacernos una idea de qué acciones pueden proporcionarnos una mayor mejora en el tiempo de carga de nuestra web.

Clasificación de mejoras

En el caso de GTmetrix, es necesario destacar cómo cada una de las sugerencias de mejora se encuentran clasificadas según el tipo: contenido, servidor, imágenes, js o css. Esto nos puede ayudar a la hora de ir revisando cada una de ellas o para derivar a ciertos departamentos su optimización.

Análisis de los tiempos de carga

Como hemos visto anteriormente para cada una de las herramientas, ambas nos ofrecen información sobre el tiempo que invierte nuestra web en cargar por completo. En el caso de PageSpeed, nos ofrecerá ciertos datos del experimento, donde veremos de qué manera se van cargando en cascada cada uno de los elementos. GTmetrix, irá un paso más allá, mostrándonos uno a uno los recursos en los que tu URL invierte su tiempo de carga.

Una vez hemos visto las posibilidades que nos ofrecen ambas herramientas, queremos comentar algunas consejos a la hora de interpretar sus resultados que nos parecen relevantes.

• Cada una de estas herramientas evalúa los sitios web en función de su propio conjunto de recomendaciones, con lo cual, a la hora de analizarlas, es posible que alguna de ellas hayan sido personalizadas o modificadas.
• Es importante comprender cómo funciona cada herramienta, a la hora de analizar cualquier tipo de resultado. Esto tiene que ver por ejemplo, con la posibilidad de regular el tipo de conexión o modificar la resolución de pantalla, para una simulación en concreto. Por este mismo motivo, conocer el modo en que cada herramienta interpretada los indicadores, así como el propio escenario de simulación, nos ayudará a entender mejor sus recomendaciones.

Llegados a este punto, en función de tu proyecto y necesidades, debes escoger cuál crees que responde mejor los parámetros que buscas medir, así como a su escenario de simulación, pudiendo combinar ambas en todo momento.

¿Cuáles crees que son los puntos fuertes de cada una de ellas? Te leemos en comentarios.

En Online Zebra, somos conscientes de que uno de los puntos que más tiene en cuenta Google a la hora de posicionar tu web, es que ésta cuente con una óptima velocidad de carga. Por ello, asesoramos a nuestros clientes para conseguir sus páginas web carguen en el menor tiempo posible. ¡Conoce más sobre todo lo que las optimizaciones SEO pueden hacer por tu web!