Cómo mejorar la velocidad de WordPress con GTmetrix

Mejorar la velocidad de WordPress es algo obligado en estos días; en la mayoría de los casos, una instalación promedio de WordPress con algunos plugins, llamadas a medios sociales, un slider vistoso, y varias malas elecciones con imágenes y otros medios nos dejan con páginas que tardan varios minutos en cargar, pues tienen que bajar varios megabytes (recientemente optimicé una que al inicio tardaba 12 segundos en cargar, y tenía 12mb de tamaño total)…y eso sólo nos dejará con problemas y clientes perdidos. Afortunadamente existen varias herramientas de medición, una de ellas es GTmetrix y se ha vuelto bastante popular en últimas fechas, por ello que la elegí para empezar esta guía.

Introducción a GTmetrix

GTmetrix es una popular herramienta en línea que escanea tu sitio y te ofrece un reporte muy completo de dos conjuntos de métricas (PageSpeed de Google y YSlow de Yahoo), que a su vez otorgan un grado en base a la calidad de desempeño de tu sitio. Ese conjunto de métricas o reglas te ofrecen consejos de que tienes que mejorar para optimizar la velocidad de tu sitio. Adicionalmente, GTmetrix ofrece otras métricas muy útiles que ayudarán a que encuentres cuellos de botella que una vez solucionados te ayudarán a mejorar la velocidad de carga de WordPress.

Este primer artículo funcionará a modo de introducción a la herramienta GTmetrix, su interfaz y como funciona, y después dedicaré un artículo por recomendación que ofrezca GTmetrix en concreto, y se irán ligando en este mismo artículo al final. Mi intención es ir a fondo en cada tema tanto como se pueda; no pretendo hacer estos tutoriales para sólo ofrecer los mismos plugins que la mayoría de otros blogs ofrecen en sus artículos, sino cavar profundo en cada tema de modo que se comprenda.

¿Porqué es importante optimizar la velocidad de WordPress?

En realidad es importante para cualquier sitio web y por una razón muy sencilla: los usuarios son muy desesperados. Si llegan a tu sitio y este tarda una eternidad en cargar, simple y sencillamente se van; adiós venta, adiós descarga de tu ebook, adiós usuario; “es malo para la experiencia“, dicen los que saben. Y espera, ni siquiera tiene que ser una eternidad; de acuerdo con declaraciones de Google, “dos segundos es el umbral aceptable para sitios de ecommerce. En Google, apuntamos a medio segundo.” Ahora bien, lo que digan ellos bien puede valer un pepino, pues curiosamente y como veremos más adelante en esta serie de artículos, algunas de las tecnologías que más alentan un sitio (y las más difíciles de optimizar) vienen precisamente de…adivinaste, Google. ¡Pero no nos adelantemos!

Y ya que mencionamos a Google, esa es otra razón; vivimos en el mundo de Google nos guste o no, y la velocidad de carga de un sitio es un factor importante en tu posición en los resultados de búsqueda, así que no hay escape, a menos que seas un renegado anarquista que está feliz de vivir en la página 20 o 30 de los resultados de búsqueda.

En nuestro caso como usuarios de WordPress, si no tenemos cuidado los plugins que instalamos con el tiempo nos pueden arrastrar la instalación completa. A veces no tienen que ser plugins malos, algunos de ellos son pesados por naturaleza, pero por lo general se puede hacer algo al respecto.

Algo que hay que saber de GTmetrix y herramientas similares

Algo importante a tener en cuenta es que GTmetrix reporta sobre el front-end, es decir la parte que se encarga de presentar tu página en un navegador, e incluye cosas como HTML, CSS, JavaScript y medios incrustados como imágenes, vídeo, y otros. Pero todavía queda un componente importantísimo, que es el back-end, es decir, la parte que corresponde al servidor…y de esta parte GTmetrix no reporta gran cosa, simple y sencillamente porque es muy difícil estandarizar problemas de desempeño debido a que hay muchas combinaciones de software en el servidor que pueden tener un efecto sobre su funcionamiento. Corregir estos problemas significa bajar hasta el nivel de sistema operativo y revisar servidores particulares de web, sistemas de archivos, permisos y muchas cosas más, así como también depende de la arquitectura del servicio de hosting que estés usando (hosting compartido, VPS, dedicado, cloud, etc.)

Sobre dispositivos móviles y GTmetrix

Otro punto importante es que GTmetrix usa las reglas de PageSpeed de Google priorizando dispositivos móviles; YSlow por su lado no tiene reglas específicas para móviles.

¿Porqué el PageSpeed de GTmetrix y el de Google dan distinta puntuación?

