Optimización de mi sitio WordPress: Como pase de 72% a 92% en SpeedRank
Las optimizaciones de los sitios es hoy en día indispensable, no sólo por temas de SEO (para lograr que nuestras páginas aparezcan en los primeros resultados de Google), si no además por que muchas personas que visitan nuestros sitios lo hacen desde la comodidad de dispositivos móviles que cuentan con las limitaciones de los planes de datos, aunado al hecho de que una página que tarda mucho en cargar, normalmente la cerramos y buscamos otra en vez de esperar.
Por lo anterior, me di a la tarea de terminar de optimizar mi sitio, el cual esta creado bajo la plataforma WordPress. Actualmente sólo contaba con un plugin para mejora de SEO (Yoast SEO), más no especificamente para rendimiento. Al ejecutar una prueba con la herramienta GTMetrix, descubrí que tenia trabajo por hacer para mejorar el rendimiento de mi sitio, comparto mis resultados iniciales:
ENTENDIENDO LOS RESULTADOS:
Al ver los resultados, decidí enfocarme en solucionar principalmente los 3 primeros problemas, ya que eran donde mis calificaciones eran muy bajas:
Enable GZIP Compression: 0%. Los archivos que componen los sitios web (HTML, PHP, CSS, JS) estan en texto plano y sin compresión, es posible comprimir estos archivos para que viajen comprimidos por internet y pesen menos al transferirse, por lo tanto la página cargará más rápido.
Leverage browser caching: 56%. Esto tiene que ver con la cache de los recursos del sitio (por ejemplo imágenes), podemos indicar un valor que le haga saber al navegador cada cuando deberá revisar si el contenido esta actualizado, generalmente las imágenes de una misma nota no suelen cambiar, asi que no tiene caso que las vuelva a descargar de manera constante. La advertencia que me mostraba en este apartado iba relacionada a que no indico explicitamente el tiempo en que el navegador debe guardar en cache el contenido de mi sitio.
Minify CSS: 76%. Los archivos de hojas de estilo (CSS) solemos escribirlos de manera legible para nosotros los humanos, añadiendo cosas como espacios y múltiples lineas para facilitar su lectura, sin embargo el navegador no tiene problema en leer el documento sin estos elementos, por lo que eliminando todos esos espacios reduciremos el peso del archivo (ya que aunque no los veamos, al fin y al cabo son caracteres que añaden peso a nuestro archivo). Por lo que en este apartado me indicaba que tenia archivos que podía reducir su tamaño eliminando espacios innecesarios.
Otros valores a tomar en consideración es el tiempo total de carga del sitio (cuantos segundos tarda mi sitio en cargar completamente), el tamaño total de la página (cuanto pesa mi página inicial, con todo e imágenes) y las peticiones al servidor (cuantas solicitudes realiza el navegador al servidor para solicitar acceso a archivos, ya sean JavaScript, Imágenes, CSS, etc.); reducir estos valores impactará positivamente en el rendimiento del sitio, por ejemplo: Si logro reducir el tamaño del sitio, debería reducir el tiempo total de carga al necesitar transferir menos información.
SOLUCIÓN: MANOS A LA OBRA
La corrección de los aspectos observados por GTMetrix, se realizaron con la ayuda de plugins de WordPress así como añadiendo lineas de código al archivo .htaccess que se encuentra en el directorio principal de WordPress. Entrando en detalle, realice lo siguiente:
1) Instalación del Plugin: WP Super Cache
Este plugin tiene la finalidad de crear archivos html estáticos del sitio, para mostrarlos a los usuarios en vez de tener que procesar cada vez el contenido dinámico del sitio (PHP) y hacer las solicitudes a base de datos. Para explicarlo de mejor manera, pensemos en un restaurante de comida rápida, donde al tener los alimentos ya preparados, puedes hacer tu pedido y te lo podrán entregar en un periodo breve de tiempo (esto seria tener el contenido estático HTML), en contraste, en cualquier otro restaurante, al hacer el pedido este pasara a tener que ser elaborado en la cocina al momento que hagamos nuestro pedido, lo cual al tener que procesar los ingredientes y cocinarlos, esto tomará más tiempo (el servidor tendría que ejecutar el código PHP y hacer las consultas de bases de datos para devolvernos en ese momento el contenido estático en HTML).
Otro beneficio añadido es que los archivos HTML estáticos generados son más ligeros y eso nos ayuda que nuestra página cargue más rápido.
2) Compresión GZip
El plugin de WP Super Cache tiene además opciones para ayudar a generar la compresión de los archivos, específicamente en la configuración mediante una opción que dice “Comprime las páginas para que se sirvan más rápidamente a los visitantes. (Recomendado)”, hay que marcar la casilla para activarla.
Sin embargo después de activarla note que aun quedaban cabos sueltos en el tema de la compresión de archivos (GTMetrix me seguía indicando detalles en este apartado), por lo que decidí investigar un poco y ajustar un poco más la compresión por GZip de manera “manual”. Para hacerlo tuve que editar el archivo .htaccess del sitio añadiendo las siguientes lineas:
# GZip con Apache <IfModule mod_deflate.c> # Comprimir HTML, CSS, JavaScript, Text, XML y fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml
# Eliminar browser bugs (necesario en caso de navegadores realmente antiguos) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
3) Instalación del Plugin: Fast Velocity Minify
Este plugin ayuda a reducir el número de peticiones de archivos al servidor, para lograrlo combina todos los archivos de estilos CSS y de JavaScript que usa nuestro sitio en uno sólo (recordemos que usar plantillas y plugins suelen traer cada uno sus propios archivos JavaScript y CSS, creando más peticiones). Posteriormente realiza el proceso de minificación eliminando los espacios innecesarios de los archivos que genero, reduciendo de esta manera su peso. En resumen, esta extensión ayuda a hacer la página más ligera al cargar menos recursos y hacer que estos ocupen menos espacio. Las opciones y la instalación es de lo más simple.
4) Expiración de la cache
Cómo último punto, revise la parte de especificarle al navegador cuanto tiempo debe guardar mis recursos en su cache. Para ello nuevamente edite el archivo .htaccess del sitio, añadiendo las siguientes lineas:
# Expiracion ExpiresActive On ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 week" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 week" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 month" ExpiresDefault "access plus 2 days"
Como puede observarse, indico por tipo de recurso (si es PNG, JPG, CSS, PDF, etc.) su tiempo de expiración.
RESULTADOS FINALES
Al aplicar todos los pasos anteriormente descritos, logre pasar de 72% a 92% en SpeedRank, bajando en 0.3s el tiempo de carga del sitio, bajando el peso del sitio en nada despreciables 286KB y bajando el número de peticiones de 51 a 34.
Aunque en Leverage browser caching sigo con una calificación de C, es por los recursos externos de facebook, twitter entre otros que si tienen un valor definido pero no controlo. Además recordemos que estas métricas se deben de tomar como referencia para ver hasta que punto se puede optimizar (cuando aplique), por lo que el objetivo no es llegar a un 100% (en la práctica esto no es factible de realizar y difícilmente se lograría, más en un sitio en WordPress).
Espero mi experiencia sea de ayuda para aquellos que busquen (como yo en su momento) optimizar el rendimiento de su sitio web basado en WordPress.
Referencias:
How to Add mod_expires to your .htaccess https://www.inmotionhosting.com/support/website/htaccess/apache-module-mod-expires ¿Cómo Habilitar Compresión GZIP en WordPress? https://kinsta.com/es/base-de-conocimiento/habilitar-compresion-gzip/ 10 Ways to Optimize Your WordPress Website for Speed https://www.dreamhost.com/blog/optimize-wordpress-website-speed
Fanático de la Tecnología y de los nuevos retos. Agente del Cambio Ágil. Desarrollador de personas, negocios, aplicaciones web y de soluciones gráficas.
