¿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 (Programador Front-end y Co-Organizador de la Meetup WordPress Tarragona y Barcelona) veremos los principios básicos del WPO, Web Perfomance Optimization, y como poder aplicarlo de forma gradual a nuestras webs desarrolladas en WordPress. Esta charla está abierta a todo el mundo que tenga interés en aprender sobre WordPress: ¡tanto a los principiantes como a los más expertos!

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. Desarrollador Front-End (Programador de
lo que se ve) en jdevelopia.com
Especializado en WordPress y Joomla!
JoomlaES, WPTarragona & WPBarcelona
JuanKa Díaz

4. • https://www.dariobf.com/podcast/
• Podcast sobre diseño y desarrollo web en
WordPress
• Zona Crítica
Post Type 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.
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.

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

28. • Tamaños de imagen
• Cuidado con la caché
• NO cachear página de Carrito ni Checkout
• Evitar cargar WooCommerce en todo WordPress
• CDN

29. function jkd_dequeue_woocommerce_styles_scripts() {
if( function_exists( 'is_woocommerce' ) ) {
if( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}
add_action( 'wp_enqueue_scripts', 'jkd_dequeue_woocommerce_styles_scripts', 99 );

30. 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

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

32. ¡Muchas gracias!
¿Preguntas?
www.wptarragona.com
Meetup WordPress Tarragona