Presentación utilizada en una ponencia en el DMD Malaga 2016 (digitalmarketingday.es) por Alvaro Fontela de Raiola Networks. Se describen 8 puntos clave para optimizar Wordpress y conseguir mejorar la velocidad de carga general del sitio web. Puedes encontrar mas información sobre como optimizar Wordpress en la siguiente dirección URL: https://raiolanetworks.es/blog/ Presentación completada con el articulo sobre optimización de Wordpress publicado en este articulo en el blog Marketing and Web: http://www.marketingandweb.es/marketing/mejorar-la-velocidad-de-carga-en-wordpress/

1. PUNTOS CLAVE PARA OPTIMIZAR WORDPRESS
ALVARO FONTELA
CONSULTOR WORDPRESS Y COFUNDADOR DE RAIOLA NETWORKS

2. WORDPRESS, ¿QUÉ ES ESO?
Wordpress es algo mas que una herramienta para crear blogs,
eso lo demuestran sus cifras:
 El 26,4% de Internet funciona con Wordpress.
 El 59,5% de las webs creadas con un CMS usan Wordpress.
 Existen mas de 45.000 plugins para Wordpress.
 Cada día se crean mas de 50.000 sitios con Wordpress.

3. ENTONCES, ¿WORDPRESS ES EL MEJOR?
1. La principal ventaja de Wordpress, es su comunidad, que
desarrolla plugins y themes para el CMS.
2. Los plugins y themes convierten a Wordpress en una
herramienta flexible y muy extensible.
3. Pero los plugins y themes complejos, además de añadir
funcionalidades, también suelen ralentizar la instalación.

4. 1 SISTEMA DE CDN
MINIFICAR Y COMBINAR3 REDUCIR LAS PETICIONES
REDUCIR EL PESO DE LA WEB5 AUDITORIA DE PLUGINS
2
4
6
SISTEMA DE CACHE
SOFTWARE DEL SERVIDOR7 PETICIONES EXTERNAS8
¿CÓMO PODEMOS ACELERAR WORDPRESS?

5. 1 - SISTEMAS DE CACHE PARA WORDPRESS (1 DE 3)
 Un sistema de cache guarda una copia procesada de la web o de
algunos datos para servirla mas rápidamente.
 Existen distintos tipos de cache que podemos usar en Wordpress:
cache de pagina, cache de consultas a la DB, cache de objetos, etc…
 El tipo de cache mas común usado es el cache de pagina, es el mas
simple y efectivo a la hora de bajar tiempos de carga.
 El cache también se puede guardar en varios tipos de localizaciones,
lo mas común es en disco, pero con sistemas como Memcached o
APCu se puede guardar en RAM.

6. 1 - SISTEMAS DE CACHE PARA WORDPRESS (2 DE 3)
La diferencia entre usar un cache de pagina o no usarlo es la siguiente:
ANTES DESPUES
En este caso el plugin usado es WP Rocket con cache de pagina en disco sobre
SSD.

7. 1 - SISTEMAS DE CACHE PARA WORDPRESS (3 DE 3)
Existen multiples plugins de cache para Wordpress, en Raiola
Networks trabajamos y recomendamos los siguientes:
 W3 Total Cache: Ideal para webs grandes sobre
infraestructuras complejas y mucho trafico.
 WP Rocket: Plugin Premium rápido, completo y fácil de
configurar.
 WP Fastest Cache: Gratuito, simple, efectivo y muy fácil de
configurar.

8. 2 - SISTEMAS DE CDN (1 DE 4)
 Un sistema de CDN sirve el contenido estático (imágenes,
javascript, css, etc…) desde un servidor mas cercano a la
ubicación geográfica del visitante.
 Si tienes una web con un publico tanto Español como
Latinoamericano, necesitas un CDN.
 Un CDN permite paralelizar la carga de forma mas efectiva,
ayudando a mejorar los tiempos de carga.

9. 2 - SISTEMAS DE CDN (2 DE 4)
EJEMPLO DE PUNTOS DE PRESENCIA DE CLOUDFLARE CDN

