WPO WooCommerce optimizar web

WPO para WooCommerce
#Monetiza20 @monchomad @SiteGround_ES

“Si la velocidad es un problema, el
problema no es la velocidad.”
Mon

WPO= Website Performance Optimization
¿Qué objetivos tenemos que cumplir?

WPO= Website Performance Optimization
- Web rápida
- Fácil navegación
- Optimizada para cada dispositivo
- Todos sus recursos optimizados

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

¿Por qué es importante la velocidad
en cualquier web o eCommerce?

La velocidad es dinero
pasta, plata, tela, parné, cuartos...

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

Zalando registró un 0,7% de incremento de
beneﬁcio cuando recortaron en 100ms. el tiempo de
carga de su web

Rediseñando páginas de Pinterest bajaron el tiempo
de carga un 40%. Se incrementó el tráﬁco SEO en un
15% y se mejoró el ratio de altas en un 15%.

En todos estos casos lo que se mejoró fue la
EXPERIENCIA DE USUARIO

Comencemos sabiendo medir

@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.

Métricas
Fuente: https://web.dev/optimize-lcp/
https://web.dev/optimize-ﬁd/
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.

Métricas GTmetrix
TTFB: Redirect + Connect + Backend

Métricas GTmetrix
First paint: Momento en el que el navegador pinta su primer renderizado

Métricas GTmetrix
Contentful paint: Momento en el que el primer contenido aparece, texto, imagen…

Métricas GTmetrix
DOM interactive time: Momento en el que ha terminado de cargar el
html y el DOM

Métricas GTmetrix
DOM loaded: El DOM está preparado y no hay hojas de estilo bloqueando el JS.

Métricas GTmetrix
Onload: Procesamiento completo de página y todos los recursos han sido cargados

Básicos del WPO

Comencemos con lo básico
WordPress
WooCommerce

Comencemos con lo básico
Fuente: HTTP archive
3,48MB

Á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

Primer nivel de optimización

Optimización básica
Imágenes:
redimensionamos,
comprimimos, atención al
tipo de ﬁchero
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

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

Segundo nivel de optimización

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

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)
Identiﬁcarlas (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

Fase 3 y posteriores

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

Extras

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.

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

Extras
- Evita a los cuñados y a los inforñapas
- Actualiza todo
- Mide todo

Recursos

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

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

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

Y mucho más en el pie de página de
https://siteground.es

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

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

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

#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

¡GRACIAS!

WPO WooCommerce optimizar web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à WPO WooCommerce optimizar web

Similaire à WPO WooCommerce optimizar web (20)

Plus de SiteGround España

Plus de SiteGround España (20)

Dernier

Dernier (9)

WPO WooCommerce optimizar web