Esta es quizás la pregunta que muchos se hacen luego de hacer sus primeras mediciones. La razón la dan en el FAQ de GTmetrix, y viene porque GTmetrix usa un kit de desarrollo que Google no ha actualizado en un tiempo, mientras que PageSpeed Insights usa una versión distinta. De ahí que las puntuaciones no sean las mismas.

No enloquezcas tratando de obtener 100% en una o ambas puntuaciones

Recuerda algo sobre GTmetrix, algo que incluso el mismo GTmetrix lo dice claramente en una pequeña caja de texto: no todas las recomendaciones aplican a todos los sitios. Mejorar la veolcidad de un sitio con WordPress en algo como un 90% y 80% en PageSpeed y YSlow no son nada despreciables, y si bastante logrables. Ya hablaremos más adelante de ponderar si valen la pena ciertas modificaciones. Y no olvides que algunas cosas pueden ser bastante complejas, como por ejemplo, elegir un mejor hosting para WordPress.

Tu primera medición con GTmetrix

Voy a usar GTmetrix con cuenta debido a que permite cambiar la ubicación de la prueba así como el navegador, de modo que sea más útil la información que te da al respecto. En tu caso puedes usar GTmetrix sin cuenta o bien sacar una (lo cual te recomiendo). Bien, vamos a la página principal de GTmetrix, introduce la dirección completa de tu sitio o el sitio que quieras revisar, y presiona Analyze.

Después de un momento verás una pantalla similar a esta:

Es un montón de información, pero vámonos parte por parte, siguiendo la numeración que ves en la imagen:

1. Región; trata de que sea tan cerca a tus servidores (si es que tienes este dato) como te sea posible. Por default, GTmetrix usa Vancouver como punto de prueba, así que trata de mejorar la ubicación; necesitarás una cuenta para esto.
2. Puntuación PageSpeed: verás una letra que acompaña a un porcentaje y una pequeña flecha. La letra es un grado que indica que tan bien estás en esa calificación donde A es el más alto y F es el más bajo.
3. Puntuación YSlow: lo mismo pero para YSlow.
4. Tiempo relativo de carga total: el tiempo que tarda en cargar tu sitio.
5. El tamaño total de todos los elementos del sitio.
6. El total de peticiones que hace tu sitio.
7. Reglas y recomendaciones de PageSpeed: aquí verás todas las reglas que considera PageSpeed para mejorar la velocidad de carga de tu sitio, y a la derecha la ponderación de cada una, así como un indicador relativo a otras mediciones. Adicional a esto verás una columna que indica el tipo de la recomendación y la prioridad de la misma.
8. Reglas y recomendaciones de YSlow: aquí verás todas las reglas que considera YSlow, y a la derecha la ponderación de cada una, así como un indicador relativo a otras mediciones. Adicional a esto verás una columna que indica el tipo de la recomendación y la prioridad de la misma.
9. Gráfico de carga en cascada: en esta pestaña tenemos una gráfica que muestra visualmente los tiempos de carga por elemento en una estructura de cascada, parecida a una gráfica Gantt. Aquí puedes apreciar claramente que elementos tardan más.
10. Tiempos: aquí te encontrarás algunos tiempos muy útiles, como por ejemplo cual es el TTFB, o mejor conocido como Time to First Byte, o en pocas palabras, el tiempo de respuesta del servidor; o el tiempo en que aparecen los primeros elementos en el navegador.
11. Si lo deseas, puedes generar un vídeo de la carga del sitio; genera un vídeo con una barra de tiempos. En mi opinión, no es de gran utilidad pero ahí está por si quieres utilizarlo.
12. Historial: útil si quieres ver una gráfica comparativa de los últimos resultados de tus pruebas de medición.

Por último, puedes descargar tu reporte en PDF con ese botón rojo que ves ahí.

¿Qué significan las flechas verdes/rojas y los rombos en GTmetrix?

Te habrás percatado que junto a muchas mediciones y recomendaciones aparecen unas flechas verdes (hacia arriba), otras rojas (hacia abajo) o un rombo; estos tienen un significado útil estadísticamente hablando:

• Las flechas verdes significan que estás por encima del promedio para esa medición en particular.
• Las flechas rojas significan que estás por abajo del promedio para esa medición en particular.
• Los rombos naranjas significan que estás dentro del +/- 5% del promedio, es decir, andas cerca, pero te falta un poquito. En mi experiencia, cuando sale el rombo ya es suficiente.

