1.
WPO para WooCommerce
#Monetiza20 @monchomad @SiteGround_ES

2.
“Si la velocidad es un problema, el
problema no es la velocidad.”
Mon
#Monetiza20 @monchomad @SiteGround_ES

3.
WPO= Website Performance Optimization
¿Qué objetivos tenemos que cumplir?
#Monetiza20 @monchomad @SiteGround_ES

4.
WPO= Website Performance Optimization
- Web rápida
- Fácil navegación
- Optimizada para cada dispositivo
- Todos sus recursos optimizados
#Monetiza20 @monchomad @SiteGround_ES

5.
¿Qué no es WPO?
- Quitar funcionalidades de negocio
- Optimizar una única página
- “Sensaciones”
- Obsesión por los indicadores
#Monetiza20 @monchomad @SiteGround_ES

6.
¿Por qué es importante la velocidad
en cualquier web o eCommerce?
#Monetiza20 @monchomad @SiteGround_ES

7.
La velocidad es dinero
pasta, plata, tela, parné, cuartos...
#Monetiza20 @monchomad @SiteGround_ES

8.
AliExpress redujo su tiempo de carga en un 36% y
observó un 10,5% de incremento en pedidos y un
incremento del 27% en la conversión en nuevos
clientes
Fuente: https://wpostats.com
#Monetiza20 @monchomad @SiteGround_ES

9.
Zalando registró un 0,7% de incremento de
beneficio cuando recortaron en 100ms. el tiempo de
carga de su web
Fuente: https://wpostats.com
#Monetiza20 @monchomad @SiteGround_ES

10.
Rediseñando páginas de Pinterest bajaron el tiempo
de carga un 40%. Se incrementó el tráfico SEO en un
15% y se mejoró el ratio de altas en un 15%.
Fuente: https://wpostats.com
#Monetiza20 @monchomad @SiteGround_ES

11.
En todos estos casos lo que se mejoró fue la
EXPERIENCIA DE USUARIO
#Monetiza20 @monchomad @SiteGround_ES

12.
Comencemos sabiendo medir
#Monetiza20 @monchomad @SiteGround_ES

13.
@monchomad @SiteGround_ES
Métricas, conceptos:
- TTFB (Time To First
Byte): mide el tiempo
que transcurre entre la
petición del usuario y
que el navegador
reciba el primer byte
del servidor.
#Monetiza20 @monchomad @SiteGround_ES

14.
@monchomad @SiteGround_ES
Métricas
Fuente: https://web.dev/optimize-lcp/
https://web.dev/optimize-fid/
https://web.dev/optimize-cls/
Determina cuándo el contenido principal
en la pantalla ha terminado de
renderizarse, bloque de texto o imagen
Mide el tiempo entre que un usuario
interactúa por primera vez con la web y lo
que tarda el navegador en responder
Mide visualmente la posición y
movimiento de todos los elementos de la
página durante la carga de la misma.

15.
@monchomad @SiteGround_ES
Métricas GTmetrix
TTFB: Redirect + Connect + Backend
#Monetiza20 @monchomad @SiteGround_ES

16.
@monchomad @SiteGround_ES
Métricas GTmetrix
First paint: Momento en el que el navegador pinta su primer renderizado
#Monetiza20 @monchomad @SiteGround_ES

17.
@monchomad @SiteGround_ES
Métricas GTmetrix
Contentful paint: Momento en el que el primer contenido aparece, texto, imagen…
#Monetiza20 @monchomad @SiteGround_ES

18.
@monchomad @SiteGround_ES
Métricas GTmetrix
DOM interactive time: Momento en el que ha terminado de cargar el
html y el DOM
#Monetiza20 @monchomad @SiteGround_ES

19.
@monchomad @SiteGround_ES
Métricas GTmetrix
DOM loaded: El DOM está preparado y no hay hojas de estilo bloqueando el JS.
#Monetiza20 @monchomad @SiteGround_ES

