Cómo mejorar la velocidad de WordPress

Aprovechando que estamos estrenando nueva imagen corporativa, nuevo nombre y nueva web, hemos aprovechado para sacar un nuevo post técnico sobre como optimizar la velocidad de carga de WordPress.

Algo que nos preocupa mucho en el diseño de una nueva web en WordPress es la optimización de carga de la misma. Acelerar la velocidad con la que el usuario accede la información para conseguir una mejor experiencia de uso.

En este post os vamos a explicar paso a paso y de manera práctica todo lo que hemos hecho para conseguir optimizar la velocidad de carga de una web y para mejorar la experiencia del usuario y la calidad de código según percepción de google, usando herramientas como Page Speed e Yslow Score.

Como optimizar la velocidad de carga de WordPress (caso práctico)

Para empezar con el apartado técnico, os mostraremos el antes y después de www.mkg20.es usando la herramienta gtmetrix.com.Y visto la diferencia notoria de rendimiento y velocidad, empecemos por lo básico.

Optimizar el peso de las imágenes en el WordPress

Lo primero en el manual del «Optimizador» son las imágenes. El principal elemento que aumenta el tamaño de la web y por lo tanto su velocidad de carga son las imágenes: regla de oro, una imagen no puede pesar más de 500Kb , el tamaño medio razonable para una imagen sería de 100Kb. Y no solo hay que fijarse en el peso de la imagen sino en su resolución. Para que subir una imagen de 3000px x 1700px si el tamaño general de una web cuya estructura sea «full width» (ancho completo de pantalla), no va a superar los 1920px. hay que utilizar el tamaño adecuado para el espacio dentro de la web donde se va a colocar. Para lograr el peso y tamaño adecuado recomendamos usar herramientas como photoshop o gimp, o herramientas online como tinyjpg.com o  www.optimizepng.com.

Analizando la velocidad de carga con GTmetrix

Una vez optimizadas nuestras imágenes pasaremos a usar la herramienta gtmetrix para hacer una primera valoración de la web. Gtmetrix es una herramienta que analiza tu web y te da una serie de estadísticas sobre el rendimiento que iremos utilizando para detectar que debemos mejorar y quedarnos tranquilos con lo que  ya  está bien. Tan solo hay que entrar en gtmetrix.com y colocar la dirección de tu web.

En nuestro ejemplo, ya tenemos nuestros resultados en la imagen superior. Ahora hay que interpretar y analizar. Vemos que la web no usa GZIP, tiene scripts, css y html no minificados, usa query string en recursos estáticos, aún quedan imágenes por optimizar, hay elementos que no tiene especificada su fecha de expiración (caché), etc.

Vamos a explicar paso a paso como ir solucionando cada apartado.

¡¡¡¡IMPORTANTE!!!! REALIZAR COPIA DE SEGURIDAD TANTO DE LOS ARCHIVOS COMO DE LA BASE DE DATOS

Antes de efectuar cualquiera de las acciones descritas a continuación, se recomienda crear una copia de seguridad completa de la web ya que estamos trabajando con código sensible que puede ocasionar su rotura. MKG20 no se hace responsable del mal uso de esta información.

Compresión de la web con Gzip

GZIP: Para quien no lo conozca y sin entrar en tecnicismo, es un compresor web. GZIP se encarga «así como lo hace winrar con archivos» de comprimir códigos de la web antes de enviarlos a la red.
Para poder activar este recurso es necesario que nuestro servidor esté correctamente configurado y tenga instalado el modulo php «mod_deflate», en el caso de que no lo esté, habría que contactar con nuestro proveedor para buscar una solución, que normalmente consiste en  contratar un servicio superior del que disponemos.

Si hemos comprobado que cumplimos este requisito, podemos activar el gzip:

• Opción 1: Podemos activarlo desde el archivo .htacces en la raiz de nuestra web, añadiendo el siguiente código:

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.*


• Opción 2: Instalar un plugin para habilitar Gzip en wordpress, nosotros recomendamos Gzip Ninja Speed, tan solo instalar y activar, no precisa de ninguna otra configuración.

