Laboratorio WP. Velocidad de carga

La velocidad de carga de nuestra página es importante, ya que de ella dependerán tanto nuestro posicionamiento SEO, como la cantidad de visitas que no perderemos (en caso de excesiva lentitud de carga) o que continuarán explorando nuestros contenidos.

 

Medir la velocidad de carga de nuestra página

En este artículo de ‘Laboratorio WP’ vamos a obviar los análisis de CSS y HTML que generalmente hacemos, para centrarnos más concretamente en los análisis de velocidad de carga, que es lo que realmente nos importa.

Para ello, disponemos de tres aplicaciones web muy útiles, una de las cuales ya conocemos, PageSpeed Insights, de Google. Las otras dos son Pingdom Website Speed Test y GTmetrix.

De hecho, vamos ya a empezar tomando los resultados de las tres, que después nos sirvan para comprobar las mejoras.

PageSpeed Insights:

  • Mobile 56/100
  • Desktop 62/100

Pingdom Website Speed Test:

  • Performance grade (media) 77
  • Load time (media) 2,92 s.

GTmetrix:

  • PageSpeed Score 73%
  • Page Load Time 3,2 s.

Con estos resultados, ya tenemos un punto de partida. Ahora, vamos a ver qué camino vamos a tomar, para comprobar, al final, a dónde hemos llegado.

 

PASO 1. Las recomendaciones

En los diferentes artículos que he leído en la web, se dan una serie de recomendaciones, algunas simples y directas, otras más rebuscadas y técnicas. Vamos a ver cuáles son:

  • Hosting. Recomiendan contratar un hosting rápido y nacional, es decir, ubicado en el ámbito territorial donde pretendamos contactar con nuestros visitantes.
  • WordPress. Constantemente actualizado (recuerda las copias de seguridad). Hay que desactivar los pingbacks y trackbacks, así como vaciar a menudo la papelera y el spam.
  • Plugins. Sobre los plugins, se recomienda emplear los plugins mínimos imprescindibles, valorando su nivel de carga en la velocidad de la página en contraprestación con su necesidad (por ejemplo, un plugin de posicionamiento SEO efectivo que cargue mucho la página lo podemos dejar por la mejora en ese ámbito, mientras que otro que no sea tan importante lo podemos eliminar si su carga asciende). También hay que desactivar y borrar, aquellos que descartemos. Digo borrar, ya que su sola existencia hace que WP lo indexe. Los plugins también tienen que estar permanentemente actualizados.
  • Tema. Cuanto más sencillo, mejor, pues tendrá minimizado el código. En la página de portada, mejor mostrar extractos que artículos enteros.
  • Imágenes. Hay que optimizar las imágenes antes de subirlas.
  • Vídeo y audio. Tenerlo en servidores externos.
  • Bibliotecas de código y fuentes de letras. Utilizar las bibliotecas de Google (viene a ser lo mismo que en el anterior punto, es decir, utilizar servidores externos).
  • Crear subdominio para contenidos estáticos. Esto resulta bastante interesante, ya que la descarga de estos elementos se realiza en paralelo. Concretamente, hablamos de CSS, JavaScript e imágenes.
  • Usar una CDN (Content Delivery Networks – Red de Entrega de Contenidos). Si tenemos JetPack disponemos del CDN Photon, aunque hay otras como CloudFlare.

 

PASO 2. Programación

La programación adecuada para mejorar los tiempos de carga de nuestra página web, se basan en la modificación del archivo .htaccess, el archivo wp-config.php y activar la compresión gzip mediante el archivo options.php.

 

Modificación archivo .htaccess

Hotlinking. El hotlinking consiste en emplear imágenes de tu web, pero sin copiarlas, es decir, vinculándolas a otra web. Eso significa que, cuando alguien visualice la web ‘copiadora’ estará generando tráfico en tu servidor (un tráfico muy pesado, ya que se trata de imágenes).

Además de poder bloquearlo directamente desde el panel de administración del servidor, se puede incluir el siguiente código en nuestro archivo .htaccess:

 

Keep Alive. Significa mantener la conexión activa, y se consigue con:

 

Activar la caché del navegador. Esto lo haremos mediante:

 

Modificaciones en el archivo wp-config.php

Limpiar el ‘Trash’. El ‘trash’ se denomina al lugar donde se guardan los posts, páginas o comentarios que no deseas. Ello consume base de datos, por lo que es conveniente configurar WordPress para que los borre cada cierto tiempo, mediante define( ‘EMPTY_TRASH_DAYS’, 7 ); (en este caso, una vez a la semana).

Activar la caché. Esto lo hacemos mediante la función define( ‘ENABLE_CACHE’, true );.