Estos tres indicadores hacen que interpretes las mediciones de GTmetrix de manera más eficiente. Vayamos a la pestaña YSlow y veremos que en mi caso, la recomendación de Use a Content Delivery Network (CDN) (Usar una Red de Distribución de Contenido o CDN) tiene una F(0), es decir, lo más bajo. Si colocamos el cursor sobre el rombo, veremos que sale un tooltip que nos dice que la puntuación promedio para esta recomendación es de 22%. ¿Qué concluimos de esto? bueno, que la gran mayoría de los sitios que pasan por GTmetrix no tienen implementado un CDN. Y en la práctica realmente no es tan importante mientras tengas un sitio pequeño y de bajo tráfico, como lo es la gran mayoría.

Leamos otra recomendación; esta vez vamos a la pestaña de PageSpeed y veamos la primera, que dice Optimize the order of styles and scripts, que como pueden ver tiene grado A (92), y un rombo naranja a la derecha; si colocamos el cursor encima del rombo veremos que sale una leyenda que nos dice que la media para esta recomendación es 94, y de ahí que nos salga el rombo, pues estamos dentro del +/- 5% de lo recomendado. Ahora bien, con esta información podemos decidir si nos esforzamos por llegar al 100% o lo dejamos como está.

La gráfica de cascada

La gráfica de cascada que resulta del análisis de GTmetrix contiene información valiosa, pero tiene el pequeño problema que hay que saber leerla. Vamos a ver las partes de la gráfica para poder aprender a interpretarla de manera correcta y poder usarla como base para mejorar la velocidad de un sitio:

1. Cada renglón en la gráfica es una petición HTTP que sale de tu sitio; por petición podemos entender cada objeto que hay en tu página, sea texto, imagen, JavaScript o lo que sea. Puedes expandir cada petición haciendo clic en el cuadro con el signo de +. La primera columna nos muestra la petición HTTP tal cual se hace.
2. La segunda columna indica el código de estado HTTP en respuesta a la petición antes mencionada. Lo estándar aquí es un valor de 200 o 200 OK para respuestas correctas, 301 o 302 para redirecciones, y no deberías encontrar un código 404 aquí; eso significa que lo solicitado en esa petición no se encontró, y debes remediarlo pronto.
3. Dominio que responde a la petición.
4. Tamaño de petición; aquí puedes ver cuales son las peticiones más grandes y hacer algo al respecto, si es que se puede.
5. Tiempo de vida de la petición: Aquí la cosa se pone interesante, pues el tiempo de vida está compuesto de una barra codificada en color y un tiempo al final, que es el tiempo total de toda la barra. Los códigos de color indican lo siguiente:
   • Bloqueo (arena); el tiempo que se está en cola esperando a una conexión de red.
   • Búsqueda DNS (turquesa); el tiempo que tarda el navegador en resolver un nombre de host. Cuando se accesa una página, el navegador tiene que encontrar todos los recursos que solicita ésta, lo que requiere búsquedas DNS, búsquedas que debe esperar a que terminen antes de que pueda empezar a bajar.
   • Conexión (verde): tiempo requerido para crear una conexión TCP.
   • Enviando (naranja): tiempo requerido para enviar una petición HTTP al servidor.
   • Esperando (morado): tiempo empleado en esperar a que responda el servidor, equivale al TTFB (Time to First Byte).
   • Recibiendo (gris): tiempo usado en recibir la respuesta del servidor o caché.
6. Línea de resumen: de forma rápida puedes ver cantidad de peticiones, tamaño total y tiempo empleado para procesarlas.
7. Marcadores de eventos: estos son extremadamente importantes, pues nos dicen en que tiempo se realizan ciertos eventos, como:
   • Primer pintado (verde claro): cuando el navegador empieza a dibujar cualquier cosa en el navegador, incluyendo el blanco del fondo del sitio, si es que lo hubiera.
   • Primer pintado de contenido (verde oscuro): momento en que el navegador plasma cualquier elemento de contenido, como texto o imagen. Esta métrica se usa para dar una idea de cuando el usuario recibe información consumible como texto u otros elementos visuales.
   • DOM cargado (azul): tiempo en que está listo el DOM (Document Object Model, una estructura interna del navegador) y no hay hojas de estilo ni JavaScript bloqueando la ejecución. Este evento se usa por JavaScript como punto de inicio para su ejecución.
   • Onload (rojo): el procesamiento de carga está completo y todos los recursos han terminado de descargarse
8. Descarga de datos: mediante esta opción puedes descargar un archivo de datos con extensión .har que luego puedes subir en un visualizador externo y graficarlos con un poco más de ayudas, en particular unas gráficas de pastel adicionales.

Mejora la velocidad en base a la gráfica de cascada

