GT Metrix

Esta es la segunda herramienta que tendrás siempre a mano para conocer el estado de tu sitio web, en cuanto a velocidad. En mi concepto, es mucho más sencilla de entender que PageSpeed Insights, más intuitiva y te dará unos datos que son clave a la hora de entender cómo mejorar el tiempo de carga de tu sitio web. Conozcamos un poco de qué se trata esta herramienta.

Primero, entra a la página de GT Metrix y te suscribes. Tienen un plan gratuito que vale la pena 100% así que tómate esta molestia antes de empezar a usarlo. Le verás una gran utilidad el estar registrado, porque tendrás el histórico de análisis y podrás hacerle el seguimiento histórico de velocidad a tu página. ¡Gratis chico! Regístrate, regresa y continúa.

Una vez ingreses como usuario, verás el "Escritorio" o "Dashboard", bastante intuitivo y fácil de usar. Basta con ingresar la URL que deseas analizar y sentarse a esperar unos minutos para interpretar los resultados. Sin embargo, antes de hacer el análisis es importante saber que tienes diferentes opciones de configuración de dicho análisis que pueden hacer variar algunos resultados, especialmente la "velocidad" de carga del sitio.

Nota que en la parte inferior del buscador, encontrarás los parámetros del análisis. En el caso anterior, el análisis lo hará en una computadora de escritorio, en el navegador Chrome, desde Vancouver, Canadá, entre otras opciones. Expliquemos en detalle estas opciones.

Opciones de análisis

Puedes modificar las opciones de análisis haciendo clic sobre ellas, verás que varía según el listado de opciones precargadas que tiene GT Metrix. También puedes usar el botón "Analysis Options". Verás lo siguiente:

Puedes escoger la ubicación desde donde se hará el análisis. La idea es que lo pruebes con el lugar más cercano desde donde te verá tu público. Dallas, Hong Kong, Londres, Mumbai, Sydney, Sao Paulo y Vancouver. Si tu público objetivo está en Colombia, por ejemplo, escoges "Sao Paulo". Si está en México, escoges Dallas. Y si está en España, escoge Londres. Así de fácil.

En cuanto al navegador, te sugiero dejar a Chrome Desktop, cuando quieras hacer el análisis de computador, de cómo será el comportamiento en una computadora. Ten en cuenta que Chrome es el navegador más usado en el mundo hoy en día con una participación en 2020, del 64%. Así que es mejor el análisis hacerlo con Chrome, que con Firefox.

Pero cuando quieras probar cómo será el comportamiento en móviles, tendrás que escoger Chrome (Android, Galaxy Nexus). Desafortunadamente esta opción no está disponible en todos los servidores, únicamente desde Vancouver, Canadá.

En el campo "Conexión" podrías escoger la simulación de una conexión determinada, nota que tienes la opción de "Banda ancha" (Rápida, Normal y Lenta). También podrás probar tecnologías móviles como 3G, 2G y LTE. Incluso, la vieja conexión por teléfono de 56 kbps... ¿la recuerdas? jajaja, seguramente no. Tal vez no quisieras probar tu sitio con una conexión así. La diferencia es abismal cuando simulas la conexión. Para mantener el estándar, puedes dejarlo en la opción "Unthrottled Connection". Estará bien así para entender mejor tus resultados. Y no ahorcarte.

También podrás crear un video de cómo es el proceso de carga simulado. Si activas la opción de "Adblock Plus" activarás el bloqueador de anuncios del navegador que hará la prueba. Podrás modificar el parámetro que indica cuándo parar el cronómetro de carga. De forma predeterminada se mide a través de la carga total de la página, que sucede cuando no hay actividad de red durante dos segundos. Es el momento en que GTMetrix determina como finalizada la carga y ahí hace el cálculo de tiempo. Es una manera más consistente de hacer la evaluación. Pero si quisieras cambiar el método, podrías optar por hacerlo según el "onload time" que ocurre cuando el procesamiento de la página se completa y todos los recursos de la página se han descargado. Digamos que son dos métodos de medir. Yo te recomiendo dejarlo apagado.

Luego tendrás opciones para desarrolladores y opciones avanzadas, que para lo que necesitamos hacer, no lo vamos a usar.