10. 2 - SISTEMAS DE CDN (3 DE 4)
Normalmente el uso de un CDN se nota cuando el visitante esta lejos
del servidor o hosting que aloja la web, como en el siguiente ejemplo:
En este caso, el servidor se encontraba en Madrid y el visitante en
Australia.

11. 2 - SISTEMAS DE CDN (4 DE 4)
 Existen muchos servicios de CDN en Internet, cada uno con sus
propias características y funcionalidades.
 No todos los CDN tienen el mismo alcance, algunos tienen mas
POPs en America del Norte y otros tienen mas POPs en Europa.
 CloudFlare es una excelente opción como CDN gratuito, pero tiene
limites y su estabilidad no esta garantizada.
 Amazon CloudFront, KeyCDN y CDN77 son servicios CDN con
bastantes POPs en zonas de habla hispana y con buena estabilidad de
latencias.

12. 3 – MINIFICAR, COMBINAR Y COMPRIMIR(1 DE 3)
 MINIFICAR: Eliminar los espacios en blanco, los saltos de línea
y los comentarios de un archivo CSS, JS o HTML para conseguir
que los archivos sean mas pequeños.
 COMBINAR: Unir varios archivos CSS y JS en uno o varios para
conseguir reducir las peticiones realizadas al servidor.
 COMPRIMIR: El servidor utiliza GZIP para comprimir todos los
archivos base texto (JS, CSS y HTML) enviados al visitante, con
esto se reduce el peso pero apenas se ahorra transferencia en
webs con pocas visitas.

13. 3 – MINIFICAR, COMBINAR Y COMPRIMIR(2 DE 3)
 No siempre es posible minificar y combinar el CSS y el JS.
 En los themes actuales es muy posible encontrar errores al
minificar y combinar el CSS y el JS.
 La capacidad de combinar y minificar el JS y el CSS influye
directamente en la puntuación de Google PageSpeed.
 En la tarea de minificar y combinar, siempre podemos dejar
de lado las herramientas automatizadas y contratar un
programador para hacerlo.

14. 3 – MINIFICAR, COMBINAR Y COMPRIMIR(3 DE 3)
Para Wordpress existen múltiples plugins que nos permiten
minificar y combinar:
• Autoptimize nos permite combinar y minificar el HTML, el CSS y
el JS.
• WP Rocket y W3 Total Cache son plugins de cache que también
incluyen herramientas para combinar y minificar el HTML, el
CSS y el JS.

15. 4 – REDUCIR LAS PETICIONES (1 DE 1)
Cada petición realizada conlleva un proceso, si reducimos las
peticiones reduciremos el tiempo de carga.
 Podemos reducir las peticiones combinando archivos JS y CSS
tal como hemos dicho el anterior punto.
 También podemos reducir peticiones usando sprites con CSS
unificando varias imágenes en un mismo archivo.
 Evidentemente también podemos eliminar elementos de la
web que no necesitemos para reducir las peticiones.

16. 5 – REDUCIR EL PESO DE LA WEB (1 DE 3)
Si reducimos el peso de la web, también conseguiremos reducir el
tiempo que tarda en descargarse la web al navegador del visitante.
 Podemos optimizar las imágenes para reducir el peso general de la
web.
 Podemos minificar y combinar el HTML, JS y CSS tal y como hemos
comentado en un punto anterior.
En este punto vamos a centrarnos en la optimización de imágenes.

17. 5 – REDUCIR EL PESO DE LA WEB (2 DE 3)
La diferencia tras una optimización de imágenes con EWWW Image
Optimizer en Wordpress es notable:
ANTES DESPUES
 De 5 MB a 1,9 MB solo optimizando imágenes.
 La optimización de imágenes en este caso es sin perdida de
calidad.

18. 5 – REDUCIR EL PESO DE LA WEB (3 DE 3)
Existen muchos sistemas para optimizar imágenes, tanto en
formato plugin como herramienta externa, estas son algunas
alternativas en formato plugin:
 EWWW Image Optimizer es una excelente opción gratuita.
 TinyPNG, Kraken.io o Imagify son excelentes opciones de
