SlideShare una empresa de Scribd logo
¡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
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
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.
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
¡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
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
• 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
¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup
• 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

Más contenido relacionado

La actualidad más candente

Multiplica tu productividad usando un preprocesador de css
Multiplica tu productividad usando un preprocesador de cssMultiplica tu productividad usando un preprocesador de css
Multiplica tu productividad usando un preprocesador de css
Leonidas Esteban González
 
10 Factores SEO
10 Factores SEO 10 Factores SEO
10 Factores SEO
Álvaro Mariscal
 
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Asociación Webmasters Cantabria
 
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Asociación Webmasters Cantabria
 
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
Asociación Webmasters Cantabria
 
Las Herramientas de un Frontend
Las Herramientas de un FrontendLas Herramientas de un Frontend
Las Herramientas de un Frontend
Leonidas Esteban González
 
Preprocesadores CSS con LessCSS
Preprocesadores CSS con LessCSSPreprocesadores CSS con LessCSS
Preprocesadores CSS con LessCSS
Avanet
 
Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia
Mercedes Garcia
 
Mejores practicas para acelerar sitios web
Mejores practicas para acelerar sitios webMejores practicas para acelerar sitios web
Mejores practicas para acelerar sitios web
Juan Eladio Sánchez Rosas
 
Introducción a Responsive Design
Introducción a Responsive DesignIntroducción a Responsive Design
Introducción a Responsive Design
Leonidas Esteban González
 
Presentacion webuzzle
Presentacion webuzzlePresentacion webuzzle
Presentacion webuzzle
Webuzzle
 
Rendimiento y velocidad, acelera tu sitio WordPress
Rendimiento y velocidad, acelera tu sitio WordPressRendimiento y velocidad, acelera tu sitio WordPress
Rendimiento y velocidad, acelera tu sitio WordPress
LibreCon
 
Wordpress
WordpressWordpress
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
JuanKa Díaz - jdevelopia
 
Flujos de trabajo para un desarrollador web frontend
Flujos de trabajo para un desarrollador web frontendFlujos de trabajo para un desarrollador web frontend
Flujos de trabajo para un desarrollador web frontend
Leonidas Esteban González
 
Álvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
Álvaro Fontela Cofundador Raiola Networks. Consultor WordpressÁlvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
Álvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
NetLab
 
Puntos clave para tener un wordpress rápido by Raiola Networks
Puntos clave para tener un wordpress rápido by Raiola NetworksPuntos clave para tener un wordpress rápido by Raiola Networks
Puntos clave para tener un wordpress rápido by Raiola Networks
Raiola Networks
 
WPO en servidores y entornos web
WPO en servidores y entornos webWPO en servidores y entornos web
WPO en servidores y entornos web
Raiola Networks
 
Buenas prácticas para la optimización web
Buenas prácticas para la optimización webBuenas prácticas para la optimización web
Buenas prácticas para la optimización web
betabeers
 

La actualidad más candente (19)

Multiplica tu productividad usando un preprocesador de css
Multiplica tu productividad usando un preprocesador de cssMultiplica tu productividad usando un preprocesador de css
Multiplica tu productividad usando un preprocesador de css
 
10 Factores SEO
10 Factores SEO 10 Factores SEO
10 Factores SEO
 
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
 
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
 
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
 
Las Herramientas de un Frontend
Las Herramientas de un FrontendLas Herramientas de un Frontend
Las Herramientas de un Frontend
 
Preprocesadores CSS con LessCSS
Preprocesadores CSS con LessCSSPreprocesadores CSS con LessCSS
Preprocesadores CSS con LessCSS
 
Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia
 
Mejores practicas para acelerar sitios web
Mejores practicas para acelerar sitios webMejores practicas para acelerar sitios web
Mejores practicas para acelerar sitios web
 
Introducción a Responsive Design
Introducción a Responsive DesignIntroducción a Responsive Design
Introducción a Responsive Design
 
Presentacion webuzzle
Presentacion webuzzlePresentacion webuzzle
Presentacion webuzzle
 
Rendimiento y velocidad, acelera tu sitio WordPress
Rendimiento y velocidad, acelera tu sitio WordPressRendimiento y velocidad, acelera tu sitio WordPress
Rendimiento y velocidad, acelera tu sitio WordPress
 
Wordpress
WordpressWordpress
Wordpress
 
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
 
Flujos de trabajo para un desarrollador web frontend
Flujos de trabajo para un desarrollador web frontendFlujos de trabajo para un desarrollador web frontend
Flujos de trabajo para un desarrollador web frontend
 
Álvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
Álvaro Fontela Cofundador Raiola Networks. Consultor WordpressÁlvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
Álvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
 
Puntos clave para tener un wordpress rápido by Raiola Networks
Puntos clave para tener un wordpress rápido by Raiola NetworksPuntos clave para tener un wordpress rápido by Raiola Networks
Puntos clave para tener un wordpress rápido by Raiola Networks
 
WPO en servidores y entornos web
WPO en servidores y entornos webWPO en servidores y entornos web
WPO en servidores y entornos web
 
Buenas prácticas para la optimización web
Buenas prácticas para la optimización webBuenas prácticas para la optimización web
Buenas prácticas para la optimización web
 

Similar a ¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup

Rendimiento y velocidad en WordPress
Rendimiento y velocidad en WordPress Rendimiento y velocidad en WordPress
Rendimiento y velocidad en WordPress
Dani Reguera Bakhache
 
Adrián Garrido - WPO para WordPress.pptx
Adrián Garrido - WPO para WordPress.pptxAdrián Garrido - WPO para WordPress.pptx
Adrián Garrido - WPO para WordPress.pptx
Adrián Garrido
 
Optimiza tus webs a bajo costo - WCVenezuela2021
Optimiza tus webs a bajo costo - WCVenezuela2021Optimiza tus webs a bajo costo - WCVenezuela2021
Optimiza tus webs a bajo costo - WCVenezuela2021
Fernando Puente
 
WPO para proyectos WooComerce
WPO para proyectos WooComerceWPO para proyectos WooComerce
WPO para proyectos WooComerce
Fernando Puente
 
Optimizar WordPress - Presentacion Caracol Digital
Optimizar WordPress - Presentacion Caracol DigitalOptimizar WordPress - Presentacion Caracol Digital
Optimizar WordPress - Presentacion Caracol Digital
Gerardo García Asensio
 
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBFOptimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
Darío BF
 
Acelera tu sitio WordPress WPO
Acelera tu sitio WordPress WPOAcelera tu sitio WordPress WPO
Acelera tu sitio WordPress WPO
Dani Reguera Bakhache
 
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
wpargentina
 
Optimizando Sitios Web
Optimizando Sitios WebOptimizando Sitios Web
Optimizando Sitios Web
Grupo Mediabox
 
WordPress: cómo aumentar la velocidad y la seguridad de una web
WordPress: cómo aumentar la velocidad y la seguridad de una webWordPress: cómo aumentar la velocidad y la seguridad de una web
WordPress: cómo aumentar la velocidad y la seguridad de una web
Nominalia
 
Clase sobre Optimización de Wordpress
Clase sobre Optimización de WordpressClase sobre Optimización de Wordpress
Clase sobre Optimización de Wordpress
Juan Ignacio Alberola
 
Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo
Charla betabeers optimización y rendimiento en Wordpress - Marcos RamajoCharla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo
Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo
Marcos Ramajo
 
Backbeam
BackbeamBackbeam
Backbeam
betabeers
 
Un proyecto web de 0 a 100
Un proyecto web de 0 a 100Un proyecto web de 0 a 100
Un proyecto web de 0 a 100
Antonio Gonzalez
 
¿Qué es WordPress?
¿Qué es WordPress?¿Qué es WordPress?
¿Qué es WordPress?
Quique Mateu
 
El tamaño importa - JoomlaDay Sevilla 2015
El tamaño importa - JoomlaDay Sevilla 2015El tamaño importa - JoomlaDay Sevilla 2015
El tamaño importa - JoomlaDay Sevilla 2015
Alejandro Domínguez
 
WPO para WordPress
WPO para WordPressWPO para WordPress
WPO para WordPress
Oscar Gascón Arjol
 
Buenas prácticas para la optimización de sitios web
Buenas prácticas para la optimización de sitios webBuenas prácticas para la optimización de sitios web
Buenas prácticas para la optimización de sitios web
Luis Miguel Martín
 
Drupal 7 para sitios de alto rendimiento y alta disponibilidad
Drupal 7 para sitios de alto rendimiento y alta disponibilidadDrupal 7 para sitios de alto rendimiento y alta disponibilidad
Drupal 7 para sitios de alto rendimiento y alta disponibilidad
Iván Campaña Naranjo
 
Los 10 mandamientos del WPO
Los 10 mandamientos del WPOLos 10 mandamientos del WPO
Los 10 mandamientos del WPO
Pablo López Mestre
 

Similar a ¡Optimiza tu WordPress para que vuele! Primeros pasos en WPO (Optimización Web) - 27 Septiembre 2018 en WordPress Lleida Meetup (20)

