1. Optimiza tu WordPress para que
vuele! Primeros pasos en WPO
(Web Performance Optimization)

2. JuanKa Díaz - jdevelopia.com
Desarrollador Front-End (Programador de lo que se ve) en jdevelopia
Especializado en WordPress y Joomla!
WordPress Tarragona
Podcaster en Zona Crítica, Post Type Podcast
Desarrollo web y organización de eventos en JoomlaES

3. • https://wptarragona.com/
• 2 Meetups mensuales
• WordPress&Beers
• Meetup - 50% Teoría / 50% Práctica
• Tarragona Impulsa & Castell del Paborde
WordPress Tarragona

4. • https://www.dariobf.com/podcast/
• Podcast sobre diseño y desarrollo web en
WordPress
• Zona Crítica
Postype Podcast

5. Disclaimer
El contenido de esta presentación representa única y
exclusivamente la opinión del presentador, no se pretende sentar
cátedra ni redactar un nuevo testamento con mandamientos
escritos sobre piedra, simplemente difundir opinión, experiencia y
recomendaciones que puedan servir tanto a principiantes, clientes
como a desarrolladores. Todas estas opiniones están totalmente
abiertas a discusión y debate.

6. WordPress.org
· CMS = Content Management System
· GNU/GPL
· Filosofía, Software Libre no es Software Gratis

7. WPO
(Web Performance Optimization)
Conjunto de técnicas para analizar, proponer y desarrollar
cambios directamente relacionados con la optimización de la
velocidad de carga de una web, así como la experiencia de
usuario con esta.

9. ¡NO ES WPO!
· WordPress Optimization
· Instalar 3-4 plugins
· Optimizar solamente la home
· No valorar conexiones lentas
· Alta velocidad de carga con mala UX

10. • Percepción de lentitud en la web
• SEO
• Campañas Adwords
• Consumimos demasiados recursos
• Competencia
¿Cuándo nos preguntamos
sobre WPO?

11. para evitar ser un ÑAAS*
*Ñapas As A Service
RECOMENDACIONES

12. • Herramientas:
- Gtmetrix
- Google Page SpeedInsights
- Pingdom
• No solo analizar la home
• Tiempo en cargar la web:
- Web con mucho tráfico: menos de 2 segundos
- Web normal: menos de 4 segundos
1.- Auditoría

16. • Tiempo en cargar la web:
- Web con mucho tráfico: menos de 2 segundos
- Web normal: menos de 4 segundos
• Peso web: por debajo de 2 megas
• Peticiones: por debajo de 50
• Puntuaciones por encima de 70%
Recomendaciones

17. • Analizar las auditorias
• Ordenar la importancia de CADA auditoria
• Valorar con responsable del proyecto:
• Cambiar diseño/disposición
• Cambiar hosting
• Analizar dependencias para proponer
cambios
2.- Consultoría

18. • Optimizar tamaño/peso
• Optimizar calidad
• Escalado de imágenes
• Eliminar información redundante
3.- Optimizar imágenes
Plugins recomendados:
EWWW Image Optimizer
Smush
Regenerate Thumbnails

19. Original
1920x1080px
2,4 MB
Optimizada
980x550px
202 KB (0,2MB)

20. • Buen hosting = a partir de 120-150€ año
• Discos en SSD
• PHP7 (5.6 es tecnología de 2014)
• HTTP2
• SSL
• Valorar hosting cercano a cliente
• *Caché
• *Respuesta del primer bit
4.- Hosting

21. • Evitar misma funcionalidad en varios plugins
• 2 líneas de código ≠ plugin
• No más de 30 plugins
• P3 (Plugin Performance Profiler)
5.- Pluginitis

22. • Revisar necesidades de cada página
• Revisar la carga de X plugins
• Landing Page = Optimización
6.- Carga condicional

23. • 2 líneas de código ≠ plugin
• Diferenciar entre diseño y funcionalidad
• Correcto uso del functions y plugin propio
• Diseño y maquetación tb es código, tb se
optimiza
• Sustituir plugins comerciales por plugin
nuestro con mínimas funciones
7.- Optimizar código

24. • Recursos estáticos
• Minificar = eliminar espacios innecesarios,
tabulaciones, saltos de linea, etc…
• Se minifica en producción
• Orden de carga de estos recursos - JS
scripts en el footer - CSS necesario en
header y resto en footer.
8.- Minificar HMTL/CSS/JS
Plugins recomendados:
WP AutOptimize
WP Super Minify
Recurso Desarrollo Minifcado
Font Awesome 4.7.0 37KB 31KB
Bootstrap 3.3.7 CSS 143KB 119KB
Bootstrap 3.3.7 JS 69KB 37KB
jQuery 3.2.0 262KB 85KB

25. • Plugins desinstalados
• Número de versiones de Posts
• Comentarios SPAM
• Papelera
• Opciones/transients
9.- Optimizar BBDD
Plugins recomendados:
WP Optimize

26. • Especificar cache de navegador
• Habilita compresión GZIP
• Ahorra ancho de banda
• Usar con mucho cuidado en contenido
dinámico (página de carrito, páginas de
usuario, etc…)
• CDN = Content Delivery Network
10.- Caché y CDN
Plugins recomendados:
WP Super Cache
W3 Total Cache
WP Rocket
Comet Cache

27. 1.- Auditoría
2.- Consultoría
3.- Optimizar imágenes
4.- Hosting
5.- Pluginitis
6.- Carga condicional
7.- Optimizar código
8.- Minificar
9.- Optimizar BBDD
10.- Caché y CDN
Resumen

28. El buen carpintero deja el mueble bien acabado tanto
por la parte que se ve como por la que no.
Anónimo

29. ¡Muchas gracias!
https://jdevelopia.com/ficommerce2018
¿Alguna pregunta?

30. Interesante… cuéntame más…
Preguntas! Preguntas!!!