Reparar la base de datos. Debido a su uso continuado, la base de datos de WordPress puede generar registros corruptos. Aunque existen plugins que la reparan, esto mismo lo puede hacer ‘en modo mantenimiento’ el mismo WordPress, mediante la instrucción define( ‘WP_ALLOW_REPAIR’, true );. Luego se puede realizar el proceso mediante http://tu-dominio/wp-admin/maint/repair.php

Acortar la cola de revisiones de posts. A medida que vamos modificando un post, WordPress va guardando indefinidamente revisiones del mismo que también engrosarán, y mucho, la base de datos. Para evitarlo, podemos acortarla mediante define( ‘WP_POST_REVISIONS’, 3 );.

 

Así pues, en un sólo snippet de código quedaría así:

 

Activar la compresión gzip mediante el archivo options.php

Ejecutamos el archivo options.php indicando en el navegador:

http://tu-dominio/wp-admin/options.php

NOTA PROPIA: A mi no me aparece esta opción.

 

¿Qué velocidad tiene ahora nuestra página?

Vamos a comprobar, pues, con estas pequeñas modificaciones, cómo están los resultados:

Prueba Antes Después
PageSpeed Insights
– Mobile 56/100 55/100
– Desktop 62/100 61/100
Pingdom Website Speed Test
– Performance grade (media) 77 73
– Load time (media) 2,92 s 2,46 s
GTmetrix
– PageSpeed Score 73% 71%
– Page Load Time 3,2 s 2,3 s

Observamos, que, principalmente en Pingdom y GTmetrix, los tiempos de carga han disminuido entre un 18 y un 39%. De momento.

 

Los plugins

En esta ocasión no vamos a realizar una comparativa, ya que cada uno de los plugins que vamos a ver realiza una acción distinta, por lo que iremos viendo cómo se modifican los resultados tras la utilización de cada uno.

WP Optimize 1.9.1.

Empezamos con WP Optimize (básicamente, porque es el primero de mi lista). Básicamente, sus opciones son:

  • Eliminar datos basura antiguos
  • Desactivar trackbacks
  • Optimizar base de datos
  • Eliminar revisiones automáticas
  • Eliminar borradores automáticos
  • Eliminar spam

Dos comentarios: Primero, está en castellano y su configuración es muy sencilla. Segundo, no optimiza tablas tipo InnoDB, o sea, no va a hacer nada en la base de datos WordPress. Aparte de eso, Laboratorio WP es un sitio web que no está en uso, por lo que, como vamos a ver a continuación, no mejorará ningún resultado.

 

Prueba Antes Después
PageSpeed Insights
– Mobile 55/100 53/100
– Desktop 61/100 61/100
Pingdom Website Speed Test
– Performance grade (media) 73 73
– Load time (media) 2,46 s 2,42 s
GTmetrix
– PageSpeed Score 71% 71%
– Page Load Time 2,3 s 3,4 s

WP Smush 2.4.3.

Es un compresor de imágenes muy sencillo de usar, aunque está en inglés. Se instala como subopción en la pestaña ‘Medios’ del menú de administración.

Decir que, en mi búsqueda, he encontrado otro plugin, EWWW Image Optimizer, que hace lo mismo, pero no lo he probado.

Prueba Antes Después
PageSpeed Insights
– Mobile 53/100 57/100
– Desktop 61/100 63/100
Pingdom Website Speed Test
– Performance grade (media) 73 73
– Load time (media) 2,42 s 2,53 s
GTmetrix
– PageSpeed Score 71% 76%
– Page Load Time 3,4 s 2,3 s

BJ Lazy Load 1.0.6

Este plugin retrasa la carga de las imágenes hasta que no las tiene que visualizar el usuario, con lo que la carga de la página será más rápida. Se instala en la opcion ‘Ajustes’ del menú de administración. Simplemente, lo activas y ya funciona (y, por cierto, muy bien).

Prueba Antes Después
PageSpeed Insights
– Mobile 57/100 61/100
– Desktop 63/100 73/100
Pingdom Website Speed Test
– Performance grade (media) 73 73
– Load time (media) 2,53 s 2,22 s
GTmetrix
– PageSpeed Score 76% 83%
– Page Load Time 2,3 s 2,3 s

 

Autoptimize 2.0.2

Es un compresor de archivos CSS, JavaScript y HTML. Se instala en la opción de ‘Ajustes’ del menú de administración, con opciones básicas y opciones avanzadas. Incluye opciones de CDN y está medio traducido al español.

También, en mis búsquedas, he encontrado otro plugin compresor, WP Minify, que no he probado.

Prueba Antes Después
PageSpeed Insights
– Mobile 61/100 59/100
– Desktop 73/100 72/100
Pingdom Website Speed Test
– Performance grade (media) 73 79
– Load time (media) 2,22 s 2,40 s
GTmetrix
– PageSpeed Score 83% 84%
– Page Load Time 2,3 s 2,40 s

 

Scripts to Footer