Rendimiento y velocidad en WordPress
Rendimiento y velocidad en WordPress Rendimiento y velocidad en WordPress
Rendimiento y velocidad en WordPress
 
Adrián Garrido - WPO para WordPress.pptx
Adrián Garrido - WPO para WordPress.pptxAdrián Garrido - WPO para WordPress.pptx
Adrián Garrido - WPO para WordPress.pptx
 
Optimiza tus webs a bajo costo - WCVenezuela2021
Optimiza tus webs a bajo costo - WCVenezuela2021Optimiza tus webs a bajo costo - WCVenezuela2021
Optimiza tus webs a bajo costo - WCVenezuela2021
 
WPO para proyectos WooComerce
WPO para proyectos WooComerceWPO para proyectos WooComerce
WPO para proyectos WooComerce
 
Optimizar WordPress - Presentacion Caracol Digital
Optimizar WordPress - Presentacion Caracol DigitalOptimizar WordPress - Presentacion Caracol Digital
Optimizar WordPress - Presentacion Caracol Digital
 
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBFOptimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
Optimiza WordPress y a correr - WordCamp Cantabria 2015 - @DarioBF
 
Acelera tu sitio WordPress WPO
Acelera tu sitio WordPress WPOAcelera tu sitio WordPress WPO
Acelera tu sitio WordPress WPO
 
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
 
Optimizando Sitios Web
Optimizando Sitios WebOptimizando Sitios Web
Optimizando Sitios Web
 
WordPress: cómo aumentar la velocidad y la seguridad de una web
WordPress: cómo aumentar la velocidad y la seguridad de una webWordPress: cómo aumentar la velocidad y la seguridad de una web
WordPress: cómo aumentar la velocidad y la seguridad de una web
 
Clase sobre Optimización de Wordpress
Clase sobre Optimización de WordpressClase sobre Optimización de Wordpress
Clase sobre Optimización de Wordpress
 
Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo
Charla betabeers optimización y rendimiento en Wordpress - Marcos RamajoCharla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo
Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo
 
Backbeam
BackbeamBackbeam
Backbeam
 
Un proyecto web de 0 a 100
Un proyecto web de 0 a 100Un proyecto web de 0 a 100
Un proyecto web de 0 a 100
 
¿Qué es WordPress?
¿Qué es WordPress?¿Qué es WordPress?
¿Qué es WordPress?
 
El tamaño importa - JoomlaDay Sevilla 2015
El tamaño importa - JoomlaDay Sevilla 2015El tamaño importa - JoomlaDay Sevilla 2015
El tamaño importa - JoomlaDay Sevilla 2015
 
WPO para WordPress
WPO para WordPressWPO para WordPress
WPO para WordPress
 
Buenas prácticas para la optimización de sitios web
Buenas prácticas para la optimización de sitios webBuenas prácticas para la optimización de sitios web
Buenas prácticas para la optimización de sitios web
 
Drupal 7 para sitios de alto rendimiento y alta disponibilidad
Drupal 7 para sitios de alto rendimiento y alta disponibilidadDrupal 7 para sitios de alto rendimiento y alta disponibilidad
Drupal 7 para sitios de alto rendimiento y alta disponibilidad
 
Los 10 mandamientos del WPO
Los 10 mandamientos del WPOLos 10 mandamientos del WPO
Los 10 mandamientos del WPO
 

Más de JuanKa Díaz - jdevelopia

Introducción a los campos personalizados en WordPress con ACF
Introducción a los campos personalizados en WordPress con ACFIntroducción a los campos personalizados en WordPress con ACF
Introducción a los campos personalizados en WordPress con ACF
JuanKa Díaz - jdevelopia
 
Soporte en WordPress: cómo dar/obtener ayuda por Violeta Bru
Soporte en WordPress: cómo dar/obtener ayuda por Violeta BruSoporte en WordPress: cómo dar/obtener ayuda por Violeta Bru
Soporte en WordPress: cómo dar/obtener ayuda por Violeta Bru
JuanKa Díaz - jdevelopia
 
Introducción a WooComerce y cómo vender todo tipo de productos desde tu WordP...
Introducción a WooComerce y cómo vender todo tipo de productos desde tu WordP...Introducción a WooComerce y cómo vender todo tipo de productos desde tu WordP...
Introducción a WooComerce y cómo vender todo tipo de productos desde tu WordP...
JuanKa Díaz - jdevelopia
 
Introduccion a WooCommerce - eConference live
Introduccion a WooCommerce - eConference liveIntroduccion a WooCommerce - eConference live
Introduccion a WooCommerce - eConference live
JuanKa Díaz - jdevelopia
 
