Métricas de velocidad web gratuitas con GTmetrix
Imagen original: Red Arrows at the Goodwood Festival of Speed, por Kol Tregaskes
Hay muy buenas razones para intentar que la carga de nuestras páginas web sea lo más rápida posible. Cuidar de nuestros navegantes incluye, entre otras muchas cosas, hacerles esperar lo menos posible. Por si eso fuera poco, uno de nuestros visitantes más distinguidos es algo quisquilloso con la velocidad de carga: me refiero a Google, que incluso la tiene en cuenta entre los componentes de cálculo de su ranking. GTmetrix es una aplicación que nos ayuda a hacerlo bien.
El acceso por redes móviles, por conexiones de baja velocidad, o desde lugares muy lejanos al servidor, son sensibles a un buen trabajo de optimización... o a la falta de éste. Si hacemos esperar a nuestros navegantes, abandonarán la web y nuestros objetivos también se verán penalizados.
Cómo empezar con GTmetrix
Aspecto del informe generado por GTmetrix. La web evaluada ha obtenido una mala puntuación, pero la aplicación indica más abajo los aspectos a mejorar.Introduce la URL de la web que quieres analizar en el formulario de GTmetrix. Después de unos segundos de espera, la aplicación te devolverá un vistoso informe con dos puntuaciones entre la A y la F (de mejor a peor) y varias pestañas con información sobre la velocidad de carga.
Puntuaciones A-F
Aparte del gozo o disgusto que nos puedan proporcionar estas puntuaciones, no dejan de ser un indicador grueso, que no nos propone cómo mejorar nuestros resultados. Las letras vienen acompañadas de un porcentaje que mide la satisfacción de los criterios evaluados, y de una flechita que indica la posición de la página evaluada con respecto al promedio de páginas analizadas en la herramienta. También se acompañan de tres datos fundamentales: el tiempo de carga de la página, el tamaño de la misma, y el número de peticiones.
Page Speed y YSlow
Ambos son, digamos, paquetes de reglas que se consideran buenas prácticas en materia de rendimiento. Puedes considerar las reglas como puntos de comprobación a cumplir, aunque quizás no todas sean aplicables a tu web. Page Speed son las reglas que Google considera más importantes y YSlow fue creado por Yahoo. Ambos juegos de indicadores poseen su propia herramienta en forma de plug-in para el navegador.
GTmetrix ordena las reglas en cada medición según su nivel de importancia en el rendimiento de tu sitio, de forma que te ayuda a priorizar las tareas correctoras.
El impacto de las reglas no siempre coincide con su nivel de cumplimiento. La recomendación de hacer menos peticiones HTTP es mucho más importante que la de configurar correctamente las ETags.
Timeline
Esta pestaña ofrece un gráfico que relaciona todos los elementos de la página analizada: html, imágenes, ficheros css, fuentes... todo. Para cada elemento, el gráfico indica el tiempo que ha tardado de ser transmitido, de ser encontrado en el sistema DNS, e incluso el tiempo antes de ser solicitado al servidor web.
Gráfico de tiempo de la página inicial de Wikipedia, wikipedia.org. La carga se ha completado en 1,18 segundos.Si el tiempo total de carga es mayor a 5 segundos, estás perdiendo usuarios; examina el timeline para descubrir qué elementos están retrasando la carga y por qué. Si es mayor de 10 segundos ¡deja de leer este post y corre a arreglarlo!
History
Histórico del tiempo de carga.Aquí se puede ver la evolución de algunos indicadores de forma gráfica, en caso de que se haya pasado el test a la misma URL en anteriores ocasiones. Así resulta más fácil valorar la eficacia de las medidas introducidas en la web. Se pueden acotar los límites cronológicos del gráfico. Hay gráficos históricos del tiempo de carga, del tamaño de página con el número de solicitudes, y de las puntuaciones de las dos métricas, Page Speed y Yslow.
Comparar con otra URL
Se pueden comparar hasta cuatro URLs, y visualizar simultáneamente sus resultados para cada regla. Al comparar URLs, la pestaña History cambia por Graphs, y presenta los resultados actuales en vez de los históricos.
Comparativa de la página de inicio de las webs de cuatro universidades valencianas. La pestaña Graphs muestra en barras la velocidad de cada una.
Adaptar GTmetrix
Elección de la localización predeterminada del usuario.De forma predeterminada, las mediciones se realizan desde Vancouver, Canadá. Si las Montañas Costeras de Norteamérica quedan demasiado lejos del público objetivo de tu web, puedes darte de alta en la aplicación y modificar el servidor de pruebas. La aplicación ofrece 13 servidores de tests, repartidos en 7 localizaciones en todo el mundo desde las que analizar la velocidad de carga de tus páginas.
Como usuario registrado, además de comparar URLs diferentes, puedes comparar el rendimiento de una misma URL desde distintas localizaciones.
Entrando en materia
Por lo que he observado, diría que todas las reglas están orientadas a cumplir las siguientes pautas que podríamos denominar reglas de oro del rendimiento web. Menciono aquí las técnicas que he probado personalmente. Algunas reglas las podemos cumplir desde el plano de la edición de contenidos. Para otras necesitaremos la ayuda de nuestro informático... u horas de navegación por manuales y blogs.
Minimizar el tamaño de las páginas
Si puedes transmitir la misma información ocupando menos espacio, ahorrarás tiempo (y eventualmente consumo móvil) a tus navegantes. La compresión, la minificación (técnica que consiste en eliminar del código los espacios en blanco y saltos de línea no significativos) y la optimización de imágenes (enviar versiones reducidas en peso pero que se ven igual) entrarían en este campo.
Enlaces a versiones optimizadas de las imágenes.La optimización de imágenes es un trámite súper sencillo, ya que GTmetrix te proporciona automáticamente las versiones óptimas de las que lo necesitan.
Minimizar las esperas
Así empaqueta Gmail algunos de sus iconos.Al estudiar el timeline de la carga de tu página, descubrirás el enorme tiempo que se consume por cada elemento a descargar. Cada hoja de estilos, cada tipografía, cada imagen,... añaden un tiempo extra sólamente por solicitarlas al servidor. Si se unifican en menos elementos (una sola hoja de estilos, un conglomerado de iconos recortado posteriormente con CSS), se puede lograr un plus de velocidad apreciable.
Evitar transmitir datos innecesarios
Hay muchos elementos de cada web que normalmente no cambian. Los ficheros de fuentes y las imágenes suelen modificarse poco o nada con el paso del tiempo; las hojas de estilos se modifican cada mucho tiempo. Se puede ahorrar transmisión de datos y tiempo de descarga al usuario si le indicamos a su navegador qué ficheros estamos seguros de que probablemente no van a cambiar, de forma que los guarde en su memoria y los lea de ahí directamente.
Configurar las cabeceras Expires y las ETags (técnicas para indicar cuánta validez tendrá un contenido y detectar qué elementos han cambiado, respectivamente) ahorrará tiempo a los usuarios recurrentes.
Otra técnica es evitar el envío de cookies innecesarias usando un dominio diferente. Si tus cookies están asociadas al dominio www.ejemplo.com, podrías alojar las tipografías, imágenes, etc. en el subdominio estatico.ejemplo.com.
Pueden parecer mejoras insignificantes, pero sumando tres sencillas técnicas de mejora, el mundo se podría ahorrar la transmisión de 23.000.000 GB al mes. GTmetrix ofrece una infografía sobre qué representa semejante derroche de descarga de información [en inglés].
La velocidad no lo es todo
Una vez escuché a un informático que El servidor más seguro es el servidor apagado
. Podríamos decir algo parecido del tiempo de carga: la página más rápida es la página en blanco. Pero eso desgraciadamente no nos vale, así que sabemos que necesitaremos consumir tiempo, y que muchas veces no podremos cumplir con todas las recomendaciones.
Ante esta disyuntiva de sacrificar velocidad o contenidos, lo realmente importante son los contenidos; no caigamos en mejorar las métricas a cualquier precio. Incluso Google, aunque tenga en cuenta la velocidad, lo hace de una forma muy limitada, dando más importancia a otros factores. Allá por 2009, cuando empezaron a valorarla, según el blog oficial, afectaba a menos del 1% de las búsquedas.
Según la escala de nuestro proyecto web, también podemos encontrar dificultades insalvables para cumplir las reglas. Por ejemplo, usar un CDN tiene un coste que no todos los editores web están dispuestos a asumir. O quizás no podamos modificar ciertas opciones del servidor en nuestro alojamiento compartido, necesarias para cumplir determinada regla.
Los contras de GTmetrix
Lo primero que vas a ver es que la aplicación está totalmente en inglés; si no te desenvuelves, también puedes usar online PageSpeed Insights que sí está en español, aunque no evalúa las reglas de YSlow.
La ubicación de los servidores de test quizá no te satisfaga. Pese a ello, están más distribuidos que los de otras herramientas de medición.
Si una página se redirecciona con JavaScript, GTmetrix devuelve un error. Este tipo de redirección incumple las reglas de rendimiento, y que nos dé un error ya nos indica que algo estamos haciendo mal, pero claro, perdemos la evaluación del resto de reglas. Se puede solventar esta pega poniendo directamente la URL de la página redirigida.
En definitiva
A mí me ha parecido una estupenda herramienta. Que te proporcione las imágenes ya optimizaditas (también lo hace PageSpeed Insights) es para darle un aplauso. Que te ordene las reglas según el impacto que tienen en la carga de tu web es para nota.
Aunque los servidores de test puedan estar alejados de tu público objetivo, me parece interesante contar con un conjunto de puntos fijos que nos pueden servir para estandarizar las comparaciones.
Hoy por hoy la versión convencional es gratuíta, y muy útil para su finalidad, aunque para los que hagan un uso intensivo, GTmetrix también ofrece un servicio "PRO" de pago con posibilidad de guardar mediciones y enviar alertas, entre otras funcionalidades.