Este documento habla sobre la optimización del rendimiento y la velocidad en WordPress. Explica que el WPO (Web Performance Optimization) es el proceso de optimizar sitios web para reducir el tiempo de carga mediante mejoras en el frontend, backend, base de datos, servidores y peticiones. También destaca la importancia de que un sitio web cargue rápido para mejorar la experiencia del usuario y aumentar el tiempo en la página, las conversiones y disminuir el porcentaje de rebote. Finalmente, proporciona recomendaciones para optimizar Word

1. Rendimiento y velocidad,
acelera tu WordPress
dreguera@mondragon.edu Ÿ Dani Reguera Bakhache Ÿ @dreguera

2. Cuanto
mas
rápido
vaya
un
si2o
web
2
mejor

3. ¿Qué
es
el
WPO?
• Labores que hacemos para que nuestro sitio web sea mas
rápido
• Esas labores pueden ser en diferentes ámbitos: Plataforma,
base de datos, maquetaciones, servidores, peticiones…
• Podemos Debemos hacer WPO en:
– Frontend
– Backend
• En definitiva, WPO o Web Performance Optimization es el
proceso de optimización de sitios web tanto a nivel usuario
como a nivel servidor para reducir el tiempo de carga del
mismo.

4. ¿Por
qué
es
tan
importante
que
un
si2o
web
carge
rápido?
• Cuanto más rápida vaya una web, el usuario estará más
tiempo en la página
• Cuanto más rápida vaya una web, habrá menos
porcentaje de rebote
• Cuanto más rapida vaya una web, habrá más
conversiones
• Cuanto más rápida vaya una web, mejoraremos la
experiencia de usuario
• Cuanto más rápida vaya una web, tendremos menos
coste de infraestructura.

5. ¿Y qué pasa con las versiones para
dispositivos móviles?

6. Versiones para dispositivos móviles
• Optimizar al máximo el tiempo de carga.
• Optimizar al máximo el peso de la página
• La mayoría de usuarios navega mediante datos (3G,
4G), por lo que no podemos “obligarles” a usar
demasiados datos.
• Optimizar la plantilla al máximo (Responsive optimizado)

7. Navigation timing – w3c
http://www.w3.org/TR/navigation-timing/

8. ¿Qué herramientas disponemos?

9. 19

10. GtMetrix
• Herramienta web gratuita que nos analiza en
función de Google y Yahoo y nos evalua en
función de la velocidad.
• Nos aporta un listado de aspectos a mejorar
tanto en la web como en el servidor para
mejorar estas valoraciones.
• http://gtmetrix.com
20

12. Pingdom Tools
• Herramienta gratuita y muy potente que nos
permite saber los tiempos de carga, el tamaño
de las páginas
• Nos permite testear desde múltiples
localizaciones
• Compartir los resultados
• Guardar históricos para saber las mejoras que
hemos ido haciendo
• http://tools.pingdom.com/fpt/

14. ¿Qué imagen tiene Google de la velocidad
de nuestro site?

15. Estadísticas de rastreo

16. Estadísticas de rastreo con
WebMasterTools
• Lo que nos dice es el tiempo en milisegundos,
que tarda GoogleBot en entrar en nuestra
página, indexarla y salir. No son datos de
usuarios
• Un tiempo normal sería entre 250 y 500
milisegundos
• Un tiempo óptimo sería entre 150 y 250
• A partir de 1seg (1000mseg) ya sería un tiempo
malo y deberíamos tomar medidas

17. Tiempos de carga en Google
Analytics

18. Tiempos de carga en Google
Analytics

19. Tiempos de carga en Google
Analytics
• Son datos sacados el 1% de nuestras visitas.
• Si quisieramos que nos sacara de todos:
• Importancia de analizar bien los datos:
– Por país
– Por navegador
– Porcentaje de rebote
– Tiempo de estancia en página
• https://www.youtube.com/watch?v=vWMAsIHbB5g

