Successfully reported this slideshow.
Your SlideShare is downloading. ×

Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Web Performance Optimization) - WordCamp Zaragoza 2019

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 33 Ad

Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Web Performance Optimization) - WordCamp Zaragoza 2019

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

More from JuanKa Díaz - jdevelopia (12)

Recently uploaded (20)

Advertisement

Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Web Performance Optimization) - WordCamp Zaragoza 2019

  1. 1. ¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Web Performance Optimization) por JuanKa Díaz
  2. 2. Programador Front-End (Programador de lo que se ve) en jdevelopia.com
 Especializado en WordPress y Joomla!
 JoomlaES, WPTarragona & WPBarcelona JuanKa Díaz
  3. 3. • https://www.dariobf.com/podcast/
 • Podcast sobre diseño y desarrollo web en WordPress
 • Zona Crítica Post Type Podcast
  4. 4. 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.
  5. 5. 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.
  6. 6. ¡NO ES WPO! · WordPress Optimization · Instalar 3-4 plugins · Optimizar solamente la home · No valorar conexiones lentas · Alta velocidad de carga con mala UX
  7. 7. • Percepción de lentitud en la web
 • SEO
 • Campañas Adwords
 • Consumimos demasiados recursos
 • Competencia ¿Cuándo nos preguntamos sobre WPO?
  8. 8. para evitar caer en el ÑAAS* *Ñapas As A Service RECOMENDACIONES
  9. 9. • 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
  10. 10. • 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
  11. 11. • Analizar las auditorias
 • Ordenar la importancia de CADA auditoria • Valorar con responsable del proyecto: • Cambiar hosting • Cambiar diseño/disposición • Cambiar Theme • Analizar dependencias para proponer cambios • etc… 2.- Consultoría
  12. 12. • Optimizar tamaño/peso
 • Optimizar calidad
 • Escalado de imágenes
 • Eliminar información redundante 3.- Optimizar imágenes Plugins recomendados: EWWW Image Optimizer Smush
  13. 13. Original 1920x1080px 2,4 MB Optimizada 980x550px 202 KB (0,2MB)
  14. 14. • 3 tamaños de imagen
 • 3 imágenes diferentes • Cada vez k cambiemos hemos de regenerar toda la Biblioteca de Medios
 • Plugin: Regenerate Thumbnails Cuiiiidaooooo!!
  15. 15. • 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
  16. 16. • Evitar misma funcionalidad en varios plugins
 • 2 líneas de código ≠ plugin
 • Evitar los “frankestein”-plugin 5.- Pluginitis Plugins recomendados: P3 (Plugin Performance Profiler)
  17. 17. • Revisar necesidades de cada página
 • Revisar la carga de X plugins • Landing Page = Optimización 6.- Carga condicional
  18. 18. • 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
  19. 19. • 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
  20. 20. • Plugins desinstalados
 • Número de versiones de Posts
 • Comentarios SPAM
 • Papelera
 • Opciones/transients 9.- Optimizar BBDD Plugins recomendados: WP Optimize
  21. 21. • 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
  22. 22. • Tamaños de imagen
 • Cuidado con la caché
 • NO cachear página de Carrito ni Checkout
 • Evitar cargar WooCommerce en todo WordPress
 • CDN
  23. 23. 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 );
  24. 24. 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
  25. 25. El buen carpintero deja el mueble bien acabado tanto por la parte que se ve como por la que no. Anónimo
  26. 26. ¡Muchas gracias! ¿Preguntas? slides: jdevelopia.com/ wczaragoza2019

×