Este documento describe cuatro puntos clave para optimizar el rendimiento de un sitio web creado con WordPress: 1) Usar un plugin o sistema de caché para almacenar en caché páginas procesadas y evitar procesar código PHP, 2) Optimizar archivos HTML, CSS y JavaScript mediante minificación y combinación para reducir tamaños y peticiones de descarga, 3) Optimizar imágenes mediante compresión para reducir su tamaño sin pérdida de calidad, y 4) Usar un CDN para servir contenido estático

2. PUNTOS CLAVE PARA TENER
UN WORDPRESS RÁPIDO
Álvaro Fontela Sánchez
Raiola Networks
OPTIMIZACIÓN DE WORDPRESS

3. ¿Quién soy y qué hago?
Mi nombre es Alvaro Fontela
Soy consultor Wordpress especializado en
seguridad y rendimiento.
También soy uno de los co-fundadores de
Raiola Networks.

4. Wordpress…
¿Qué es Wordpress?

5. ¿Qué es Wordpress?
• Wordpress es el CMS más usado del mercado
actualmente, tanto para crear webs, blogs o
tiendas online.
• La gran cuota de mercado de Wordpress hace
que tenga una comunidad muy grande y
bastante participativa.
• Wordpress está desarrollado en PHP y está
preparado para ampliar sus funcionalidades
con plugins y themes.

6. Wordpress y su rendimiento
• Wordpress está desarrollado en PHP, ese
código PHP hay que procesarlo, y consume
recursos del servidor.
• Para que una web creada con Wordpress
cargue rápido, el PHP debe procesarse rápido
o no procesarse.
• También tenemos que intentar que se realice
el menor número de peticiones posibles y de
la forma más optimizada posible.

7. • Plugin o sistema de cache.1
• Optimizar el HTML, JS y CSS.2
• Optimización de las imágenes.3
• Implementación de un CDN.4
Puntos clave para optimizar Wordpress

8. • Plugin o sistema de cache.1
• Existen múltiples plugins de cache para Wordpress,
además existen sistemas de cache a nivel servidor.
• Un sistema de cache guarda una copia procesada de
la web para servirla sin tener que ejecutar todo el
código.
• Con un plugin o sistema de cache ahorramos
recursos de proceso del servidor, pero también
mejoramos los tiempos de carga.
• Algunos de los plugins de cache más conocidos y
recomendados son W3 Total Cache o WP Rocket.

9. • Plugin o sistema de cache.1
En el siguiente ejemplo podemos ver la mejora de
velocidad de carga simplemente implementando WP
Rocket con un OPCache a nivel servidor:
ANTES
DESPUES

10. • Optimizar el HTML, JS y CSS.2
• Optimizar el HTML, JS y CSS consiste en reducir el
tamaño de los archivos y combinarlos para reducir
las peticiones necesarias para cargar la web.
• Minificar es el proceso de limpiar los archivos
HTML, JS y CSS para hacer que pesen menos.
• Combinar es el proceso de unir varios archivos
HTML, JS y CSS del mismo tipo en 1 archivo.
• Minificar y combinar es un proceso complejo y con
algunos themes para Wordpress da problemas.

11. • Optimizar el HTML, JS y CSS.2
• Existen múltiples plugins para minificar y combinar
código HTML, CSS y JS en Wordpress.
• Autoptimize es una excelente opción para cubrir
estas necesidades, pero otros plugins de cache
como W3 Total Cache o WP Rocket también
incluyen este tipo de funcionalidades.
• En algunos casos, realizar este proceso puede dar
problemas, debemos revisar que todo está correcto
al realizarlo, normalmente en los themes complejos
no se puede minificar ni combinar el CSS ni el JS.

12. • Optimización de imágenes.3
• Cuanto más pequeño sea el tamaño de las
imágenes, menos pesará la página en conjunto y
más rápido cargará.
• Las imágenes se pueden optimizar bastante sin
llegar a perder calidad.
• Para Wordpress existen plugins como EWWW Image
Optimizer o WP Smush que permiten optimizar las
imágenes desde el back-end o al subirlas.
• Existen plugins de optimización más potentes como
Imagify, TinyPNG o Kraken.io, que permiten obtener
imágenes mucho más optimizadas, pero son
soluciones Premium.

13. • Optimización de imágenes.3
En el siguiente ejemplo puedes ver la diferencia entre
el antes y el después de optimizar las imágenes de una
web.
En este caso la optimización se realizó con EWWW
Image Optimizer y con Imagify.
ANTES DESPUÉS

14. • Sistemas de CDN4
• Un CDN es un sistema de distribución de contenidos
que se encarga de servir archivos estáticos
(imágenes, vídeos, documentos) de una web desde
servidores ubicados en una zona geográfica cercana
al visitante.
• Un CDN es la solución perfecta para mejorar la
velocidad de carga de una web en TODO EL
MUNDO.
• Existen cientos de servicios CDN, algunos de pago y
algunos gratuitos, evidentemente los mejores son
los de pago: a destacar Amazon CloudFront y
CloudFlare

15. • Sistemas de CDN4
Este es un ejemplo de una web con el CDN de CloudFlare.
El servidor se encontraba en Madrid y el test de carga se
hizo desde California, con y sin CDN:
Además los servicios CDN por proxy inverso como
CloudFlare, hacen optimizaciones para reducir el número
de peticiones y reducir el peso de la web.

16. ¿Qué hemos conseguido?

17. Resumen y conclusiones
Siguiendo 4 puntos básicos, hemos conseguido
reducir drásticamente el tiempo de carga y el
consumo de recursos de una web:
Antes Después