Rendimiento y velocidad, acelera tu WordPress

dreguera@mondragon.edu � Dani Reguera Bakhache � @dreguera

 

2  

Cuanto  mas  rápido  vaya  un  si2o  web  mejor    

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

¿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  

Para Amazon, 0.1 segundos de retraso implican una pérdida del 1% de los ingresos

6  

Según AOL.com, los sitios web que funcionan rápido tienen 7-8 pag. vistas por

usuario mientras que las lentas 3-4 pag. vistas.

7  

Para Bing, un segundo de retraso implica una caída del 2,8% de los ingresos, 2 segundos de

retraso implica una bajada del 4,3% de los ingresos por usuario

8  

Para Google, 0,4 segundos de retraso causan una caída del 0,59% de las

búsquedas por usuario

9  

Para Facebook, 0.5 segundos más lento provoca una caída de tráfico del 3%, 1

segundo provoca una caída del 6%

10  

Google Maps, redujo un 30% del tamaño de sus ficheros y el número de peticiones

aumentó un 30%

11  

Para Outlook.com, 6 segundos de retraso, implica 40 millones de anuncios menos al mes, lo que supone 6.000.000$ menos al

año

12  

Netflix, activó el sistema gzip en sus servidores consiguiendo un aumento de entre el 13% y 25% de velocidad de carga y reducción de un 50% del

volumen de tráfico

13  

Para Yahoo!, 0.4 segundos de retraso causan una caída entre el 5% y el 9% del

tráfico

Por  lo  general  hablamos  de…  •  El 47% de los usuarios esperan que una página cargue

en menos de 2 segundos. •  El 14% cambia de tienda online si la página tarda en

cargar. •  El 40% de los usuarios abandona una página que tarda

más de 3 segundos en cargar. •  El 64% de los compradores que no están satisfechos

cambia de sitio para su próxima compra. •  El 52% de los compradores afirman que un sitio que

carga rápido los fideliza.

14  

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

Navigation timing – w3c

http://www.w3.org/TR/navigation-timing/

¿Qué herramientas disponemos?

18  

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

19  

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/

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

Estadísticas de rastreo

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

Tiempos de carga en Google Analytics

Tiempos de carga en Google Analytics

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  

¿Qué tenemos que tener en cuenta con WordPress?

 •  Instalación  de  WordPress  •  Configuración  de  WordPress  •  Plan2lla  •  Los  plugins  (plugini's)    

Instalación de WordPress

•  Lo  primero  el  Hos2ng,  ¿Qué  necesitamos?  – Uno  de  “men2ra”    – 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?  

Si quieres que te recomiende uno…

•  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

Nuestra base de datos

Nuestro servidor Web

•  Si  nos  decantamos  por  Apache  (como  la  mayoría  de  mortales)  intentemos  op2mizar  al  máximo:  –  h`ps://www.digitalocean.com/community/tutorials/how-­‐to-­‐op2mize-­‐apache-­‐web-­‐server-­‐performance  

–  Redirecciones:  del  .htaccess  al  h`pd.conf  •  Montando  WordPress  sobre  nginx,  “No  sólo  de  Apache  vive  WordPress”  –  h`p://mukom.mondragon.edu/socialmedia/como-­‐instalar-­‐wordpress-­‐usando-­‐nginx-­‐como-­‐servidor-­‐web/  

 

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.

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

Instalación óptima de WordPress

•  Instalar  la  ul2ma  versión  siempre  – $  wget  h`p://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–)  

Instalación perfecta de WordPress

•  Optimizando el wp-config.php –  Activar la caché de WordPress:

•  define('WP_CACHE', true); //El triple de rápido –  Incrementar el autoguardado, por defecto es a 60

segundos: •  define('AUTOSAVE_INTERVAL',160);

–  Quitar las revisiones (limpieza en bbdd): •  define('WP_POST_REVISIONS', false);

Instalación óptima de WordPress

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.  

•  $  sudo  a2enmod  deflate;          •  $  sudo  gedit  /wp-­‐admin/op#ons.php;  

– Gzipcompression  =  1  

Instalación óptima de WordPress

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:  –  h`p://dariobf.com/wp_query-­‐wordpress/  

Loop normal de WordPress

Loop modificado de WordPress

¿Qué es la pluginitis?

•  La dependencia extrema que tenemos de los plugins

•  Los plugins nos relentizan al máximo nuestro WordPress puesto que modifican la funcionalidad.

•  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”

Para empezar…

Para empezar…

Analizar los plugins

•  ¿Qué  plugin  me  relen2za?  – Por  mal  funcionamiento  – Porque  me  sobreescribe  código  – Porque  me  relen2za  la  base  de  datos  – Etc…  

•  Op2micemos  esos  plugins  – SEO  Yoast  vs  Add  Meta  Data    – WP  Touch  Demonio  – Mul2lingüismo:  mqTranslate  vs  WMPL/Polylang  

¿Qué plugins “deberíamos” instalar?

•  Tratamiento  de  imágenes  

¿Qué plugins “deberíamos” instalar?

•  Asincronía  de  carga  

¿Qué plugins “deberíamos” instalar?  

•  Caché:  WP  Super  Caché,  WP  Total  Caché  

W3 Total cache

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

Minificado de css y js

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.

Object cache

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

Browser caché

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

Reverse proxy

Vamos a introducir aquí nuestra configuración de Varnish para que funcione correctamente

Resultados – contenido cacheado

WP Otimizer

Eliminar las transacciones muertas de la base de datos

Eliminar las transacciones muertas de la base de datos

¿Algo más? Apunta…

•  U2liza  HTTP  1.1  •  U2liza  CSS-­‐Sprites  •  JetPack  y  su  Photon  para  el  tema  de  distribuir  imágenes  •  HyperDB  para  distribuir  la  Base  de  Datos  •  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)  •  Contrata  hos2ng  de  calidad  •  Evita  redirección,  por  favor.  •  Fuentes  en  vez  de  imágenes  •  Ges2ón  de  las  fonts,  siempre  es  mejor  in  da  jaus  (Google  Fonts?)  •  Especifica  heigth  y  width  en  el  HTML  •  Ul2mos  posts?  Ojo  cargar  todo…  •  …  

Punto de partida

Punto de partida

Punto de llegada  

Punto de llegada

El mejor WPO es hacer las cosas bien

Con MUCHO sentido común, que es el

menos común de los sentidos…

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

Eskerrik asko! Dani  Reguera  

Mondragon  Unibertsitatea  dreguera@mondragon.edu  

h8ps://twi8er.com/dreguera  h8ps://linkedin.com/in/danireguera