pago por uso.

19. 6 – AUDITORIA DE PLUGINS (1 DE 3)
 Los plugins son el componente de un sitio Wordpress que
mas suele consumir recursos.
 Cuanto mas complejo sea un plugin en cuanto a
funcionalidades, mas recursos consume del servidor y mas
ralentiza la carga.
 Mediante el uso de versiones concretas de PHP o de un
OPCache se puede reducir en parte el impacto que produce la
ejecucion de PHP de los plugins.

20. 6 – AUDITORIA DE PLUGINS (2 DE 3)
Entre los plugins para Wordpress que mas consumen se
encuentran los siguientes:
• WooCommerce.
• Broken Link Checker.
• YARPP (y casi cualquier plugin de relacionados).
• Jetpack for Wordpress (algunos módulos consumen mucho).

21. 6 – AUDITORIA DE PLUGINS (3 DE 3)
Podemos hacer una auditoria de plugins con algunas
herramientas en formato plugin:
 P3 Profiler es una buena alternativa si se sabe interpretar sus
datos entre líneas sin hacerle caso a toda la información
mostrada.
 WPTOP en combinación con la extensión de PHP XHPROF
ayuda a hacer una auditoria de las funciones PHP ejecutadas.
El descarte y el instinto juegan un gran papel en la auditoria de
plugins y en la resolución de problemas en Wordpress.

22. 7 – SOFTWARE DEL SERVIDOR (1 DE 3)
 El servidor o hosting juega un gran papel en la velocidad de un sitio
web.
 No solo es importante el proveedor, sino que lo mas importante es
la configuración del servidor.
 Un servidor con Nginx siempre servirá mas rápido las peticiones
que un servidor Apache, pero se eliminan algunas compatibilidades y
facilidades, como por ejemplo la compatibilidad con el .htaccess.
 Una web en un servidor con el nuevo PHP7.0 siempre cargara mas
rápido que una web que se ejecute con PHP5.4, pero la
compatibilidad de PHP7.0 es reducida y algunos plugins dejaran de
funcionar o darán errores.

23. 7 – SOFTWARE DEL SERVIDOR (2 DE 3)
Como hemos dicho, los componentes de software del servidor juegan
un papel importante en la carga de una web:
Nginx vs Apache Benchmark de OPCache

24. 7 – SOFTWARE DEL SERVIDOR (3 DE 3)
En las siguientes imágenes podemos ver el mismo benchmark,
en el mismo plan de hosting, con PHP7.0 y PHP 5.4:
PHP 5.4 – 7,89 segundos PHP7.0 – 2,85 segundos

25. 8 – PETICIONES EXTERNAS (1 DE 2)
Las peticiones externas pueden ralentizar bastante la carga de una
web.
Esto es un ejemplo del tiempo que tarda una petición al API de
Facebook generada por el cuadro de Facebook colocado en el sidebar.

26. 8 – PETICIONES EXTERNAS (2 DE 2)
Con las peticiones externas que ralentizan la web normalmente no
podemos hacer nada, solo podemos sacar esto sacando los elementos.
Algunos casos de servicios que suelen generar ralentizaciones son:
 Facebook: cuadro de Me gusta de Facebook.
 Google Plus: Cuadro de Google Plus.
 Google Adsense: Los anuncios de Google Adsense.
Debemos tener cuidado con los elementos con carga externa que
insertamos en nuestra web, ya que pueden hacer que el tiempo de
carga se dispare.

27. Puedes encontrar mas información sobre como optimizar Wordpress
en nuestro blog: https://raiolanetworks.es/blog/
También puedes encontrarnos en las principales redes sociales:
 Facebook: https://www.facebook.com/RaiolaNetworks
 Twitter: https://twitter.com/RaiolaNetworks
 Google Plus: https://plus.google.com/+RaiolaNetworksSLLugo/
 Correo electrónico: info@raiolanetworks.es