¿Tu página web en WordPress va muy lenta?
¿Quieres hacer campañas de Adwords y te resultan muy elevadas de precio por culpa de una mala optimización en tu web?
Veremos una serie de pasos y conceptos básicos de optimización web para que tu web en WordPress mejore notablemente su velocidad de carga y por ende su ratio de conversión.
Que una web debe cargar rápido lo sabemos todos, porque todos somos impacientes por naturaleza, pero, ¿cómo podemos medir de forma efectiva esto? y todavía más importante, ¿cómo o qué debemos hacer para mejorar esto?
En esta charla presentada por JuanKa Díaz (Desarrollador Front-end y Co-Organizador de la Meetup WordPress Tarragona) veremos los principios básicos del WPO, Web Perfomance Optimization, y como poder aplicarlo de forma gradual a nuestras webs desarrolladas en WordPress.
Hombres, mujeres, desarrolladores, clientes y viceversa word pressbarcelona...
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
1. ¡Optimiza tu WordPress para que vuele! Primeros
pasos en WPO (Web Performance Optimization)
por JuanKa Díaz
2. • https://wptarragona.com/
• 2 Meetups mensuales
• WordPress&Beers
• Meetup - 50% Teoría / 50% Práctica
• Tarragona Impulsa & Castell del Paborde
WordPress Tarragona
3.
4.
5.
6. Desarrollador Front-End (Programador de
lo que se ve) en jdevelopia.com
Especializado en WordPress y Joomla!
Desarrollo web y organización de eventos
en JoomlaES
JuanKa Díaz
8. 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.
Soy responsable de lo que digo, no de lo que cada uno interpreta.
No me puedo responsabilizar de códigos o recomendaciones que te
fallen en tu web.
En caso de duda, consulte con su PROGRAMADOR.
9. WordPress.org
· CMS = Content Management System
· GNU/GPL
· Filosofía, Software Libre no es Software Gratis
10. 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.
11.
12. ¡NO ES WPO!
· WordPress Optimization
· Instalar 3-4 plugins
· Optimizar solamente la home
· No valorar conexiones lentas
· Alta velocidad de carga con mala UX
13. • Percepción de lentitud en la web
• SEO
• Campañas Adwords
• Consumimos demasiados recursos
• Competencia
¿Cuándo nos preguntamos
sobre WPO?
14. para evitar ser un ÑAAS*
*Ñapas As A Service
RECOMENDACIONES
15. • 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.
17.
18.
19. • 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
20. • 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
23. • 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
24. • 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
25. • Revisar necesidades de cada página
• Revisar la carga de X plugins
• Landing Page = Optimización
6.- Carga condicional
26. • 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
27. • 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
28. • Plugins desinstalados
• Número de versiones de Posts
• Comentarios SPAM
• Papelera
• Opciones/transients
9.- Optimizar BBDD
Plugins recomendados:
WP Optimize
29. • 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
30.
31. • Tamaños de imagen
• Cuidado con la caché
• NO cachear página de Carrito ni Checkout
• Evitar cargar WooCommerce en todo WordPress
• CDN