El documento proporciona información sobre la optimización del rendimiento de sitios web (WPO) para mejorar la velocidad y la experiencia del usuario. Explica conceptos como tiempos de carga y métricas, y ofrece consejos básicos como optimizar imágenes, archivos estáticos y plugins. También recomienda herramientas y recursos adicionales para llevar a cabo optimizaciones en distintas fases. El objetivo final es mejorar el rendimiento mediante medidas para acelerar la carga y la navegación en el sitio
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
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
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
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
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
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