Este plugin no lo he encontrado en ningún artículo que haya leído. Lo he visto en el directorio de WordPress de plugins, al buscar el plugin JavaScript to Footer, del cual sí tenía referencias. Lo que pasa es que este último no indica compatibilidad con la versión actual de WP, y hace 2 años de la última actualización. Scripts to Footer, por el contrario, se actualizó hace una semana, y las críticas eran mejores.

Retrasar la carga de los scripts al final de la carga de la página puede ser peligroso. Por tanto, mejor un plugin con ciertas garantías.

Se nos instala en ‘Ajustes’ del menú de administración, y nos permite deshabilitar la ‘bajada al footer’ de ciertas opciones, por lo que hay que ir probando en función de las características de nuestra web.

Prueba Antes Después
PageSpeed Insights
– Mobile 59/100 59/100
– Desktop 72/100 71/100
Pingdom Website Speed Test
– Performance grade (media) 79 78
– Load time (media) 2,40 s 2,58 s
GTmetrix
– PageSpeed Score 84% 84%
– Page Load Time 2,40 s 2,50 s

 

Trabajando con la caché

Una vez llegados a este punto, vamos a ver 4 plugins que trabajan con la caché del sistema. 3 son específicos, WP Super Cache, W3 Total Cache e HyperCache. El cuarto es Falcon Engine, pero en realidad es parte de WordFence Security.

  • WP Super Cache 1.4.8.

Viene en inglés y también se instala en la pestaña de ‘Ajustes’. Tiene unas opciones básicas, con las que ya mejora un poco, pero si activamos las recomendadas en la pestaña ‘Avanzado’, conseguiremos más.

  • W3 Total Cache 0.9.4.1.

Debo decir que tiene infinidad de ajustes. Al venir en inglés y la cantidad de trabajo que lleva este artículo, no me he entretenido a profundizar en este plugin, pero lo haré ya que será un fijo en sergiotoca.com. Nada más activarlo, los resultados han sido sorprendentes.

  • Hyper Cache 3.2.6.

No funciona

  • Falcon Engine (Wordfence)

Prometían que iba a ser la leche, pero los resultados demuestran que no hay para tanto. Eso sí, comparado con WP Super Cache, las diferencias tan pequeñas justifican el uso de un solo plugin.

Previo Super Cache Total Cache Falcon
Page Speed
Movil 59 59 69 59
Ordenador 71 71 84 72
Pingdom (media)
Performance 78 79 79 80
Load Time 2,58 1,81 1,73 3,04
GTmetrix
PageSpeed 84% 84% 95% 85%
Page Load 2,50 2,10 1,70 2,3

 

Plugins que conectan con un CDN

A continuación, vamos a evaluar el funcionamiento de dos plugins que trabajan con CDNs. En concreto, el plugin CloudFlare, que trabaja con la plataforma del mismo nombre, y Jetpack, que lo hace con Photon.

Previo Photon (Jetpack) CloudFlare Ambos
Page Speed
Movil 64 69 67 73
Ordenador 77 82 77 78
Pingdom (media)
Performance 80 79 78 79
Load Time 1,98 1,77 1,66 1.51
GTmetrix
PageSpeed 94% 94% 95% 95%
Page Load 1,8 1.6 1,8 1,8

Os diré que a mi, personalmente, me encanta Jetpack y es uno de los pocos plugins que tengo instalados en sergiotoca.com. La opción CloudFlare es bastante complicada para configurar y conectar, pero la considero idónea, ya que, además, supone una solución de seguridad en tu web.

 

Otros plugins interesantes para la velocidad de carga

P3 Plugin Performance Profiler

Este plugin no incrementa activamente la velocidad de carga de tu web, pero sí te indica la carga que supone cada uno de los plugins que tienes instalados en la misma. De esa manera, tú puedes hacer un estudio de qué plugins te están lastrando más la página y si realmente los necesitas.

Domain Sharding

Este plugin redirecciona las imágenes a través de un subdominio de tu página. Es como si tuvieras un CDN propio. Es de un autor español, David García, y resulta medianamente interesante, aunque no se actualiza desde hace un año y no es compatible con la última versión de WordPress.

 

Conclusiones

Hemos visto un amplio abanico de propuestas para mejorar los tiempos de carga de nuestra web. Está claro que algunas pequeñas tareas de mantenimiento y buenos hábitos a la hora de incorporar información (sobretodo elementos pesados como imágenes y vídeos), harán que el proceso de carga de nuestro sitio web sea menor.

En cuanto a los plugins, me han sorprendido muy gratamente BJ Lazy Load, que retrasa la carga de las imágenes, W3 Total Cache, para la cache, y Jetpack, y su plataforma CDN Photon.

También son de destacar WP Smush, como refuerzo si antes no hemos optimizado las imágenes, y CloudFlare, que, por lo complicado de su uso puedo entender que no todo el mundo esté pensando en su utilización (yo, en concreto, tampoco).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *