Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rendimiento y velocidad en WordPress

1,518 views

Published on

Charla para la Librecon 2014 sobre rendimiento y aceleración web en WordPress. Web Performance Optimization WPO. En estas diapos podemos encontrar cómo mejorar e incrementar la velocidad de nuestro sitio web desarrollado en WordPress

Published in: Internet
  • Be the first to comment

Rendimiento y velocidad en WordPress

  1. 1. Rendimiento y velocidad, acelera tu WordPress dreguera@mondragon.edu Ÿ Dani Reguera Bakhache Ÿ @dreguera
  2. 2. Cuanto mas rápido vaya un si2o web 2 mejor
  3. 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. 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. 5. ¿Y qué pasa con las versiones para dispositivos móviles?
  6. 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. 7. Navigation timing – w3c http://www.w3.org/TR/navigation-timing/
  8. 8. ¿Qué herramientas disponemos?
  9. 9. 19
  10. 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
  11. 11. 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/
  12. 12. ¿Qué imagen tiene Google de la velocidad de nuestro site?
  13. 13. Estadísticas de rastreo
  14. 14. 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
  15. 15. Tiempos de carga en Google Analytics
  16. 16. Tiempos de carga en Google Analytics
  17. 17. 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
  18. 18. ¿Qué tenemos que tener en cuenta con WordPress? • Instalación de WordPress • Configuración de WordPress • Plan2lla • Los plugins (plugini's)
  19. 19. 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?
  20. 20. Si quieres que te recomiende uno…
  21. 21. 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
  22. 22. 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/
  23. 23. 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.
  24. 24. 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
  25. 25. 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–)
  26. 26. 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);
  27. 27. Instalación óptima de WordPress
  28. 28. 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.
  29. 29. Instalación óptima de WordPress • $ sudo a2enmod deflate; • $ sudo gedit /wp-­‐admin/op#ons.php; – Gzipcompression = 1
  30. 30. 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/
  31. 31. Loop normal de WordPress hWp://dariobf.com/wp_query-­‐wordpress/
  32. 32. Loop modificado de WordPress hWp://dariobf.com/wp_query-­‐wordpress/
  33. 33. ¿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”
  34. 34. Para empezar…
  35. 35. Para empezar…
  36. 36. 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
  37. 37. ¿Qué plugins “deberíamos” instalar? • Tratamiento de imágenes
  38. 38. ¿Qué plugins “deberíamos” instalar? • Asincronía de carga
  39. 39. ¿Qué plugins “deberíamos” instalar? • Caché: WP Super Caché, WP Total Caché
  40. 40. W3 Total cache
  41. 41. 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
  42. 42. Minificado de css y js
  43. 43. 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.
  44. 44. Object cache Con esta opción lo que consigo es cachear los objetos de MySQL. Esto no siempre baja el 2empo de carga.
  45. 45. Browser caché Defino de esta manera la caché del navegador para decirle cuanto tiempo tiempo deben usar ese contenido.
  46. 46. Reverse proxy Vamos a introducir aquí nuestra configuración de Varnish para que funcione correctamente
  47. 47. Resultados – contenido cacheado
  48. 48. WP Otimizer
  49. 49. Eliminar las transacciones muertas de la base de datos
  50. 50. Eliminar las transacciones muertas de la base de datos
  51. 51. ¿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… • …
  52. 52. Punto de partida
  53. 53. Punto de partida
  54. 54. Punto de llegada
  55. 55. Punto de llegada
  56. 56. El mejor WPO es hacer las cosas bien
  57. 57. Con MUCHO sentido común, que es el menos común de los sentidos…
  58. 58. 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
  59. 59. Eskerrik asko! Dani Reguera Mondragon Unibertsitatea dreguera@mondragon.edu h8ps://twi8er.com/dreguera h8ps://linkedin.com/in/danireguera

×