21. ¿Qué tenemos que tener en
cuenta con WordPress?
• Instalación
de
WordPress
• Configuración
de
WordPress
• Plan2lla
• Los
plugins
(plugini's)

22. Instalación de WordPress
• Lo
primero
el
Hos2ng,
¿Qué
2po
necesitamos?
– Hos2ng
compar2do
– Dedicado
• Hay
que
ser
realistas
con
el
número
de
visitas
que
tenemos,
tráfico
y
lo
más
importante…
¿Cuantas
visitas
esperamos
tener?

23. Si quieres que te recomiende
uno…

24. Nuestra base de datos
• Pensemos qué base de datos necesitamos…
“No sólo de MySQL vive WordPress”
• Si nos decantamos por MySQL optimicemos al
máximo. (WP Optimize plugin)
• ¿MariaDB?
– Para cargas mas complejas su optimizador trabaja mejor
– El acceso mediante views aligera el proceso de carga
– https://mariadb.com/blog/how-install-and-run-wordpress-mariadb
– http://es.wikipedia.org/wiki/MariaDB

25. Nuestro servidor Web
• Si
nos
decantamos
por
Apache
(como
la
mayoría
de
mortales)
intentemos
op2mizar
al
máximo:
– hWps://www.digitalocean.com/community/tutorials/
how-­‐to-­‐op2mize-­‐apache-­‐web-­‐server-­‐performance
– Redirecciones:
del
.htaccess
al
hWpd.conf
• Montando
WordPress
sobre
nginx,
“No
sólo
de
Apache
vive
WordPress”
– hWp://mukom.mondragon.edu/socialmedia/como-­‐
instalar-­‐wordpress-­‐usando-­‐nginx-­‐como-­‐servidor-­‐web/

26. Optimizando caché de PHP con
OPCache
• OPcache mejora el rendimiento de PHP
almacenando el código de bytes de un script
precompilado en la memoria compartida,
eliminando así la necesidad de PHP de cargar y
analizar los script en cada petición.
• Esta extensión está incluída en PHP 5.5.0 y
posteriores, y está » disponible en PECL para
las versiones de PHP 5.2, 5.3 y 5.4.

27. Optimizando caché de PHP con
OPCache
• $ sudo gedit /etc/php5/fpm/php.ini
– ;opcache.enable=0 à opcache.enable=1
– ;opcache.memory_consumption=64 à
opcache.memory_consumption=128
– ;opcache.max_accelerated_files=2000 à
opcache.max_accelerated_files=4000
– ;opcache.revalidate_freq=2 à
opcache.revalidate_freq=60
• $ sudo service php5-fpm restart

28. Instalación óptima de WordPress
• Instalar
la
ul2ma
versión
siempre
– $
wget
hWp://wordpress.org/latest.tar.gz
• Permisos:
– Carpetas
(wp-­‐content,
wp-­‐admin,
wp-­‐includes)
con
permisos
755
(rwx
r-­‐x
r-­‐x)
– Ficheros
con
permsiso
644
(rw-­‐
r–
r–)

29. Instalación perfecta de WordPress
• Optimizando el wp-config.php
– Activar la caché de WordPress:
• define('WP_CACHE', true);
– Incrementar el autoguardado, por defecto es a 60
segundos:
• define('AUTOSAVE_INTERVAL',160);
– Quitar las revisiones (limpieza en bbdd):
• define('WP_POST_REVISIONS', false);

30. Instalación óptima de WordPress

31. Instalación óptima de WordPress
• Habilitar
la
compresión
gzip
|
deflate
para
nuestro
WordPress:
– Comprimir
al
máximo
los
contenidos:
• U2lizar
compresión
gzip/deflate.
– Lo
que
hacemos
con
este
modo
es
comprimir
los
contenidos,
enviarlos
y
descromprimirlos
al
ser
recibidos.
– De
esta
manera
ahorramos
2empo
de
transferencia.
– Si
ac2vamos
deflate
en
nuestro
servidor
web,
todos
los
ficheros
par2rán
con
la
compresión
ac2vada.

32. Instalación óptima de WordPress
• $
sudo
a2enmod
deflate;
• $
sudo
gedit
/wp-­‐admin/op#ons.php;
– Gzipcompression
=
1

33. Instalación óptima de WordPress
• Sacando partido a WP_Query
– WP_Query es una clase, una de las más importantes
del núcleo de WordPress. Se encarga de determinar
la consulta necesaria a la base de datos de acuerdo a
la información que se está solicitando y, además,
guarda este tipo de consultas frecuentes para
optimizar la carga de la página.
• Op2mizando
con
WP_Query:
– hWp://dariobf.com/wp_query-­‐wordpress/

34. Loop normal de WordPress
hWp://dariobf.com/wp_query-­‐wordpress/

35. Loop modificado de WordPress
hWp://dariobf.com/wp_query-­‐wordpress/

36. ¿Qué es la pluginitis?
• La dependencia extrema que tenemos de los
plugins
• Los plugins nos relentizan muchísimo nuestro
WordPress puesto que modifican la
funcionalidad. (Hooks, código php, css, etc..)
• Site-Builders vs Programadores
• “Yo tengo un plugin…” “Conozco un plugin…”
“He oído hablar de un plugin que te…” “Pues
con WordPress mi sobrino te lo hace gratis”

37. Para empezar…

38. Para empezar…

39. Analizar los plugins
• ¿Qué
plugin
me
relen2za?
– Por
mal
funcionamiento
– Porque
me
sobreescribe
código
– Porque
me
relen2za
la
base
de
datos
– Porque
me
añade
“basura”
a
mi
código
• Op2micemos
esos
plugins
– SEO
Yoast
vs
Add
Meta
Data
– WP
Touch
– Mul2lingüismo:
mqTranslate
vs
WMPL/Polylang

40. ¿Qué plugins “deberíamos” instalar?
• Tratamiento
de
imágenes

41. ¿Qué plugins “deberíamos” instalar?
• Asincronía
de
carga

42. ¿Qué plugins “deberíamos” instalar?
• Caché:
WP
Super
Caché,
WP
Total
Caché

43. W3 Total cache

44. Page Caché
De esta manera sirvo a mis visitantes páginas estáticas del contenido dinámico,
por lo que la carga de servidor es menor.
Con esto consigo que WP no cree la página en cuanto es solicitada y al usuario le
muestro la página que he guardado en memoria

45. Minificado de css y js

46. Database caché
Con esta opción lo que consigo es cachear las querys a la
base de datos cada vez que hago una petición y así no pedir
cada vez.

47. Object cache
Con
esta
opción
lo
que
consigo
es
cachear
los
objetos
de
MySQL.
Esto
no
siempre
baja
el
2empo
de
carga.

48. Browser caché
Defino de esta manera la caché del navegador para decirle
cuanto tiempo tiempo deben usar ese contenido.

49. Reverse proxy
Vamos a introducir aquí nuestra configuración de Varnish para que funcione
correctamente

50. Resultados – contenido cacheado

51. WP Otimizer

52. Eliminar las transacciones muertas de
la base de datos

53. Eliminar las transacciones muertas de
la base de datos

54. ¿Algo más? Apunta…
• U2liza
HTTP
1.1
• U2liza
CSS-­‐Sprites
• JetPack
y
su
Photon
para
el
tema
de
distribuir
imágenes
• Configurar
mod_expires
• Cookies
pocas
y
muy
pequeñas
• Domain
sharing,
paralelización
(6
pe2ciones)
• CSS
en
el
<header>,
para
el
DOM
• Como
mucho
dos
archivos
CSS
• Ges2onar
las
DNS
(root53)
• Evita
redirecciones
por
html
o
javascript
• Fuentes
en
vez
de
imágenes
• Especifica
heigth
y
width
en
el
HTML
• Ul2mos
posts?
Ojo
cargar
todo…
• …

55. Punto de partida

56. Punto de partida

57. Punto de llegada

58. Punto de llegada

59. El mejor WPO es
hacer las cosas bien

60. Con MUCHO sentido
común, que es el
menos común de los
sentidos…

61. Créditos
• Iñaki Arenaza www.slideshare.net/iareneza
• Increased frecuency by Enrie http://ernie-e.deviantart.com/art/increased-frequency-132219750
• Móvil: http://commons.wikimedia.org/wiki/File:Personal_Health_Apps_for_Smartphones.jpg
• Fast train moving: http://commons.wikimedia.org/wiki/File:Fast_Moving_Train_India.jpg
• WPO por Javier Casares: https://dl.dropboxusercontent.com/u/19964073/Guia-WPO.pdf
• WordPress Performance http://codex.wordpress.org/WordPress_Optimization
• Blog de Darío Balbotín http://www.dariobf.com

62. Eskerrik asko!
Dani
Reguera
Mondragon
Unibertsitatea
dreguera@mondragon.edu
h8ps://twi8er.com/dreguera
h8ps://linkedin.com/in/danireguera