¡Muy buenas a todos, queridos lectores!
Hoy os vamos a comentar algunas técnicas básicas para optimizar WordPress.
¡Comenzamos!
Cachear el contenido
Por cada visita que recibe nuestro sitio web, WordPress debe procesar el código PHP, ralentizando la carga si no disponemos de un buen sistema de caché.
Para solucionarlo, podemos optar por la instalación de algún plugin de caché como WP Rocket o W3 Total Cache. Su funcionamiento se basa en guardar una copia procesada de la página para servirla a los visitantes. Con esto ahorraremos potencia de proceso del servidor y reduciremos los tiempos de espera.
Como la pela es la pela, os vamos a hablar sobre W3 Total Cache, que es un plugin gratuito y muy completo.
W3 Total Cache
Empecemos por lo básico. W3 Total Cache nos permite cachear lo siguiente: páginas, objetos y consultas a la base de datos, además de permitirnos gestionar el caché almacenado y optimizar código.
La caché nos permite guardarla en el disco, o usando un sistema de caché como Memcached. Y como comentamos, tenemos la posibilidad de optimizar, combinar y minimizar el código HTML, CSS y JS.
Todo esto lo convierte en un plugin complejo, con muchas posibilidades y configuraciones para poder optimizar WordPress.
Otros plugins de caché
Como cada web es un mundo, hay muchos plugins que te pueden servir en un caso concreto.
Otro plugin de caché de calidad es WP Speed of Light, que desde la interfaz de WordPress nos permite realizar muchas acciones para mejorar la velocidad de carga de nuestro sitio, además de poder optimizar el código y habilitar la compresión GZIP.
Optimizar las imágenes en WordPress
Esta es otra opción muy importante para poder tener un sitio WordPress rápido.
Se podría resumir en dos pasos: reducir el tamaño y optimizar el peso.
Lo primero es hacer la imagen con el tamaño adecuado. Por ejemplo, si la imagen va a estar dentro de un texto, no pongas una imagen de 3000px de ancho; en su lugar, cambia el tamaño de la imagen para ajustarlo a lo que finalmente se mostrará (por ejemplo, 200px de ancho). Además, si por ejemplo usamos Photoshop para retocar la imagen, y la guardamos en JPG, podemos guardarla con una calidad 8, suficiente para web, para reducir su peso.
Lo segundo es optimizar su peso. Para ello nos podemos servir de herramientas online como Optimizilla, donde subimos las imágenes y nos descargamos esa misma imagen optimizada. En muchos casos nos ahorramos entre un 30% y un 70% de su peso (imaginad esto multiplicado por todas las imágenes que podemos llegar a subir).
Las herramientas online de optimización de imágenes sirven para subir poder subir la imagen ya optimizada a nuestro WordPress. Pero si ya tenemos la imagen subida y la queremos optimizar, debemos hacer uso de algún plugin.
EWWW Image Optimizer
Este plugin gratuito nos sirve para optimizar las imágenes que subamos, o que ya tengamos subidas, a nuestro WordPress de forma automática.
Además, toda la optimización la hace desde el propio servidor, sin recursos externos, aunque esto puede hacer uso de un mayor número de recursos.
Podéis encontrar EWWW Image Optimizer en el repositorio de WordPress.
Smush Image Compression and Optimization (WP Smush)
La versión gratuita de WP Smush no permite optimizar imágenes que pesen más de 1MB. Pero a diferencia del anterior, éste usa un servicio externo de optimización de imágenes que reduce la carga del servidor.
También permite la optimización de las imágenes al subirlas, y las que tengamos subidas. Pero otra pega es que, en su versión gratuita, sólo es posible optimizar las imágenes por paquetes de 50. Si tienes más de 50 imágenes, tendrás que ir pulsando el botón de optimizar cada vez que se optimicen 50.
Optimizar código
Para mejorar los tiempos de carga de nuestro WordPress debemos combinar y minimizar los códigos HTML, CSS y JS.
Para minimizar el código hay que eliminar todo lo que no sea necesario para la interpretación del lenguaje, como espacios en blanco o comentarios.
Y combinar consistes en unir en un solo archivo varios del mismo tipo para reducir el número de peticiones.
Plugin Autoptimize
Autoptimize es un plugin gratuito de WordPress que nos permite, de forma sencilla, optimizar los códigos HTML, CSS y JS.
Recomendamos que, una vez activadas estas opciones, comprobéis el correcto funcionamiento de vuestra web, porque a veces puede causar que alguna función deje de funcionar correctamente.
También podemos usar para esto los plugins WP Rocket, W3 Total Cache o WP Fastest Cache.
Carga asíncrona del código JS y CSS
Si configuramos nuestro sitio para que cargue de forma asíncrona el código javascript y CSS conseguiremos un menor tiempo de carga de la página, al cargar de forma simultánea varios archivos, y no de uno en uno.
Con el plugin Async JS and CSS conseguiremos eso mismo. Este plugin nos permite configurar JS y CSS para que cargue de forma asíncrona, además de poder cargar el CSS dentro del HTML, lo que se traduce en otra mejora de velocidad.
Utilización de un CDN
Un CDN nos permite servir el contenido estático y el más pesado desde servidores ubicados en una zona geográfica cercana a la del visitante de nuestro sitio web, reduciendo la latencia y consiguiendo una web más rápida.
Hay muchos servicios de CDN, como CloudFlare, CDN77, o KeyCDN. Cada uno tiene sus propias características, más o menos avanzadas.
Entre las ventajas que tendremos usando un CDN, nos encontramos:
- Como hemos comentado, menor latencia entre el servidor y el usuario que visita la web, reduciendo el tiempo de descarga del sitio
- Mitiga los picos de tráfico que podamos tener al asumir el extra del ancho de banda
- Disminuiremos la carga del servidor principal al no tener que servir archivos estáticos
- Algunos CDN, como CloudFlare, que funcionan como proxy inverso, nos permiten tener nuestro web siempre operativa al cachear la web y tener siempre lista una copia estática
Elige el servidor perfecto para WordPress
Cada sitio construido con WordPress es distinto de otro. Por lo que elegir un servidor que se adapte perfectamente a tu WordPress es fundamental.
Podemos optar por un sencillo hosting compartido, que aunque cumple con los requisitos, está preparado para albergar no sólo WordPress, sino otros CMS como Joomla o Prestashop.
Sin embargo, hay hosting que están preparados específicamente para el buen funcionamiento de WordPress.
Una forma de identificar estos servidores es que usen Nginx en lugar de Apache. Nginx consume menos recursos y tarda menos tiempo en procesar las peticiones, por lo que lo hace ideal para WordPress. Como punto negativo, es que no se puede usar el archivo .htaccess, aunque tiene su propio archivo de configuración.
También podemos comprobar que el servidor haga uso de Varnish como proxy caché, o incluso use LiteSpeed en lugar de Nginx (eso sí, esta licencia es más cara).
PHP 7
Otra manera de aumentar la velocidad de su sitio WordPress es usar la última versión de PHP, que mejora significativamente su rendimiento.
No hay que olvidar que el uso de la última versión de PHP también está recomendado para evitar agujeros de seguridad (las versiones antiguas como PHP 5.4 ya han dejado de recibir soporte).
Pero antes de dar el salto a la nueva versión de PHP, asegúrate de que tu tema y tus plugins son compatibles, o busca unos alternativos.
Uso del protocolo HTTP/2
Este protocolo ha traído una gran mejora en el rendimiento web en comparación con HTTP1.1 al mejorar la carga paralela de elementos.
Entre muchas ventajas, hay que destacar las dos siguientes:
- Reduce la cantidad de información que se transmite en cada petición al traer las cabeceras comprimidas por defecto
- HTTP/2 sólo abre una única conexión para enviar todas las peticiones de carga de la web antes de cerrarla. Con HTTP1.1 se abría y cerraba una conexión por cada petición
Si tienes interés en probar si tu web soporta HTTP/2, puedes usar esta herramienta de KeyCDN.
Como veis, hay muchas opciones que podemos tocar para mejorar la optimización de nuestro sitio web con WordPress.
Seguro que hay más cosas para optimizar WordPress que nos hemos dejado en el tintero, así que esperamos vuestros comentarios para mejorar entre todos.
¡Nos vemos en la web!
