¡Optimiza tu WordPress para que vuele! Primeros
pasos en WPO (Web Performance Optimization)
por JuanKa Díaz

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

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

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

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.

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

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.

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

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

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

• 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

• 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

• 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

• 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

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

• 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

• 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

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

• 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

• 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

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

• 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

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

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 );

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

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

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