Una vez tengamos clara la configuración, es hora de analizar: ingresa la URL completa y asegúrate de poner un slash o barra diagonal al final de la URL. Luego, a través del botón azul "Analyze", que empiece la fiesta. Esperas un par de minutos y ahora veamos los resultados:

En la parte superior te mostrará la configuración usada para el análisis. Y luego, bastante destacado, encontrarás el resumen de los resultados. Es bastante sencillo de comprender, pero analicémolos un poco.

Lo primero, es que te calificará en letras y porcentaje el resultado desde dos puntos de vista: PageSpeed y YSlow. Ya sabes que PageSpeed es una herramienta desarrollada por Google, mientras que YSlow es una herramienta desarrollada por Yahoo. Así que tienes en un solo lugar dos puntos de vista diferentes, que deberías sentirlo como complementarios, ya que las reglas no son iguales, y como en el ejemplo anterior, podrás notar que no siempre es coherente el resultado.

Bien, tendrás un grado medido en letras, de la A la F, siendo A la mejor calificación y además un porcentaje, siendo 100% el puntaje perfecto. Además, es fácilmente reconocible lo bien o mal que te ha ido gracias a los colores de semáforo: verde (muy bien), naranja (promedio) y rojo (¡cuidado!). Esto es sencillo de entender. Pero quiero que te fijes en un símbolo que será recurrente y muy útil en la interpretación de los resultados:

  • Flecha verde apuntando arriba: indica que el resultado es MEJOR que el promedio.
  • Flecha roja apuntando abajo: indica que el resultado es PEOR que el promedio.
  • Diamante naranja: indica que el resultado está entre el 5% por arriba o por debajo del promedio.

Es muy interesante que si dejas el ratón sobre estos símbolos, te indicará cuál es el promedio. Así sabrás qué tan lejos estás para bien o para mal del resto de páginas:

Aparte de estas dos grandes calificaciones, hay tres datos que siento son incluso más importantes:

  • Tiempo total de carga: es el tiempo medido en segundos y fracción, que se toma la página en estar totalmente cargada. Nota que este tiempo dependerá de varios factores configurables: la velocidad de conexión, el tipo de dispositivo (Computador o móvil), ubicación de la prueba y método de medición. Por lo tanto, debes ser muy consciente de cómo lo tienes configurado cuando quieras entender este resultado. Nota que el promedio a la fecha de hoy es de 7 segundos.
  • Tamaño total de la página: cuál es el peso de todos los archivos descargados, incluyendo HTML, Javascript, CSS, imágenes, etc. El promedio es de 2,95 MB.
  • Peticiones: cada hoja de estilo, cada javascript, cada imagen es una petición. La idea es tener siempre menos peticiones posibles y ser muy consciente de cuántos elementos se cargan en nuestro sitio. El promedio está en 87.

Entonces nota que con un poco de esfuerzo, fácilmente estarás por encima del promedio: el tiempo de carga, menor a 7 segundos... el peso de la página menor a 2,95 MB y el número de peticiones menor a 87. ¡Seguro que lo lograremos!

Como ves, estos son datos mucho más sencillos de interpretar que los de PageSpeed Insights. Son muy concretos. Pero donde se vuelve aún más fácil de entender es con el detalle de los resultados... veamos ahora cada una de esas pestañas de detalle en qué consiste.

PageSpeed y YSlow

Reúne los detalles de la evaluación realizada con PageSpeed de Google y YSlow de Yahoo. Enumera todas las pruebas evaluadas a través de recomendaciones, que son calificadas por letra y porcentaje y en las que de nuevo aparece el símbolo de flecha arriba, flecha abajo y diamante. Ya sabes de qué se trata ¿eh? Además le otorga una prioridad. Muy interesante, que las recomendaciones son organizadas por orden de cumplimiento, así es más sencillo darte cuenta de las que debes mejorar de inmediato.

Muy interesante además es que si despliegas la recomendación verás en gran nivel de detalle qué ha sucedido. Por ejemplo, así veo la pestaña de recomendaciones de PageSpeed y noto que la primera recomendación, en donde incumplo totalmente con grado F y puntaje 0 se refiere a "Ofrecer imágenes escaladas". Si no tengo ni idea de qué se trata, despliego a través de este botón:

Y lo que obtengo es un detalle que vale oro molido. Mira toda la información que me proporciona GT Metrix, sobre el error que estoy cometiendo:

En esta recomendación, por ejemplo me ofrece la información sobre el tamaño de las imágenes. Estoy mostrando imágenes cuyo tamaño de archivo es mucho más grande del tamaño en el que realmente se muestra en la página. Corregir este error me supondría un ahorro de 2,8 MB... ¡Imagínate! Con solo hacer esta corrección estaré ahorrando montones. Y luego me muestra imagen por imagen (podrías hacer clic en el enlace para ver cada imagen. Nos dice el tamaño real, por ejemplo la que he señalado mide 1024 x 683 píxeles, pero realmente la necesito mostrar de 140 x 93 píxeles.

Este es uno de los errores más sencillos de corregir y que cometen la mayoría de sitios web. Solo corregir este error generaría una diferencia enorme de la velocidad de carga del sitio. Mira qué sencillo lo hemos encontrado.

Waterfall

Mmmm, esta pestaña es muy interesante. Se trata de un gráfico llamado "cascada" que muestra cada una de las peticiones necesarias para cargar la página, y su desarrollo en el tiempo, es decir, en los segundos que se tarda para cargar. Es como una especie de escala de tiempo que a simple vista y la primera vez que lo veas te parecerá abrumador, pero que quiero explicártelo de la forma más sencilla.

Primero veamos cómo es nuestro gráfico de cascada para el sitio web evaluado:

¿Abrumado? Claramente es un gráfico un poco extraño, así que vamos a explicarlo por partes.

  1. Nombre de archivo: es el nombre de archivo o recurso que está cargando el navegador web. Podrás ver la dirección o URL completa dejando el ratón encima. Puedes darte cuenta de qué tipo de recurso se trata, observando la extensión del archivo: si es JPG o PNG será imagen, si es CSS será hoja de estilo en cascada, si es JS será un JavaScript y así...
  2. Estado de respuesta: es un código de estado que nos ofrece la información del éxito de la solicitud realizada por el navegador. El que más te vas a encontrar, será el código que empieza por el número dos, por ejemplo 200. Este indica que la solicitud fue exitosa. Puede aparecer el código empezado por 3, que significa redirección, por ejemplo el 301. Si la solicitud es fallida tendrás un número empezado en 4, por ejemplo 404 cuando el archivo no fue encontrado, 401 cuando el archivo no está autorizado, 403 cuando está prohibido, etc. Y por último, si la solicitud empieza en 5, indica que hay un error en el servidor, por ejemplo 500 que significa error interno del servidor. La idea es que puedas revisar si hay algún archivo que no haya cargado bien o que tenga problemas, para corregirlo.
  3. Origen del archivo: es el lugar desde donde se está cargando el archivo. Lo usual es que algunos archivos se carguen de tu sitio web. Pero ahí podrás observar otros servidores diferentes por ejemplo YouTube, Widgets de Facebook, etc. Pero también notarás que archivos como imágenes, que son tuyos, no están cargando desde tu servidor sino desde una CDN (lo que estaría muy bien, porque estás ofreciendo las imágenes a través de una red de distribución global)... Así que en este apartado tendrás información valiosa para saber si está funcionando la CDN correctamente.
  4. Tamaño del archivo: cada recurso tiene un tamaño, medido en KB o MB. Cuando sumas todos los recursos, obtendrás el Tamaño total de la página. Ese dato es el que se muestra en la página de resultados :)
  5. Desglose del tiempo de carga: es un gráfico que muestra de forma desglosada el tiempo de duración requerido para cargar cada solicitud.

Sobre este último campo, me gustaría explicar en qué consisten cada uno de los colores de las barras, porque corresponden a momentos diferentes en el proceso que son súper importantes de tener totalmente claros.

Marrón - Bloqueo

Es el tiempo que la solicitud pasó esperando en la cola del navegador para iniciar la solicitud. Esto quiere decir que no todas las peticiones son procesadas al tiempo y que muchas veces tienen que esperar, como en una especie de cola. Ese tiempo que están esperando, están bloqueadas y es lo que indica la barra de color marrón.


