10 consejos para mejorar la WPO en WordPress - WordCamp Alicante 2017

¿Qué hace que una web WordPress cargue más rápido? En esta charla compartí diez consejos prácticos para analizar su rendimiento y mejorarlo: revisar plugins y servidor, optimizar imágenes, configurar la caché, reducir el peso de los archivos y comprobar el resultado. El objetivo era mejorar la experiencia de quien visita la web, sin obsesionarse con obtener un 100 en PageSpeed.

What makes a WordPress website load faster? In this talk, I shared ten practical tips for analysing and improving performance: reviewing plugins and hosting, optimising images, configuring caching, reducing file sizes and checking the results. The goal was to improve the visitor’s experience without obsessing over a perfect PageSpeed score.

Transcript

1. 10 consejos para mejorar la WPO en WordPress Juan Seguí - @juansegui WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
2. ¿Qué es WPO? Web Performance Optimization - Optimización de rendimiento WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
3. ¿Qué es WPO? WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
4. ¿Qué es WPO? WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
5. ¿Qué es WPO? WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
6. ¿Por qué mejorar el rendimiento? • Porcentaje de conversión. • SEO. • Adwords. • Ahorrar costes. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
7. ¿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 WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
8. ¿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 WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
9. 10 consejos WPO WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
10. 1. Analizar web WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
11. 1. Analizar web: wordpress, plugins y temas WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
12. 1. Analizar web: wordpress, plugins y temas WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
13. 1. Analizar web: wordpress, plugins y temas ¿Me cargo Jetpack? WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
14. 1. Analizar web: wordpress, plugins y temas Lightweight themes - Temas ligeros: Buscar temas simples, muchas características pueden complicar la carga. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
15. 1. Analizar web: wordpress, plugins y temas ¿Versión AMP? WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
16. 1. Analizar web: servidor y versión PHP Sin un buen servidor, por mucha optimización que haya la web seguirá siendo lenta. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
17. 1. Analizar web: servidor y versión PHP WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
18. 1. Analizar web: servidor y versión PHP Fuente: Fluent - San Francisco: http://talks.php.net/fluent15#/ WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
19. 1. Analizar web: servidor y versión PHP • Comprobar si wordpress, plugins y themes son compatibles. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
20. 1. Analizar web: servidor y versión PHP WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
21. 1. Analizar web: servidor y versión PHP WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
22. 1. Analizar web: velocidad carga actual WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
23. 1. Analizar web: velocidad carga actual WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
24. 2. Reducir carga web WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
25. 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 WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
26. 2. Reducir carga web: plugins ¿Y por qué no? Por no perder el control Por Seguridad Por Rendimiento Porque muchos no son necesarios WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
27. 2. Reducir carga web: plugins • • Analizar plugins actuales y eliminar los innecesarios. Eliminar aquellos que consumen más de lo normal. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
28. 2. Reducir carga web: Plugins WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
29. 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. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
30. 3. Optimizar imágenes WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
31. 3. Optimizar imágenes Servir imágenes correctamente escaladas WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
32. 3. Optimizar imágenes Loseless (sin pérdida) vs Lossy (con pérdida) WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
33. 3. Optimizar imágenes: plugin regenerar thumbnails Regenerate thumbnails WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
34. 3. Optimizar imágenes: utilizar compresor imágenes WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
35. 3. Optimizar imágenes: plugin • • Versión gratuita y de pago. Optimización sencilla / permite redimensionar. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
36. 3. Optimizar imágenes: plugin WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
37. 3. Optimizar imágenes: plugin • • Bulk Edit WebP WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
38. 3. Optimizar imágenes: plugin WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
39. 3. Optimizar imágenes: plugin • • Permite especificar Lossy o Lossless. Permite concretar cómo será el resize. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
40. 3. Optimizar imágenes: plugin WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
41. 3. Optimizar imágenes: plugin • • Gratuito. Muy simple. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
42. 3. Optimizar imágenes: plugin WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
43. 4. Activar compresión servidor WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
44. 4. Activar compresión servidor VENTAJA: Potencia DESVENTAJA: Consume muchos recursos WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
45. 4. Activar compresión servidor VENTAJA: Velocidad DESVENTAJA: Necesita de otros módulos para servir contenido dinámico WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
46. 4. Activar compresión servidor Combinar el uso de Apache y Nginx POTENCIA WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui VELOCIDAD #youdreamWemake
47. 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. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
48. 4. Activar compresión servidor Activar compresión GZIP WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
49. 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> WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
50. 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 WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
51. 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; WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
52. 4. Activar compresión servidor Gzip Compression Test: https://varvy.com/tools/gzip/ WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
53. 5. Utilizar cache WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
54. 5. Utilizar cache Agiliza la carga de diferentes tipos de archivos. ( disco, navegador, bd, etc.) ¡Cuidado con la caché y los usuarios registrados! WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
55. 5. Utilizar cache • • Probablemente el más completo. Muchas opciones, en algunos casos demasiadas. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
56. 5. Utilizar cache WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
57. 5. Utilizar cache • • Plugin de cache de Automattic. Muy popular y potente. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
58. 5. Utilizar cache WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
59. 5. Utilizar cache WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
60. 5. Utilizar cache WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
61. 5. Utilizar cache WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
62. 6. Minificar (Minify) WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
63. 6. Minify ¿Qué es minificar? Eliminar todo lo innecesario del código sin que esto afecte al funcionamiento del mismo. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
64. 6. Minify ¿Qué se elimina? • Espacios en blanco. • Comentarios. • Otros caracteres innecesarios. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
65. 6. Minify • Ejemplo CÓDIGO ORIGINAL WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui CÓDIGO MINIFICADO #youdreamWemake
66. 6. Minify • • • Minify HTML Minify CSS Minify JavaScript W3 Total Cache WP Fastest Cache WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
67. 6. Minify: Autoptimize • • Mejora HTML, JavaScript y CSS. Combinar CSS. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
68. 6. Minify: Autoptimize WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
69. 6. Minify: Fast Velocity Minify WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
70. 6. Minify: Fast Velocity Minify WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
71. 7. Utilizar un CDN WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
72. 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. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
73. 7. Utilizar un CDN WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
74. 7. Utilizar un CDN: Cloudflare • • Existe una versión gratuita, para pequeñas webs personales. Versión de pago desde $20 / mes. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
75. 7. Utilizar un CDN: Cloudflare • • Web copiada en los servidores de cloudflare. Plugin muy sencillo. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
76. 7. Utilizar un CDN: MaxCDN • Desde $20 / mes WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
77. 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.) WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
78. 8. Utilizar HTTP y SSL WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
79. 8. Utilizar HTTP2 y SSL HTTP2 es aproximadamente el doble de rápido que la versión anterior. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
80. 8. Utilizar HTTP2 y SSL A día de hoy alrededor del 11% de sitios web soportan HTTP2 WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
81. 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. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
82. 9. Cargar de forma diferida WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
83. 9. Cargar de forma diferida WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
84. 9. Cargar de forma diferida WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
85. 10. Comprobar mejoras WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
86. 10. Comprobar mejoras • Extensiones de chrome Page Speed Insight and checklist WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
87. 10. Comprobar mejoras No es ninguna tontería, puede que la propia optimización se haya cargado nuestra web. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
88. 10. Comprobar mejoras Extensiones de Chrome para medir el tiempo de carga. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
89. 10. Comprobar: app.telemetry Page Speed Monitor WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
90. 10. Comprobar: Page Speed Insights and Checklist WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
91. 10. Comprobar: Pingdom Tools https://tools.pingdom.com/ WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
92. 10. Comprobar: Pingdom Tools WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
93. 10 consejos 1. Analizar web 2. Reducir carga web 3. Optimizar imágenes 4. Activar compresión servidor 5. Utilizar cache 6. Minificar (Minify) 7. Utilizar un CDN 8. Utilizar HTTP2 y SSL 9. Cargar de forma diferida 10. Comprobar mejoras Por supuesto, esto no acaba aquí, pero es un buen comienzo ;) WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
94. No hay que obsesionarse en conseguir un 100 en PageSpeed, pero sí en conseguir que la web vuele. WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake
95. Muchas gracias WORDCAMP ALICANTE 2017 / JUAN SEGUÍ - @juansegui #youdreamWemake