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.

10 consejos para mejorar la WPO en WordPress - Ponencia Wordcamp Alicante 2017

1,237 views

Published on

Wordcamp Alicante 2017. Ponencia titulada "10 consejos para mejorar la WPO en WordPress"

Published in: Internet
  • Be the first to comment

10 consejos para mejorar la WPO en WordPress - Ponencia Wordcamp Alicante 2017

  1. 1. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui Juan Seguí - @juansegui 10 consejos para mejorar la WPO en WordPress
  2. 2. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui ¿Qué es WPO? Web Performance Optimization - Optimización de rendimiento
  3. 3. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui ¿Qué es WPO?
  4. 4. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui ¿Qué es WPO?
  5. 5. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui ¿Qué es WPO?
  6. 6. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui ¿Por qué mejorar el rendimiento? ● Porcentaje de conversión. ● SEO. ● Adwords. ● Ahorrar costes.
  7. 7. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui ¿Por qué mejorar el rendimiento? ● 47% de los consumidores esperan que la web cargue en 2 segundos o menos. ● 40% de los usuarios abandonan un sitio web si tarda más de 3 segundos en cargar. ● Un segundo de retardo en la carga de una página puede suponer una reducción de la conversión de un 7% ● Si un e-commerce factura $100,000 al día, 1 segundo de retardo puede costarle $2,5 millones en pérdida de ventas cada año. Fuente: KISSMETRICS
  8. 8. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui ¿Por qué mejorar el rendimiento? ¿Cuánto debe tardar en cargar una web? Lo normal sería entre 500 milisegundos a 2 segundos como mucho. ● Tiempo medio de carga: 5 segundos; ● Tamaño medio de página: 3Mb; ● Número medio de imágenes: 42; ● Número medio de JavaScripts: 21; ● Número medio de peticiones http: 89. Fuente: Pingdom 2015 Stats
  9. 9. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10 consejos WPO
  10. 10. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web
  11. 11. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: wordpress, plugins y temas
  12. 12. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: wordpress, plugins y temas
  13. 13. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: wordpress, plugins y temas ¿Me cargo Jetpack?
  14. 14. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: wordpress, plugins y temas Lightweight themes - Temas ligeros: Buscar temas simples, muchas características pueden complicar la carga.
  15. 15. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: wordpress, plugins y temas ¿Versión AMP?
  16. 16. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: servidor y versión PHP Sin un buen servidor, por mucha optimización que haya la web seguirá siendo lenta.
  17. 17. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: servidor y versión PHP
  18. 18. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: servidor y versión PHP Fuente: Fluent - San Francisco: http://talks.php.net/fluent15#/
  19. 19. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: servidor y versión PHP ● Comprobar si wordpress, plugins y themes son compatibles.
  20. 20. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: servidor y versión PHP
  21. 21. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: servidor y versión PHP
  22. 22. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: velocidad carga actual
  23. 23. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 1. Analizar web: velocidad carga actual
  24. 24. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 2. Reducir carga web
  25. 25. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 2. Reducir carga web: plugins ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen ● No utilizaré todo los plugins que existen
  26. 26. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 2. Reducir carga web: plugins ¿Y por qué no? Por Seguridad Por Rendimiento Por no perder el control Porque muchos no son necesarios
  27. 27. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 2. Reducir carga web: plugins ● Analizar plugins actuales y eliminar los innecesarios. ● Eliminar aquellos que consumen más de lo normal.
  28. 28. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 2. Reducir carga web: Plugins
  29. 29. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 2. Reducir carga web: configuración ● Menos artículos por página (de 10 a 7 por ejemplo). ● Limitar número de comentarios por página. ● Reducir los widgets externos (FB, twitter, etc.) y iframes. ● Segmentar páginas demasiado largas.
  30. 30. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes
  31. 31. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes Servir imágenes correctamente escaladas
  32. 32. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes Loseless (sin pérdida) vs Lossy (con pérdida)
  33. 33. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin regenerar thumbnails Regenerate thumbnails
  34. 34. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: utilizar compresor imágenes
  35. 35. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin ● Versión gratuita y de pago. ● Optimización sencilla / permite redimensionar.
  36. 36. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin
  37. 37. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin ● Bulk Edit ● WebP
  38. 38. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin
  39. 39. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin ● Permite especificar Lossy o Lossless. ● Permite concretar cómo será el resize.
  40. 40. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin
  41. 41. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin ● Gratuito. ● Muy simple.
  42. 42. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 3. Optimizar imágenes: plugin
  43. 43. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor
  44. 44. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor VENTAJA: Potencia DESVENTAJA: Consume muchos recursos
  45. 45. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor VENTAJA: Velocidad DESVENTAJA: Necesita de otros módulos para servir contenido dinámico
  46. 46. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor Combinar el uso de Apache y Nginx POTENCIA VELOCIDAD
  47. 47. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor Combinar el uso de Apache y Nginx: Juntos consiguen mejor rendimiento: Nginx como servidor estático en el front-end y Apache como servidor dinámico en back-end.
  48. 48. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor Activar compresión GZIP
  49. 49. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor: Apache .htaccess <ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>
  50. 50. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor: Apache Si no funciona bien directamente en htaccess, podemos aplicarlo en la configuración de Apache. AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
  51. 51. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor: Nginx gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  52. 52. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 4. Activar compresión servidor Gzip Compression Test: https://varvy.com/tools/gzip/
  53. 53. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache
  54. 54. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache Agiliza la carga de diferentes tipos de archivos. ( disco, navegador, bd, etc.) ¡Cuidado con la caché y los usuarios registrados!
  55. 55. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache ● Probablemente el más completo. ● Muchas opciones, en algunos casos demasiadas.
  56. 56. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache
  57. 57. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache ● Plugin de cache de Automattic. ● Muy popular y potente.
  58. 58. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache
  59. 59. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache
  60. 60. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache
  61. 61. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 5. Utilizar cache
  62. 62. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minificar (Minify)
  63. 63. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minify ¿Qué es minificar? Eliminar todo lo innecesario del código sin que esto afecte al funcionamiento del mismo.
  64. 64. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minify ¿Qué se elimina? ● Espacios en blanco. ● Comentarios. ● Otros caracteres innecesarios.
  65. 65. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minify ● Ejemplo CÓDIGO ORIGINAL CÓDIGO MINIFICADO
  66. 66. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minify ● Minify HTML ● Minify CSS ● Minify JavaScript W3 Total Cache WP Fastest Cache
  67. 67. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minify: Autoptimize ● Mejora HTML, JavaScript y CSS. ● Combinar CSS.
  68. 68. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minify: Autoptimize
  69. 69. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minify: Fast Velocity Minify
  70. 70. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 6. Minify: Fast Velocity Minify
  71. 71. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 7. Utilizar un CDN
  72. 72. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 7. Utilizar un CDN Conjunto de servidores que contienen copias de una misma serie de contenidos. Están ubicados en puntos diversos de una red para poder servir sus contenidos de manera más eficiente, según la ubicación más cercana.
  73. 73. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 7. Utilizar un CDN
  74. 74. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 7. Utilizar un CDN: Cloudflare ● Existe una versión gratuita, para pequeñas webs personales. ● Versión de pago desde $20 / mes.
  75. 75. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 7. Utilizar un CDN: Cloudflare ● Web copiada en los servidores de cloudflare. ● Plugin muy sencillo.
  76. 76. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 7. Utilizar un CDN: MaxCDN ● Desde $20 / mes
  77. 77. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 7. Utilizar un CDN: MaxCDN ● Web replicada en varios servidores con sistema de cache. ● Se puede utilizar con cualquier plugin de cache (W3, WP Fastest Cache, etc.)
  78. 78. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 8. Utilizar HTTP y SSL
  79. 79. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 8. Utilizar HTTP2 y SSL HTTP2 es aproximadamente el doble de rápido que la versión anterior.
  80. 80. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 8. Utilizar HTTP2 y SSL A día de hoy alrededor del 11% de sitios web soportan HTTP2
  81. 81. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 8. Utilizar HTTP2 y SSL Actualmente todos los navegadores soportan el protocolo HTTP2, aunque siempre sobre HTTPS. Se necesita un certificado SSL como Let’s Encrypt para poder utilizar HTTP2.
  82. 82. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 9. Cargar de forma diferida
  83. 83. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 9. Cargar de forma diferida
  84. 84. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 9. Cargar de forma diferida
  85. 85. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10. Comprobar mejoras
  86. 86. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10. Comprobar mejoras ● Extensiones de chrome Page Speed Insight and checklist
  87. 87. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10. Comprobar mejoras No es ninguna tontería, puede que la propia optimización se haya cargado nuestra web.
  88. 88. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10. Comprobar mejoras Extensiones de Chrome para medir el tiempo de carga.
  89. 89. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10. Comprobar: app.telemetry Page Speed Monitor
  90. 90. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10. Comprobar: Page Speed Insights and Checklist
  91. 91. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10. Comprobar: Pingdom Tools https://tools.pingdom.com/
  92. 92. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10. Comprobar: Pingdom Tools
  93. 93. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui 10 consejos 1. Analizar web 2. Reducir carga web 3. Optimizar imágenes 4. Activar compresión servidor 5. Utilizar cache Por supuesto, esto no acaba aquí, pero es un buen comienzo ;) 6. Minificar (Minify) 7. Utilizar un CDN 8. Utilizar HTTP2 y SSL 9. Cargar de forma diferida 10. Comprobar mejoras
  94. 94. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui No hay que obsesionarse en conseguir un 100 en PageSpeed, pero sí en conseguir que la web vuele.
  95. 95. #youdreamWemakeWORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui Muchas gracias

×