Como elegir un buen hosting para WordPress
Como elegir un buen hosting para WordPressComo elegir un buen hosting para WordPress
Como elegir un buen hosting para WordPress
JuanKa Díaz - jdevelopia
 
Desarrolla proyectos web con exito en base al software libre - Joomla Day Mad...
Desarrolla proyectos web con exito en base al software libre - Joomla Day Mad...Desarrolla proyectos web con exito en base al software libre - Joomla Day Mad...
Desarrolla proyectos web con exito en base al software libre - Joomla Day Mad...
JuanKa Díaz - jdevelopia
 
Lock in, como alma que lleva el diablo-semanawp2018
Lock in, como alma que lleva el diablo-semanawp2018Lock in, como alma que lleva el diablo-semanawp2018
Lock in, como alma que lleva el diablo-semanawp2018
JuanKa Díaz - jdevelopia
 
Word press, el software libre como punto de unión - Institut mare molas 2018
Word press, el software libre como punto de unión - Institut mare molas 2018Word press, el software libre como punto de unión - Institut mare molas 2018
Word press, el software libre como punto de unión - Institut mare molas 2018
JuanKa Díaz - jdevelopia
 
La importancia del contenido en tu web - WordPress Tarragona Meetup 2017
La importancia del contenido en tu web - WordPress Tarragona Meetup 2017La importancia del contenido en tu web - WordPress Tarragona Meetup 2017
La importancia del contenido en tu web - WordPress Tarragona Meetup 2017
JuanKa Díaz - jdevelopia
 
Introducción a WooCommerce - WordPress Tarragona Meetup 2018
Introducción a WooCommerce - WordPress Tarragona Meetup 2018Introducción a WooCommerce - WordPress Tarragona Meetup 2018
Introducción a WooCommerce - WordPress Tarragona Meetup 2018
JuanKa Díaz - jdevelopia
 
Lock in, como alma que lleva el diablo-word camp-las-palmas-2018-16-9
Lock in, como alma que lleva el diablo-word camp-las-palmas-2018-16-9Lock in, como alma que lleva el diablo-word camp-las-palmas-2018-16-9
Lock in, como alma que lleva el diablo-word camp-las-palmas-2018-16-9
JuanKa Díaz - jdevelopia
 
WordPress, el software libre como punto de unión - GDG Fest Tarragona-19-9-2018
WordPress, el software libre como punto de unión - GDG Fest Tarragona-19-9-2018WordPress, el software libre como punto de unión - GDG Fest Tarragona-19-9-2018
WordPress, el software libre como punto de unión - GDG Fest Tarragona-19-9-2018
JuanKa Díaz - jdevelopia
 
Páginas, entradas, cpt’s y otras cosas de wordpress wordcamp-zaragoza-2018
Páginas, entradas, cpt’s y otras cosas de wordpress wordcamp-zaragoza-2018Páginas, entradas, cpt’s y otras cosas de wordpress wordcamp-zaragoza-2018
Páginas, entradas, cpt’s y otras cosas de wordpress wordcamp-zaragoza-2018
JuanKa Díaz - jdevelopia
 
Hombres, mujeres, desarrolladores, clientes y viceversa word pressbarcelona...
Hombres, mujeres, desarrolladores, clientes y viceversa   word pressbarcelona...Hombres, mujeres, desarrolladores, clientes y viceversa   word pressbarcelona...
Hombres, mujeres, desarrolladores, clientes y viceversa word pressbarcelona...
JuanKa Díaz - jdevelopia
 

Más de JuanKa Díaz - jdevelopia (14)

Introducción a los campos personalizados en WordPress con ACF
Introducción a los campos personalizados en WordPress con ACFIntroducción a los campos personalizados en WordPress con ACF
Introducción a los campos personalizados en WordPress con ACF
 
Soporte en WordPress: cómo dar/obtener ayuda por Violeta Bru
Soporte en WordPress: cómo dar/obtener ayuda por Violeta BruSoporte en WordPress: cómo dar/obtener ayuda por Violeta Bru
Soporte en WordPress: cómo dar/obtener ayuda por Violeta Bru
 
Introducción a WooComerce y cómo vender todo tipo de productos desde tu WordP...
Introducción a WooComerce y cómo vender todo tipo de productos desde tu WordP...Introducción a WooComerce y cómo vender todo tipo de productos desde tu WordP...
Introducción a WooComerce y cómo vender todo tipo de productos desde tu WordP...
 
Introduccion a WooCommerce - eConference live
Introduccion a WooCommerce - eConference liveIntroduccion a WooCommerce - eConference live
Introduccion a WooCommerce - eConference live
 