20.
@monchomad @SiteGround_ES
Métricas GTmetrix
Onload: Procesamiento completo de página y todos los recursos han sido cargados
#Monetiza20 @monchomad @SiteGround_ES

21.
Básicos del WPO
#Monetiza20 @monchomad @SiteGround_ES

22.
Comencemos con lo básico
WordPress
WooCommerce
#Monetiza20 @monchomad @SiteGround_ES

23.
Comencemos con lo básico
Fuente: HTTP archive
#Monetiza20 @monchomad @SiteGround_ES
3,48MB

24.
Áreas de optimización
Imágenes, video
Estáticos: (HTML, JS, CSS, fuentes)
Software (plugins, tema, WP, servidor web)
Entorno: (https, PHP, compresión, caché navegador,
CDN, DNS)
Bases de datos
#Monetiza20 @monchomad @SiteGround_ES

25.
Primer nivel de optimización
#Monetiza20 @monchomad @SiteGround_ES

26.
Optimización básica
Imágenes:
redimensionamos,
comprimimos, atención al
tipo de fichero
Estáticos:
minimizamos
HTML, JS,
CSS, SVG
Software: últimas
versiones de plugins,
tema, WordPress y
WooCommerce
Video: Fuera del
hosting
Entorno: https, HTTP/2 + QUIC, versión de
PHP, activamos Gzip/Brotli, caché de
navegador y CDN, validación de caché.
Servidor: activamos
caché dinámica con
las exclusiones
(carrito, checkout,...),
reducir redirecciones
Plugins eliminar
plugins no
usados
WordPress: nº de posts que
se muestran, deshabilita
pingbacks, optimizar nº de
comentarios. Full caché para
páginas estáticas
Woo:
¿revisiones
de
productos?
Medimos en cada paso el rendimiento y
contamos con un tema rápido que se
ajusta a nuestras necesidades
#Monetiza20 @monchomad @SiteGround_ES

27.
Optimización básica, herramientas
Imágenes: TinyJPG,
compressor.io, Kraken,
Image optimizer
Estáticos:
Autoptimize
Software: escritorio de
WordPress y panel de
hosting
Video: incrustar
videos en la web
alojándolos en
YouTube, Vimeo...
Entorno: Panel de control del proveedor de
hosting, código o plugin, activar CDN en su
web o desde el prov. Hosting, ejemplo
CloudFlare, KeyCDN
Servidor: plugins de
caché: WP Super
Cache, W3, WP fastest
cache, etc...
Plugins eliminar
plugins no usados
desde el escritorio
de WP
WordPress:
ajustes-lectura
WooCommerce:
ajustes Para estas operaciones: WP Rocket de
pago, o SG Optimizer gratuito
#Monetiza20 @monchomad @SiteGround_ES

28.
Segundo nivel de optimización
#Monetiza20 @monchomad @SiteGround_ES

29.
Optimización fase dos
Estáticos: Aplazar (Defer) o asíncrona para
CSS y JS no críticos, Incrustar (Inline) CSS y
JS para los críticos. Carga condicional de
JS y CSS
Software: Versión de
servidor web
Base de datos:
Limpiar BBDD
(wp_options).
Limpiar
transitorios
caducados.
Limitar y borrar
revisiones
antiguas.
Entorno: precarga de DNS´s externas. APO
de CloudFlare
Servidor: caché de
objetos. Cron wp a
cron del servidor
WordPress+WooCommerce: Desactivar
scripts Woo donde no hagan falta, carga
condicional de plugins. Heartbeat Medimos en cada paso el rendimiento
#Monetiza20 @monchomad @SiteGround_ES

