Ponencia sobre optimizacion de Wordpress para la ponencia del Netlab.online Lugo 2016.

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

2. ¿Quién soy y que 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.

3. Wordpress…
¿Qué es Wordpress?

4. ¿Qué es Wordpress?
• Wordpress es el CMS mas 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 esta desarrollado en PHP y esta
preparado para ampliar sus funcionalidades
con plugins y themes.

5. Wordpress y su rendimiento
• Wordpress esta 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 numero de peticiones posibles y de
la forma mas optimizada posible.

6. • 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

7. • 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 mas conocidos y
recomendados son W3 Total Cache o WP Rocket.

8. • 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

9. • 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.

10. • 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 esta correcto
al realizarlo, normalmente en los themes complejos
no se puede minificar ni combinar el CSS ni el JS.

11. • Optimización de imágenes.3
• Cuanto mas pequeño sea el tamaño de las
imágenes, menos pesara la pagina en conjunto y
mas rápido cargara.
• 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 mas potentes como
Imagify, TinyPNG o Kraken.io, que permiten obtener
imágenes mucho mas optimizadas, pero son
soluciones Premium.

12. • 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 realizo con EWWW
Image Optimizer y con Imagify.
ANTES DESPUES

13. • Sistemas de CDN4
• Un CDN es un sistema de distribución de contenidos
que se encarga de servir archivos estáticos
(imágenes, videos, 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

14. • 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 numero
de peticiones y reducir el peso de la web.

15. ¿Qué hemos conseguido?

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