La gráfica en cascada contiene información valiosa que te ayudará a empezar a comprender que tienes que hacer para mejorar la velocidad de WordPress. En una gráfica de cascada se pretenden tres optimizaciones de manera general: la primera que la gráfica sea menos ancha, es decir que las peticiones tarden lo menos posible en resolverse; la segunda optimización es que la gráfica sea menos alta, es decir, que baje el total de peticiones. Es posible una tercera optimización, la cual consiste en reordenar las peticiones de modo que mejoremos un poco más aún en tiempos de respuesta y descargas. Para mejorar la velocidad de WordPress es esencial intentar realizar las primeras dos optimizaciones, y la tercera para después si es que es posible.

Interpretando los colores de la línea de vida de una petición

Hay que poner atención especial en la cantidad de barras verdes (conexiones TCP), cantidad y longitud de barras moradas (TTFB) y cantidad de barras grises. Se pueden aplicar los siguientes criterios para detectar áreas donde se apliquen correcciones para mejorar la velocidad de WordPress:

• Demasiadas barras verdes: si ves barras verdes en gran parte de las peticiones, posiblemente se están usando demasiadas conexiones TCP, eso se puede remediar a nivel de servidor.
• Demasiadas barras moradas: demasiados recursos; puedes mejorar consolidándolos, generalmente ayuda el minificar y consolidar CSS y JavaScript, al igual que otras técnicas como CSS sprites, las cuales dan excelentes resultados para mejorar la velocidad de carga de tu sitio.
• Barras moradas demasiado largas: podrías tener un problema de latencia; necesitas o un mejor servidor, o un CDN.
• Barras grises demasiado largas: el tamaño total de tu página es alto; tienes que identificar que recursos son los más grandes y optimizarlos.
• Demasiadas peticiones con barras cortas de varios colores: puedes optimizar estas peticiones consolidando recursos, como por ejemplo minificar y unir CSS y JavaScript, respectivamente.

Pestaña Vídeo

GTmetrix te permite generar un pequeño vídeo donde se ve como carga tu sitio en relación a los marcadores de eventos; luego, te permite hacer clic en las leyendas de modo que saltes al momento exacto en el vídeo donde puedes ver como va trabajando el navegador en ese momento determinado. No es tremendamente útil, y en lo personal no lo uso mucho, pero ahí está la opción por si quieres experimentar con ella.

Pestaña Historial

Aquí verás información histórica de tus mediciones que hayas realizado al sitio que revises actualmente. Aquí puedes ver como le ha ido a través del tiempo, si va bajando o subiendo algún puntaje, como por ejemplo, si mejora la velocidad de WordPress en un período de tiempo En esta sección verás tres gráficas: cronometraje de página, tamaños de página y total de peticiones, y puntuaciones PageSpeed y YSlow (“Page timings“, “Page sizes and request counts“, “PageSpeed and YSlow Scores” respectivamente). A continuación muestro la primera de las gráficas:

1. Título de gráfica, para que identifiques que muestra
2. Si quieres añadir una nota o recordatorio a la gráfica, haz clic en este botón y luego clic en la gráfica; GTmetrix te permitirá especificar una fecha y un comentario.
3. Puedes elegir ver datos con más o menos granularidad con este control; los botones disponibles se muestran en azul, los no disponibles en azul tenue y el activo en azul fuerte.
4. Si tienes muchos datos y no entran en la gráfica se habilitan estos controles, que te permiten desplazar la gráfica de modo que puedas ver más datos a los lados.
5. Con estos controles puedes cambiar el rango de fechas que se muestra en las gráficas de historial.
6. Por último, si lo deseas puedes descargar un archivo CSV con todo lo que se reportea, de modo que si quieres hacer un análisis más a fondo puedes tomar este archivo y abrirlo en Excel por ejemplo.

Todas las gráficas de historial se comportan igual y tienen los mismos controles.

Palabras finales

Pues bien, hemos llegado al final de esta introducción de como mejorar la velocidad de WordPress con GTmetrix. Lo que me queda es recordarles que el desempeño del sitio es una labor de constante revisión; con esto les quiero decir que programen una revisión frecuentemente, quizás una o dos veces por semana. Igual quiero dejar en claro que sólo hemos echado un vistazo a la página principal, pero ¿qué hay de tus entradas y las demás páginas de tu sitio? optimízalas también con GTmetrix, todas y cada una de ellas.

Finalmente, tal y como mencioné al principio, este es el primero de una larga cadena de artículos sobre optimización con GTmetrix, aunque debo mencionar que los criterios aquí utilizados se pueden aplicar en cualquier otra herramienta.

¡Hasta la próxima entrega!

Otras partes de esta guía

1. Guía de optimización de imágenes para WordPress
2. Pruebas y comparativa de plugins para optimizar imágenes