Optimizando la velocidad de la web de SocialCo, basada en WordPress.

Me pidió la jefa el otro día que repasara la velocidad de carga de nuestra propia web, que está construida utilizando como CMS WordPress. Como sabéis, Google ha incluído últimamente entre sus criterios de puntuación de las webs su velocidad de carga, y, a juzgar por los resultados de la herramienta para desarrolladores de Google (Pagespeed Insights), la nuestra dejaba bastante que desear.

PASO 1: Asegurarse de que nuestro WP está ordenado y optimizado

Antes de seguir las recomendaciones de Google, vamos a fijarnos en los clásicos básicos: cuatro cosas esenciales que mejoran la velocidad y rendimiento de un WordPress y que son:

1. Tener un buen servidor. Nosotros con los chicos de eCliente vamos muy bien servidos, así que nada que hacer en este frente.
2. El número y calidad de plugins instalados. Aquí también tenemos mucho cuidado, instalando sólo plugins fiables, con mantenimiento y sólo los necesarios y que sirven a funciones avanzadas que no podemos incluir nosotros mismos fácilmente en el código de la página. Hemos repasado, de todas formas, que no hubiera ningun plugin instalado que estuviera sin usar, ya que esto también afecta a la carga del servidor.
3. Que el wordpress esté actualizado, todos sus plugins también lo estén. Además de mejorar la velocidad de carga, esto redunda en una mejora de la seguridad del sitio web.
4. Que la base de datos esté optimizada. Para eso, instalamos el plugin WP-Optimize y lo usamos para borrar revisiones de posts, spam, y otras entradas que agrandan y lastran nuestra bbdd. En la primera limpieza, hemos borrado 11,2 Mbytes de nuestra bbdd, que ahora tiene un tamaño de 2,3 Mbytes.

PASO 2: Seguir las orientaciones de Google

Una vez repasados estos elementos, tomamos las orientaciones de Google y actuamos en consecuencia:

1. Habilitar compresión del servidor. Es decir, llamar a los chicos de Sistemas y pedirles que activen y configuren un módulo de Apache que se llama mod_deflate y que se encarga de comprimir los ficheros que pide el usuario y mandarlos con tamaño reducido.

2. Optimizar imágenes. Para este punto, lo que vamos a hacer es instalar un plugin que se encarga de procesar tanto las imágenes que ya tenemos subidas a nuestro servidor (y a nuestro tema) como de poner un filtro a la hora de subir nuevas, y mejorar su calidad de compresión. En nuestro caso hemos escogido EWWW Image Optimizer uno de los dos más recomendados y lo hemos completado con Lazy Image Loader, que hace que no se cargue una imagen hasta que no es visible por el navegador. De esta forma, la página visualiza antes, y las imágenes se van sirviendo según son necesarias.

3. Especificar caché de navegador. La forma más sencilla de hacer esto es añadir unas líneas de código a tu fichero htaccess. Puedes ver una explicación sobre el tema aquí (en inglés).

4. Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página. Lo que Google nos está diciendo aquí es que hemos colocado llamadas a ficheros en la parte de arriba del código html de la página. El resto de la página no se carga y comienza a visualizar hasta que no hemos procesado estos ficheros y esto ralentiza la visualización global del sistema. ¿La solución? De nuevo, un plugin. En este caso hemos elegido Better WordPress Minify, que nos ha dado buen resultado en otras webs.

Adicionalmente, hemos habilitado la compresión gzip del servidor (de nuevo, añadir unas líneas de código al fichero htaccess). Nuestro tema estaba ya optimizado, ya que al construirlo habíamos tenido cuidado en:

• Usar sprites de css en lugar de imágenes sueltas para iconos
• Sustituir llamadas dinámicas innecesarias (nuestro tema está diseñado únicamente para nuestra página y por tanto no necesitamos opciones configurables)

Tras estos dos pasos

Y unas dos horas de trabajo, hemos conseguido este resultado:

Sigue sin ser perfecto, como veis, tenemos un 8 sobre 10 en nuestra puntuación de escritorio, y un poquito menos en nuestra puntuación de velocidad para móvil, pero con apenas dos horas de trabajo hemos mejorado un 100% nuestro resultado inicial. 🙂

NOTA: La instalación de todos estos plugins y configuración del servidor debe ser realizado con cuidado y mimo idealmente por profesionales que sepan lo que están haciendo, porque si no pueden producirse resultados indeseados e indeseables.

Si te gustó este post, recuerda que organizamos e impartimos cursos relacionados con la comunicación digital de temas sociales. ¡Pídenos uno sobre WordPress!

Curso de WordPress SocialCo

Lecturas recomendadas

• 15 formas de optimizar tu worpdress (en inglés)
• Cómo optimizar la velocidad de tu página web basada en WordPress (también en inglés)