30.
Optimización fase dos, herramientas
Estáticos: Autoptimize, Async JavaScript,
JS & CSS Script Optimizer, Perfmatters
Software: Últimas
versiones de Apache,
Nginx.
Base de datos:
Crear índice en
wp_options, Index
Autoload.
WP-Optimize,
Clean up Booster,
Advanced
Database Cleaner,
WP-Sweep
Entorno: (precarga DNS’s externas)
Identificarlas (GTmetrix), precargar en
cabecera, mediante función o con Flying
Scripts
Servidor: WP Super
Cache, W3, WP fastest
cache... Desactivar
WP-Cron, crearlos en
tu panel de control de
tu proveedor de
hosting
WordPress+WooCommerce: Código,
Perfmatters o Script Dequeuer. Heartbeat:
WPO Tweaks
Para estas operaciones: WPO Tweaks, WP
Rocket de pago, o SG Optimizer gratuito
#Monetiza20 @monchomad @SiteGround_ES

31.
Fase 3 y posteriores
#Monetiza20 @monchomad @SiteGround_ES

32.
#Monetiza20 @monchomad @SiteGround_ES
Fase 3 y posteriores
- Microcaché
- Fullpage caché condicional por cookie
- Server Push
- Query caché
- Enrutado dinámico
- ...
Source: @fpuenteonline

33.
Extras
#Monetiza20 @monchomad @SiteGround_ES

34.
Extras
- Escoge un proveedor de hosting
especializado en WordPress y
WooCommerce y pregunta por las
herramientas de optimización incluidas en
sus productos
- Producto de hosting adecuado, no seas
rácano/a
- Elimina de tu hosting pruebas, contenido
no asociado a tu web.
#Monetiza20 @monchomad @SiteGround_ES

35.
Extras
- Elimina widgets innecesarios, comentarios
y spam, plugins innecesarios, todo lo que
no apoye el negocio de tu web, fuera.
- Mobile First, pero en serio. Preferencia para
PWA
- Evita las redirecciones en la medida de lo
posible
#Monetiza20 @monchomad @SiteGround_ES

36.
Extras
- Evita a los cuñados y a los inforñapas
- Actualiza todo
- Mide todo
#Monetiza20 @monchomad @SiteGround_ES

37.
Recursos
#Monetiza20 @monchomad @SiteGround_ES

38.
Suite de optimización
SG Optimizer:
https://es.wordpress.org/plugins/sg-cachepress/
Más de un millón de instalaciones activas
#Monetiza20 @monchomad @SiteGround_ES

39.
Plugin de optimización
WPO Tweaks:
https://es.wordpress.org/plugins/wpo-tweaks/
Del increíble e inigualable Fernando Tellado :-)
#Monetiza20 @monchomad @SiteGround_ES

40.
eBooks de SiteGround
- Cómo optimizar WordPress
https://www.siteground.es/ebook-wordpress
- Seguridad WordPress
https://www.siteground.es/ebook-seguridad-wordpress
- WooCommerce:
https://www.siteground.es/ebook-woocommerce
#Monetiza20 @monchomad @SiteGround_ES

41.
eBooks de SiteGround
Y mucho más en el pie de página de
https://siteground.es
#Monetiza20 @monchomad @SiteGround_ES

42.
Documentación de WPO
Todo lo incluído en la presentación, así como tutoriales
paso a paso de cada estrategia puedes encontrarlo en:
https://ayudawp.com
Sección WPO
#Monetiza20 @monchomad @SiteGround_ES

43.
Videos
Canal de YouTube de SiteGround España (videos de WPO y mucho más)
https://www.youtube.com/c/SitegroundEspana
#Monetiza20 @monchomad @SiteGround_ES

44.
@monchomad @SiteGround_ES
eBooks de SiteGround
Mención especial: el mayor eBook de SEO en español
https://www.siteground.es/ebook-posicionamiento-seo

45.
#Posiciona20 @monchomad @SiteGround_ES
José Ramón Padrón
@monchomad
Country Manager Spain at
Co-org. Meetup Las Palmas
Co-org. WordCamp Gran Canaria
WCEU 2021: Global Lead
Mentor de WordCamps en LatAm
#Monetiza20 @monchomad @SiteGround_ES

46.
¡GRACIAS!
#Monetiza20 @monchomad @SiteGround_ES