Turquesa - Búsqueda DNS

Para que un nombre de dominio funcione, es decir, para que un navegador cuando escriba en la barra de direcciones una URL como la de www.mariocarvajal.com, necesitará un DNS, que es el servidor de nombre de dominios que indica en qué IP se encuentra dicha URL. Con Turquesa podrás ver esta solicitud, que usualmente se encuentra al inicio de la cascada.

Y aquí verás algo curioso: cuando es la primera vez que haces la evaluación, ese tiempo de búsqueda de DNS es mayor que cuando repites el test. Esto se debe a que el dato del DNS es almacenado en caché y por ello el tiempo variará después de la primera vez.

Verde - Conectando

Este es el tiempo requerido para formar una conexión TCP entre el servidor y el host / cliente.

Rojo - Enviando

El tiempo que le toma al navegador enviar la solicitud al servidor.

Púrpura - Esperando

El tiempo dedicado a que el servidor genere una respuesta.

Gris - Recibiendo

Este es el tiempo que tarda el navegador en descargar la respuesta del servidor.

Y además de estas barras, vas a notar unas líneas de colores, verticales, que son sumamente importantes porque nos marcan los hitos que suceden en la carga de la página. Estas barras vienen en colores que significan esto:

  • Línea Verde Claro - Primera pintura: La primera pintura es el momento en que comienza cualquier representación en la página web. Esto podría ser mostrar el logotipo, cargar una imagen, cualquier cosa que el usuario pueda ver aparecer en la página.
  • Línea Verde Oscura - Primera pintura con contenido: La primera pintura satisfactoria se activa cuando se pinta cualquier contenido, es decir, algo definido en el DOM (Modelo de objeto de documento). Esto podría ser texto, una imagen o renderizado de lienzo.
  • Línea azul - DOM cargado: Esto es cuando el navegador considera que el objeto del modelo de documento (DOM) está listo. No te preocupes demasiado por esto: se vuelve extremadamente técnico, extremadamente rápido.
  • Línea Roja - Onload: Onload significa que la página y todos sus elementos constitutivos han finalizado la descarga y el procesamiento del navegador web.
  • Línea Púrpura - Completamente Cargada: Completamente cargado significa que el evento Onload ya se ha activado y que no se ha producido actividad de red durante 2 segundos.

Timings

Esta gráfica me encanta porque es muy fácil de entender. Representa exactamente las mismas líneas verticales que acabamos de ver en el gráfico de cascada, pero presentadas de una manera más sencilla. Estos son, por lo tanto los hitos de carga de tu sitio web. Puedes acceder a este gráfico a través de la pestaña "Timings". Podrás encontrar una explicación más detallada de cada hito, haciendo clic en él.

Video

GT Metrix te puede grabar un video o screenshot de cómo se carga tu página web en el dispositivo de prueba. ¿No es fantástico? Verás cómo es el tiempo de carga, a través de un video, que podrás descargar o compartir. En este video, se señalizarán en la barra inferior los hitos de los que venimos hablando.

Historial

Es un seguimiento que puedes hacer a tu sitio web, diario inclusive, que te mostrará un gráfico de los tiempos de página, el tamaño de página y las solicitudes o peticiones, a lo largo del tiempo. Muy útil si quieres mantenerte alerta de cualquier cambio en el tiempo o si quieres ver el desarrollo de tu sitio web a lo largo del tiempo, en relación con la velocidad.

¿Pero sabes qué es lo mejor? Que en la versión gratuita podrás activar el monitoreo de tu sitio web. Solo haz clic en el botón Monitor:

Además, en el botón "Set Up Alerts" podrás configurar todas las alertas, que recibirás por email gratis, cuando "algo" suceda en tu sitio. Ese "algo" no es más que una condición que tú defines. Por ejemplo, puedes definir que si el puntaje de PageSpeed es menor al 90%, te envíe una notificación.

¿Ya te vas enterando por qué esta es una de mis herramientas preferidas? Espero que lo sea para ti también.

Preguntas

45 preguntas