Cachear archivos estáticos y eliminar query strings.

Este paso es uno de los más importantes. Los archivos estáticos de nuestra web, como imágenes, el css, javascripts… son archivos que no suelen cambiar, o que lo hacen muy poco en el tiempo. Existe la posibilidad de guardar estos archivos en el pc de nuestros visitantes de modo que nos se los tengan que descargar continuamente cada vez que accedan a la web. Para ello deberemos de especificar un código de caducidad para cada elemento. Por ejemplo en nuestro caso, hemos configurado que el código de la web solo se renueva cada 7 días en los pc de nuestros visitantes, salvo casos especiales en los que podemos forzar la descarga.

• Opción 1: Colocar el siguiente código en el .htacces de la raíz de nuestra web.

ExpiresActive On
ExpiresDefault A3600
<filesmatch ".(jpg|JPG|gif|GIF|png|css|ico|js)$">
ExpiresDefault "access plus 7 day"


• Opción 2: Usar plugins, nosotros recomendamos 3; Query Strings Remover, Far Future Expiration Plugin y WP Super Cache. A excepción de Query Strings Remover, los otros 2 hay que configurarlos.
  En el caso de Far Future Expiration, tan solo hay que indicar a que archivos queremos indicarles fecha de caducidad y la fecha, en nuestro caso todos y 7 días.
  En WP Super Cache tenemos que indicar las opciones que más nos convengan, normalmente son las que vienen como (recommended) en nuestro caso tenemos además la opción de renovar cache cada vez que se hace una modificación en la web. Podremos usar este plugin para forzar la renovación de cache.

Minificar PHP. CSS, JavaScript

Este paso puede ser un poco complejo. Se trata de comprimir el código eliminando los espacios, saltos de lineas y sangrías que son innecesarias, esto ayudará a ahorrar espacio, y a mejorar el análisis y la velocidad de carga de la web.

• Opción 1: Comprimir el código manualmente: Tedioso y complejo si no se ha hecho conforme se creaba la web, pero el más seguro ya que sabremos perfectamente que estamos haciendo y que partes estamos minificando.
• Opción 2: Usar compresores online como; compresor PHP, compresor CSS, compresor Javascript. Podremos encontrar muchos más compresores por la red. Solo tendremos que coger nuestro código, introducirlo donde corresponda y ejecutar la aplicación. El código final obtenido lo tendremos que sustituir donde se encuentre el original. Menos seguro que el anterior ya que estos procesos automáticos pueden fallar si el archivo es muy complejo y devolvernos un código con errores.
• Opción 3: Usar un plugin, nosotros recomendamos Better WordPress Minify. Ojo, porque este no es como el de GZIP, hay que configurarlo específicamente para cada web. Una vez instalado y activado deberemos de ir a nuestra web y explorar si se ha «roto» algo, tanto en el backend como el frontend. Normalmente habrá algo que deje de funcionar, en nuestro caso fue el loop del blog.
  Este plugin dispone de una pestaña para gestionar cada archivo por separado, minificarlos y hasta cambiarlos de posición (mover los javascripts al footer ayudan a la carga de la web). Deberemos de localizar el código que está afectando a nuestra parte rota de la web y meterlo en el grupo de «no minificar» y/o «mantener en posición original». Este proceso es el menos seguro de todos, pero el más cómodo, de ahí que se recomiende hacer uso de COPIAS DE SEGURIDAD.

Optimizar imágenes subidas

Tan solo nos queda optimizar las pocas imágenes que nos hayamos podido saltar. Gtmetrix te las ofrece ya optimizadas para descargar por lo que es muy cómodo.Y así es como hemos pasado de una web con una calificación muy baja a un WordPress muy optimizado obteniendo una calificación  A la más alta posible. Hacemos hincapié de nuevo en que es necesario y recomendable hacer copia de seguridad de todo antes de empezar.

El escalar puestos en optimización puede ser complejo y tedioso pero paso a paso  se pueden obtener buenos resultados.