Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)

Recuerda nuestro hashtag!
#CLINICSEO @CamaradeMadrid @SiteGround_ES

Cómo mejorar la
velocidad de tu web
@TICNegocios

José Ramón Padrón
@monchomad
Country Manager Spain at
Co-org. Meetup Las Palmas
Co-org. WordCamp Gran Canaria
WCEU2021: Global leader
@TICNegocios

Industria US UK Alemania
Automóvil 9.5’’ 12.3’’ 11.0’’
Media 9’’ 8.8’’ 7.6’’
Retail 9.8’’ 10.3’’ 10.3’’
Viajes 10.1’’ 10.9’’ 7.1’’
@TICNegocios

Índice de velocidad:
- Escritorio: 4.7’’
- Móvil: 11,4’’
- Óptimo: 3’’
Fuente: backlinko.com
@TICNegocios

@TICNegocios

Google dice:
“El 53% de las visitas de móvil
abandonan después de 3 segundos
de espera [Google DoubleClick]”
@TICNegocios

Google dice:
“500ms de incremento en la carga
de página provoca un 25% menos
de búsquedas”
Fuente: https://wpostats.com
@TICNegocios

Caso
“Furnspace redujo en un 86% el tamaño de sus
imágenes dando lugar a una reducción del tiempo
de carga de un 65%. Esta mejora en la experiencia
de usuario dobló su ratio de conversión, recortó la
tasa de rebote en un 20%, incrementó los
ingresos por móvil un 7%, y mejoró drásticamente
su ranking SEO”
@TICNegocios

Hablando de cifras:
En Etam bajaron el tiempo de carga de su home de
1,2’’ a 0,5’’ y consiguieron:
- Aumentar las conversiones en un 20%
- 21% de aumento de tiempo en página
- 28% + de páginas vistas
@TICNegocios

Herramientas de medición:
- Consola de Chrome
- gtmetrix.com
- pingdom tools
- webpagetest
@TICNegocios

- TTFB (Time to ﬁrst Byte)
- FCP (First Contentful Paint)
- Time to Interactive
- Onload time
- LCP (Largest Contentful Paint)
@TICNegocios

Factores relevantes en la
velocidad de un proveedor de
hosting
@TICNegocios

Hosting y velocidad
- Ubicación de los centros de datos
- Tipo de hardware e infraestructura (redes y
servidores/plataforma)
- Planteamiento de sistemas
- Software y entorno
@TICNegocios

Ubicación de los CCDD y conectividad
@TICNegocios

- La ubicación es importante, ver:
https://www.interxion.com/es/Productos/Interconexion/puntos-neutros-de-internet
- La conectividad y redundancia contratada por
el proveedor de hosting es importante
- Los proveedores de CDN ayudan donde no hay
presencia de CD.
Ubicación de los CCDD y conectividad
@TICNegocios

Hardware/infraestructura
- Calidad del hardware
- Cuota de renovación
- Plataformas de terceros
Taylor Vick on
Unsplash

Planteamiento de sistemas
Web
Contenido
BBDD
Servicios
Web
Contenido
Servicios
BBDD Web BBDD Contenido
Servicios
- Estructura de servicio y producto frente a
velocidad
- Redundancia entre CCDD y escalado
gracias a tecnología cloud
- Conﬁguración/tuning de sistemas
@TICNegocios

Software y entorno
- Catálogo de versiones
- ¿Últimas versiones disponibles, cuándo?
- Versión PHP, servidor web, MySQL...
- SSL/ HTTP/2-QUIC
- Caché de navegador
- GZIP/Brotli
- Sistema de caché
- ¿CDN integrado?
@TICNegocios

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

Estrategias de
optimización
@TICNegocios

¿Qué es optimización?
Web rápida
Web fácil de navegar
Optimizada para cada dispositivo
Recursos optimizados
@TICNegocios

Beneﬁcios principales
Mejor experiencia de usuario
Mejor posicionamiento
Mayor conversión
Menores costes
@TICNegocios

¿Qué NO es optimización?
100/100 en Google PageSpeed
Una web inútil o sin recursos
@TICNegocios

Zonas de optimización
- Software
- Entorno
- Imágenes
- Estáticos-código
- Hosting
- Base de datos
@TICNegocios

Ejemplo: Imágenes
Redimensionamiento
600px by 600px; Size - 99.8KB
200px by 200px; Size - 20.7KB
Source:https://imagekit.io/demo/5-image-optimization-website-mobile-website-examples
@TICNegocios

Ejemplo: Imágenes
1920px by 1080px; Size - 377KB, comprimida
800px by 450px; Size - 70.3KB comprimida
Source:https://imagekit.io/demo/5-image-optimization-website-mobile-website-examples
@TICNegocios

- Escogiendo el formato correcto
JPG: 600px by 600px; Size - 99.8KB
PNG: 600px by 600px; Size - 217KB
WebP: 600px by 600px; Size - 56.2KB
@TICNegocios

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

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

Optimización fase dos
Estáticos: Aplazar (Defer) o asíncrona para
CSS no críticos y JS, Incrustar (Inline) CSS
críticos y JS. 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
@TICNegocios

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 (header.php
hijo) 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
- Microcaché
- Fullpage caché condicional por cookie
- Server Push
- Query caché
- Enrutado dinámico
- ...
@TICNegocios

Información extra sobre optimización:
https://ayudawp.com/categoria/wpo/
Webinars: próximos 4 y 5 de mayo: suscríbete aquí
Suscribíos a nuestro canal de YouTube:
https://www.youtube.com/c/SitegroundEspana

Caso de éxito: Hosting compartido
Hosting compartido
Gran optimización
440.000 visitas/mes
1,2 MM páginas vistas
2 sitios web
Picos de tráﬁco
https://www.exprimeviajes.com/
@TICNegocios

¿PREGUNTAS?
@TICNegocios

jose.ramon@siteground.com
@monchomad

Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)

Semelhante a Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid) (20)

Mais de SiteGround España

Mais de SiteGround España (20)

Último

Último (15)

Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)