Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimiza tu word press para que vuele! primeros pasos en wpo (web performance optimization) wordpress barcelona 2018

356 views

Published on

¿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!

Published in: Software
  • Be the first to comment

  • Be the first to like this

Optimiza tu word press para que vuele! primeros pasos en wpo (web performance optimization) wordpress barcelona 2018

  1. 1. ¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Web Performance Optimization) por JuanKa Díaz
  2. 2. • https://wptarragona.com/ • 2 Meetups mensuales
 • WordPress&Beers • Meetup - 50% Teoría / 50% Práctica
 • Tarragona Impulsa & Castell del Paborde WordPress Tarragona
  3. 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. 4. • https://www.dariobf.com/podcast/
 • Podcast sobre diseño y desarrollo web en WordPress
 • Zona Crítica Post Type Podcast
  5. 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. 6. WordPress.org · CMS = Content Management System · GNU/GPL · Filosofía, Software Libre no es Software Gratis
  7. 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.
  8. 8. ¡NO ES WPO! · WordPress Optimization · Instalar 3-4 plugins · Optimizar solamente la home · No valorar conexiones lentas · Alta velocidad de carga con mala UX
  9. 9. • Percepción de lentitud en la web
 • SEO
 • Campañas Adwords
 • Consumimos demasiados recursos
 • Competencia ¿Cuándo nos preguntamos sobre WPO?
  10. 10. para evitar ser un ÑAAS* *Ñapas As A Service RECOMENDACIONES
  11. 11. • 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
  12. 12. • 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
  13. 13. • 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
  14. 14. • 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
  15. 15. Original 1920x1080px 2,4 MB Optimizada 980x550px 202 KB (0,2MB)
  16. 16. • 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
  17. 17. • 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
  18. 18. • Revisar necesidades de cada página
 • Revisar la carga de X plugins • Landing Page = Optimización 6.- Carga condicional
  19. 19. • 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
  20. 20. • 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
  21. 21. • Plugins desinstalados
 • Número de versiones de Posts
 • Comentarios SPAM
 • Papelera
 • Opciones/transients 9.- Optimizar BBDD Plugins recomendados: WP Optimize
  22. 22. • 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
  23. 23. • Tamaños de imagen
 • Cuidado con la caché
 • NO cachear página de Carrito ni Checkout
 • Evitar cargar WooCommerce en todo WordPress
 • CDN
  24. 24. 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 );
  25. 25. 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
  26. 26. El buen carpintero deja el mueble bien acabado tanto por la parte que se ve como por la que no. Anónimo
  27. 27. ¡Muchas gracias! ¿Preguntas? www.wptarragona.com Meetup WordPress Tarragona

×