Como elegir un buen hosting para WordPress
Como elegir un buen hosting para WordPressComo elegir un buen hosting para WordPress
Como elegir un buen hosting para WordPress
 
Desarrolla proyectos web con exito en base al software libre - Joomla Day Mad...
Desarrolla proyectos web con exito en base al software libre - Joomla Day Mad...Desarrolla proyectos web con exito en base al software libre - Joomla Day Mad...
Desarrolla proyectos web con exito en base al software libre - Joomla Day Mad...
 
Lock in, como alma que lleva el diablo-semanawp2018
Lock in, como alma que lleva el diablo-semanawp2018Lock in, como alma que lleva el diablo-semanawp2018
Lock in, como alma que lleva el diablo-semanawp2018
 
Word press, el software libre como punto de unión - Institut mare molas 2018
Word press, el software libre como punto de unión - Institut mare molas 2018Word press, el software libre como punto de unión - Institut mare molas 2018
Word press, el software libre como punto de unión - Institut mare molas 2018
 
La importancia del contenido en tu web - WordPress Tarragona Meetup 2017
La importancia del contenido en tu web - WordPress Tarragona Meetup 2017La importancia del contenido en tu web - WordPress Tarragona Meetup 2017
La importancia del contenido en tu web - WordPress Tarragona Meetup 2017
 
Introducción a WooCommerce - WordPress Tarragona Meetup 2018
Introducción a WooCommerce - WordPress Tarragona Meetup 2018Introducción a WooCommerce - WordPress Tarragona Meetup 2018
Introducción a WooCommerce - WordPress Tarragona Meetup 2018
 
Lock in, como alma que lleva el diablo-word camp-las-palmas-2018-16-9
Lock in, como alma que lleva el diablo-word camp-las-palmas-2018-16-9Lock in, como alma que lleva el diablo-word camp-las-palmas-2018-16-9
Lock in, como alma que lleva el diablo-word camp-las-palmas-2018-16-9
 
WordPress, el software libre como punto de unión - GDG Fest Tarragona-19-9-2018
WordPress, el software libre como punto de unión - GDG Fest Tarragona-19-9-2018WordPress, el software libre como punto de unión - GDG Fest Tarragona-19-9-2018
WordPress, el software libre como punto de unión - GDG Fest Tarragona-19-9-2018
 
Páginas, entradas, cpt’s y otras cosas de wordpress wordcamp-zaragoza-2018
Páginas, entradas, cpt’s y otras cosas de wordpress wordcamp-zaragoza-2018Páginas, entradas, cpt’s y otras cosas de wordpress wordcamp-zaragoza-2018
Páginas, entradas, cpt’s y otras cosas de wordpress wordcamp-zaragoza-2018
 
Hombres, mujeres, desarrolladores, clientes y viceversa word pressbarcelona...
Hombres, mujeres, desarrolladores, clientes y viceversa   word pressbarcelona...Hombres, mujeres, desarrolladores, clientes y viceversa   word pressbarcelona...
Hombres, mujeres, desarrolladores, clientes y viceversa word pressbarcelona...
 

Último

Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Domingo Suarez Torres
 
Manual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdfManual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdf
alejandroalcantaraut
 
Proteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptxProteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptx
eghurtadoc
 
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ... Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
rakeshsoni95123
 
Integracion Integligencia Artificial Generativa en STELA
Integracion  Integligencia Artificial Generativa en STELAIntegracion  Integligencia Artificial Generativa en STELA
Integracion Integligencia Artificial Generativa en STELA
Guillermo Talento
 
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptxEXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
LUCERODELVALLEPAZJIM
 

Último (6)

Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
 
Manual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdfManual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdf
 
Proteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptxProteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptx
 
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ... Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 
Integracion Integligencia Artificial Generativa en STELA
Integracion  Integligencia Artificial Generativa en STELAIntegracion  Integligencia Artificial Generativa en STELA
Integracion Integligencia Artificial Generativa en STELA
 
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptxEXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
 

¡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
  • 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
  • 7. • https://www.dariobf.com/podcast/
 • Podcast sobre diseño y desarrollo web en WordPress
 • Zona Crítica Post Type Podcast
  • 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.
  • 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
  • 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
  • 21. • 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
  • 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
  • 31. • Tamaños de imagen
 • Cuidado con la caché
 • NO cachear página de Carrito ni Checkout
 • Evitar cargar WooCommerce en todo WordPress
 • CDN
  • 32. 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 );
  • 33. 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
  • 34. El buen carpintero deja el mueble bien acabado tanto por la parte que se ve como por la que no. Anónimo