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.

Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo

Ponencia Betabeers- Optimización y rendimiento en Wordpress de Marcos Ramajo de frikitek.com

Métricas de rendimiento y optimización web.
Optimización rendimiento Wordpress.
Plugins cache Wordpress

  • Login to see the comments

  • Be the first to like this

Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo

  1. 1. @MarcosRamajo Optimiza el rendimiento de tu Wordpress #bbBIO
  2. 2. @MarcosRamajo ¿Por qué es necesario optimizar? . 47% de los usuarios esperan que la página web cargue en menos de 2 segundos. 40% de los usuarios abandona una página que tarda mas de 2 segundos en cargar. -1% es la perdida de ingresos para Amazon por una décima de segundo.
  3. 3. Buena respuesta (página instantánea, sin retrasos) Objetivos
  4. 4. Servidor debe responder rápido (no esté ocupado) Objetivos
  5. 5. Reducir transferencias de datos (ahorra tiempo y dinero) Objetivos
  6. 6. Conseguir un buen posicionamiento en buscadores Objetivos
  7. 7. Objetivos
  8. 8. @MarcosRamajo WordPress es el demonio Cuidado con el síndrome de Diógenes 858,223,524 DOWNLOADS no ayudan a los tiempos de carga. menor rendimiento 36,333 PLUGINS Las plantillas (con plugins empaquetados) A mayor número de plugins Plugimanía, plugiadicción, plugidependencia, pluginitis.
  9. 9. @MarcosRamajo Herramientas de medición • Boomerang • Pingdom Tools • Google PageSpeed • Yahoo! Yslow • Web Page Test.
  10. 10. @MarcosRamajo Las Métricas 0 1 2 3 4 5 Series 1 Series 2 Series 3 Número de peticiones Tamaño Tiempo de carga First to byte Start Render Repeat view
  11. 11. @MarcosRamajo Pingdom Tools
  12. 12. @MarcosRamajo Google PageSpeed
  13. 13. @MarcosRamajo Web Page Test
  14. 14. Velocidadvisual 1seg 5seg 10seg - Colocar estilos CSS al principio (bajo <head>) - Colocar posibles JS al final (sobre </body>) - Eliminar JS duplicados y combinar si es posible
  15. 15. @MarcosRamajo ¿Dónde vamos a optimizar? Caché (gzip normalmente) Compresión de contenido 03 Compresión de HTML Compresión de CSS Minify Mejorar consultas a la BD Mejoras en cargas de imágenes
  16. 16. @MarcosRamajo Configuración No almacenar historial de entradas define ('WP_POST_REVISIONS', false); Vaciar la papelera define ('EMPTY_TRASH_DAYS', 7); Activar el Gzip de WordPress desde las Opciones... /wp-admin/options.php ...allí busca el parámetro [gzipcompression] y lo pones a “1”. Mod Deflate…
  17. 17. @MarcosRamajo Limpieza BD • WP Optimize • WP DBManager • Optimize DB
  18. 18. @MarcosRamajo Imágenes Plugins Imágenes:  WP Smush.it  Regenerate Thumbnails  EWWW Image Optimizer  CW Image Optimizer  Imsanity  Hammy A Manopla: Subir las imágenes optimizadas
  19. 19. @MarcosRamajo Minify WP Minify WP Minify Fix WP Super Minify Better WordPress Minify
  20. 20. @MarcosRamajo Asincronía Lazy load Infinite Scroll BJ Lazy load
  21. 21. @MarcosRamajo Soluciones All in one W3 Total Cache WP Super Cache WP Rocket Falcon
  22. 22. @MarcosRamajo Truco Agregar Web Page Speed Checker que te envía un mail si la nota de page speed de tu página baja de X valor. --------------------- GT Metrix by Wordpress
  23. 23. @MarcosRamajo Cache • Quick Cache • Hyper Cache • WP Fastest Cache • WP Fast Cache • FLEXICACHE
  24. 24. @MarcosRamajo Servidor Existen diferentes tipos de sistemas de cache específicos para sitios web y servidores web, estos son algunos ejemplos: • Cache de página a nivel servidor: cache de Nginx, cache de Varnish • OPCache para PHP en RAM del servidor: Zend OPCache, eAccelerator, APC, Xcache • Cache de objetos en RAM del servidor: Memcached, APCu, Redis, • Optimización Apache (mod_pagespeed, mod_ruid2)
  25. 25. @MarcosRamajo Resumen Plugins • Cache de página para WordPress: Flexicache, WP SuperCache, QuickCache, WP Fastest Cache, W3 Total Cache. • Cache de objetos para WordPress: EM Object Cache, Cachify, W3 Total Cache. • Cache de bases de datos para WordPress: DB Cache Reloaded Fix, W3 Total Cache. • Cache de widgets para WordPress: WP Widget Cache, W3 Total Cache. • WP-FFPC: integración directa con Nginx
  26. 26. @MarcosRamajo Nivel medio: Utiliza un CDN • Por norma general no tiene porque ser necesario un CDN • JetPack viene con un CDN gratis: Photon • MaxCDN W3TotalCache • Cloudflare (Plugin para WP, aunque recomiendo Sunny) • Akamai • Cloudfront
  27. 27. @MarcosRamajo Nivel avanzado: Utiliza un servidor ligero • Lighttpd: Servidor web optimizado para un alto rendimiento. • Nginx: Potentísimo y ligero servidor web de alta eficiencia. • Litespeed: Servidor web privativo de alto rendimiento y compatibilidad. • Cherokee: Servidor web de alto rendimiento, desarrollo español.
  28. 28. @MarcosRamajo Nivel avanzado: Nginx como Proxy Inverso • Como muchas veces ciertas aplicaciones sólo son compatibles con Apache, se suelen utilizar dos servidores, uno ligero como proxy inverso (que sirve el contenido estático) y otro «pesado» (Apache, que sirve el contenido dinámico). Aligerar carga del servidor - Nginx recibe todas las peticiones - Si se trata de contenido estático, lo sirve Nginx - Si se trata de contenido dinámico, lo sirve Apache
  29. 29. @MarcosRamajo Nivel avanzado: Cachear en la RAM La idea es sencilla. En un sistema informático, la memoria RAM es el dispositivo de almacenamiento más veloz. Sistemas como Memcached o Redis, que cachean dicha información en memoria RAM, consiguiendo un notable aumento de velocidad y rendimiento.
  30. 30. @MarcosRamajo Esto no es una ciencia exacta
  31. 31. Caso de uso 11 Prototipo - sin optimizar – VPS Proveedor Conocido - PS 35/42 - Imágenes optimizadas WEBSITE Caso de prueba Desde New York Desde Amsterdam WEBSITE Caso de prueba
  32. 32. Caso de uso 11 En Server Dedicado PS Frikitek 37/44 WEBSITE Caso de prueba Desde New York Desde Amsterdam WEBSITE Caso de prueba
  33. 33. Caso de uso 22 Gzip - POST W3Total Cache
  34. 34. Caso de uso 22 Gzip - POST W3Total Cache WEBSITE Caso de prueba
  35. 35. Caso de uso 22 Gzip - POST W3Total Cache
  36. 36. Caso de uso 33 Add Headers. ETag, Last-Modified, Expires and Cache-Control HTTP headers . Después de configurar correctamente el W3 Total Cache
  37. 37. Caso de uso 33 Add Headers. ETag, Last-Modified, Expires and Cache-Control HTTP headers . Después de configurar correctamente el W3 Total Cache
  38. 38. Caso de uso 33 Add Headers. ETag, Last-Modified, Expires and Cache-Control HTTP headers . Después de configurar correctamente el W3 Total Cache
  39. 39. Caso de uso 33 Add Headers. ETag, Last-Modified, Expires and Cache-Control HTTP headers . Después de configurar correctamente el W3 Total Cache Caso de prueba WEBSITE
  40. 40. Caso de uso 44 Y ahora viene el CDN
  41. 41. Caso de uso 55 Algún retoque más y premio! Nota Si se puede hacer a mano, no utilices un plugin WEBSITE Caso de prueba
  42. 42. @MarcosRamajo Hola! Soy Marcos ¿Tienes alguna pregunta?

×