Optimizar WordPress con htaccess y plugins gratuitos

Algo que nos desespera tanto como usuarios de una Web como diseñadores de la misma es la lentitud de un sitio Web. Sin darnos cuenta llenamos nuestros WordPress de plugins, utilizamos plantillas cada vez más complejas y, en consecuencia, más pesadas, y en muchas ocasiones a todo eso hay que sumarle la no optimización de nuestro hosting. Por todo ello, hoy os comparto unos pasos básicos y muy sencillos que harán que vuestro sitio Web WordPress cargue mucho más rápido, y para ello, usaré como ejemplo la optimización realizada en la web corporativa de mi empresa www.ledyspa.com. ¡Vamos a ello!.

0. Mediciones pre-optimización

De nada serviría tomar acciones sobre nuestro WordPress sin previamente analizar en que estado se encuentra. Para ello, utilizaremos diversas herramientas online gratuitas que nos permitirán ver el grado de optimización y velocidad de carga, puntos sobre los que trabajaremos en este post.

En primer lugar, realizaremos una medición del tiempo de carga de nuestra Web a través de la herramienta Website Speed Tool de Pingdom Tools. Una vez dentro, introducimos la URL completa de nuestra Web, clikamos en ‘Settings’ y elegimos el servidor ‘Amsterdam, Netherlands’ (por proximidad). En el caso del sitio Web ledyspa.com, estos son los resultados obtenidos:

Medicion pingdom tools antes de optimización
Medicion pingdom tools antes de optimización

A continuación, acudimos a la herramienta de medición de optimización proporcionada por Google, PageSpeed Insights, que nos mostrará el nivel de optimización tanto a nivel móvil como a nivel versión de escritorio junto con una serie de recomendaciones. Tan solo habrá que introducir la URL completa de la Web en el campo y pulsar ‘Analizar’. En nuestro caso, estos son los resultados obtenidos:

Por último, y como comprobación de la optimización de nuestro servidor (hosting), realizamos un test de compresión gzip a través de la herramienta GZip Test de gidnetwork.com, donde bastará con introducir la URL completa de la Web en el campo y pulsar ‘Check’. En el caso nuestro, no se encontraba activada la compresión todavía:

Compresión GZIP no activada
Compresión GZIP no activada

Una vez realizadas estas 3 comprobaciones, ya podemos anotar los resultados obtenidos para su posterior comprobación. En el caso de ledyspa.com, se observa que la versión móvil tan solo obtiene un grado de 29/100 y la versión de escritorio de 42/100, muy bajo. Además, el tamaño de carga de la página de inicio asciende a 2Mb realizando un total de 81 solicites (llamadas) en cada carga. Sin duda, unos resultados malos… ¿los mejoramos? :)

[easy-tweet tweet=”Optimiza la velocidad de #WordPress con htaccess y plugins gratuitos en pocos minutos” user=”nvillen” usehashtags=”no”]

1. Fichero .htaccess optimizado para WordPress

Gran parte del trabajo lo podemos realizar directamente sobre el fichero ‘.htaccess’. Para ello, podemos descargar el existente en nuestro servidor (en caso de que anteriormente hayamos añadido reglas personalizadas) o crear uno nuevo a través de un fichero de texto (.txt). Recordar que si lo descargáis desde vuestro servidor, se encuentra en el root y deberéis renombrar el fichero ‘.htaccess’ a ‘htaccess.txt’ para poder editarlo. Por defecto, cualquier fichero ‘virgen’ incluirá el siguiente comando:

# INICIO WORDPRESS
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# FIN WORDPRESS

Si decidís hacerlo desde cero, copiar-pegar el código anterior y ya tendréis el .htaccess de origen de cualquier WordPress. A continuación, añadiremos 2 nuevas reglas, las cuales son:

# INICIO COMPRESION GZIP
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# FIN COMPRESION GZIP
# INICIO EXPIRACIÓN CACHE
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>
#FIN EXPIRACIÓN CACHE

La primera de ellas habilita la compresión gzip, lo que reducirá sustancialmente el peso del sitio web y, en consecuencia, el tiempo de carga de la Web. Adicionalmente, si vuestro hosting está gestionado por cPanel, también podéis eliminar esta regla en el ‘htaccess’ y activar la compresión directamente a través de cPanel:

Compresión GZIP a través de cPanel
Compresión GZIP a través de cPanel

La segunda regla dicta las directrices sobre la expiración de caché en base a los diversos tipos de formato. Con esto, nuestro fichero htaccess estaría listo para ser guardado como .txt, subido al root de nuestro hosting y, una vez ahí, renombrarlo a ‘.htaccess’. Recordar añadir el punto del inicio, borrar la extensión ‘.txt’ y aseguraros de que no existe otro fichero ‘.htaccess’.

2. Plugins WordPress para optimización

Por último, añadiremos un par de plugin gratis (o tres) a nuestro WordPress para optimizarlo. En primer lugar, os recomiendo Autoptimize, que en tan solo unos segundos nos permitirá optimizar HTML, JavaScript y CSS, todo gracias a la agrupación de ficheros en uno único, lo que aumenta la velocidad de carga del sitio web de una manera muy notable. Existen diversos plugins gratuitos similares a Autoptimize, pero de los que he probado este es el más sencillo de todos y muy eficiente.

En segundo lugar, os recomiendo activar una opción del plugin Jetpack llamada ‘Photon‘, que por defecto viene desactivada, y que se encargará de acelerar el sitio web al cargar imágenes desde el CDN de WordPress.com, en lugar de hacerlo desde vuestro propio servidor, reduciendo el consumo de tráfico y aumentado la velocidad de carga. De paso, revisar los complementos activos de Jetpack ya que muchos de ellos no los estaréis usando, así que dejar exclusivamente aquellos que veáis de utilidad.

Por último, existen diversos plugins de carga progresiva (lazy load) de cada página de vuestro sitio, de manera que el contenido carga según se va haciendo scroll reduciendo notablemente el tiempo de carga. Yo os recomiendo ‘Bj Lazy Load‘ por su sencillez y su efectividad.

Ahora, ¡a comparar!

Ha llegado el momento de ver si el trabajo realizado ha servido para algo. Os comparto las capturas de las herramientas utilizadas en el paso 1 tras hacer realizado las diversas mejoras.

En resumen:

  • PageSpeed insights: de 29/100 y 42/100 hemos pasado a 57/100 y 83/100, es decir, un 50% más de nivel de optimización
  • Velocidad de carga (Pingdom Tools): de un grado 62/100, 81 solicitudes y 2,0Mb hemos pasado a un grado 94/100, 42 solicitudes y 965Kb, es decir, un 50% de reducción de solicitudes y tamaño y un aumento del 30% en grado de optimización. Si bien el tiempo de carga en la captura es superior, es debido a un tiempo de respuesta del servidor lento durante la prueba.
  • Compresión gzip: Hemos pasado de un tamaño de 49,901 bytes a 6,611 bytes, es decir, una ¡compresión del 75,1%!.

Después de esto… ¿a qué esperas para optimizar tu sitio Web?. ¡Suerte!.

Optimizar WordPress con htaccess y plugins gratuitos
5 7 votos

Temas

Dedico muchas horas de mi día a día al marketing online, pero aquí también os hablaré de mis hobbies, tecnología y todo aquello que forma parte de mi día a día (y que merece la pena compartir).

¿Algún comentario? :)