1 of 61

Hosting, optimización y WPO para eCommerce

José Ramón Padrón

@monchomad

EDICIÓN E-COMMERCE

2 of 61

EDICIÓN E-COMMERCE

“Democratizando la publicación web y el eCommerce”

Responsable de comunidades hispanohablantes y crecimiento en Automattic

Co-organizador del grupo de Meetup WordPress Las Palmas

Mentor de WordCamps en el equipo global de comunidad WordPress

@eswordpresscom

Galego de Ourense, vivo en Gran Canaria. Mi hija Iria lo primero, perros, caballos, syntes, metal, y buena comida.

​

Mon Padrón

#WCBOGOTA

@monchomad

3 of 61

¿Qué vamos a ver hoy?

Experiencia de usuario, CWV, conceptos

WPO, estrategias y tácticas

Hosting y rendimiento

EDICIÓN E-COMMERCE

#WCBOGOTA

4 of 61

Experiencia de usuario

EDICIÓN E-COMMERCE

#WCBOGOTA

5 of 61

Conjunto de percepciones y respuestas de los usuarios al interactuar con un producto o servicio.

Experiencia de usuario

EDICIÓN E-COMMERCE

#WCBOGOTA

6 of 61

Conjunto de percepciones y respuestas de los usuarios al interactuar con un producto o servicio.

Experiencia de usuario

EDICIÓN E-COMMERCE

#WCBOGOTA

7 of 61

Core

Web

Vitals

EDICIÓN E-COMMERCE

#WCBOGOTA

Sin intersticiales intrusivos

RENDIMIENTO

Largest Contentful Paint (LCP)

INTERACTIVIDAD

Interaction to Next Paint (INP)

ESTABILIDAD

Cumulative Layout Shift (CLS)

Adaptada a móviles

Navegación segura

HTTPS

Señales de búsqueda para la experiencia de página

8 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Core

Web

Vitals

9 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

10 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

11 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

12 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

LCP

Tiempo de respuesta lento del servidor

  • DNS, CDN, Caché, minimización de recursos estáticos.

JavaScript y CSS que bloquean el renderizado

  • Aplazar la carga de Js no esencial y minimizar el uso de CSS.
  • Utilizar técnicas como async o defer para scripts.

Tiempos de carga de recursos lentos

  • Comprimir imágenes sin perder calidad para mejorar la velocidad de carga.
  • Especificar dimensiones de las imágenes para evitar cambios de diseño inesperados
  • Formatos de última generación (WebP, AVIF)
  • Lazy Load de recursos BTF

​

Renderizado lento por parte del cliente

  • Reducir el trabajo en el hilo principal del navegador optimizando el código Js y CSS.
  • Implementar técnicas de carga diferida para imágenes y otros recursos multimedia

​

13 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

INP

JavaScript pesado

  • Minimizar y diferir la carga de Js no esencial para mejorar los tiempos de respuesta.
  • Utilizar técnicas de carga asíncrona para scripts, permitiendo que el contenido principal se renderice sin esperar a que todo el Js se cargue.
  • Añadir CDN y compresión.

Recursos que bloquean el renderizado

  • Reducir el tamaño de CSS y Js, y cargarlos de manera que no bloqueen el renderizado.
  • Utilizar herramientas para compactar y optimizar estos recursos.

Tiempos de respuesta del servidor lentos

  • Implementar técnicas de caché y usar redes de entrega de contenidos (CDNs) para acelerar la entrega de contenido.
  • Optimizar la base de datos y mejorar la infraestructura del servidor para reducir la latencia.
  • Configuración y recursos del servidor
  • Eliminar redirecciones innecesarias

​

Carga ineficiente de recursos

  • Optimizar imágenes con formatos de última generación
  • Lazy load de todo lo que esté BTF
  • CDN
  • Caché de navegador

​

14 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Web

vs. eCommerce

15 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Consumos

​

Recursos Web

Recursos Base de Datos

Recursos Web

Recursos Base de Datos

16 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Recursos Web

Recursos Base de Datos

WEB

e-Commerce

Recursos Web

Recursos Base de Datos

17 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Web vs. e-Commerce

​

Mayor carga de contenido dinámico

Bases de datos más complejas

Seguridad extra y transacciones

Integraciones de terceros

Comportamiento del tráfico web

Contenido personalizado por usuario

18 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

WPO

19 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Qué es WPO

​

Conjunto de técnicas y acciones recurrentes, y de herramientas destinadas a optimizar el rendimiento de un sitio web para que los usuarios y los motores de búsqueda puedan interactuar con él de manera rápida y eficiente.

20 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

  • No es una única herramienta, o un único proceso acotado.
  • Conseguir un 100/100.
  • Obsesión por los indicadores.
  • No es únicamente velocidad.

Qué no es WPO

21 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Es un proceso continuo

  • Evaluación inicial

22 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Es un proceso continuo

  • Evaluación inicial
  • Estrategias y tácticas

23 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Es un proceso continuo

  • Evaluación inicial
  • Estrategias y tácticas
  • Implementación

24 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Es un proceso continuo

  • Evaluación inicial
  • Estrategias y tácticas
  • Implementación
  • Testeo, pruebas y ajustes

25 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Es un proceso continuo

  • Evaluación inicial
  • Estrategias y tácticas
  • Implementación
  • Testeo, pruebas y ajustes
  • Monitorización

26 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Estrategias principales

  • Optimización de imágenes

27 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Estrategias principales

  • Minimización de recursos

​

28 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Estrategias principales

  • Uso de redes de distribución de contenidos (CDN)

​

29 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Estrategias principales

  • Uso de caché

​

30 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Estrategias principales

  • Carga selectiva de plugins

​

31 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Estrategias principales

  • Herramientas de medición

​

32 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Hosting y rendimiento

33 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Centros de datos

Capacidad

tecnológica

Entorno

  • Ubicación
  • Cantidad
  • Interconexión
  • CDN propia
  • Escalabilidad
  • Cloud
  • Redundancia
  • Familias de producto
  • Software de servidor
  • Tuning de sistemas
  • Actualizaciones
  • GZip-Brotli
  • HTTP/2+QUIC, HTTP/3
  • SSL/TLS
  • Caché
  • CDN propia

34 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Centros de datos

  • Ubicación
  • Cantidad
  • Interconexión
  • CDN propia

Fuente: https://gigazine.net/gsc_news/en/20210228-global-internet-map-2021/

35 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Centros de datos

  • Ubicación
  • Cantidad
  • Interconexión
  • CDN propia

Fuente: wordpress.com

36 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Centros de datos

  • Ubicación
  • Cantidad
  • Interconexión
  • CDN propia

Fuente: https://www.siteground.es/centros-de-datos

37 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Capacidad

tecnológica

  • Escalabilidad
  • Cloud
  • Redundancia
  • Familias de producto
  • Software de servidor
  • Tuning de sistemas

38 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Capacidad

tecnológica

  • Escalabilidad
  • Cloud
  • Redundancia
  • Familias de producto
  • Software de servidor
  • Tuning de sistemas

Compartido

Shared hosting

39 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Capacidad

tecnológica

  • Escalabilidad
  • Cloud
  • Redundancia
  • Familias de producto
  • Software de servidor
  • Tuning de sistemas

CPU

RAM

Escalado vertical

Virtual, VPS

Elástico

Cloud Hosting

Escalado horizontal

40 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Capacidad

tecnológica

  • Escalabilidad
  • Cloud
  • Redundancia
  • Familias de producto
  • Software de servidor
  • Tuning de sistemas

“Managed Hosting”

41 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Capacidad

tecnológica

  • Escalabilidad
  • Cloud
  • Redundancia
  • Familias de producto
  • Software de servidor
  • Tuning de sistemas

A medida, Enterprise

42 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Entorno

  • Actualizaciones
  • GZip-Brotli
  • HTTP/2+QUIC, HTTP/3
  • SSL/TLS
  • Caché
  • CDN propia

43 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Entorno

  • Actualizaciones
  • GZip-Brotli
  • HTTP/2+QUIC, HTTP/3
  • SSL/TLS
  • Caché
  • CDN propia

Fuente: https://paulcalvano.com/2024-03-19-choosing-between-gzip-brotli-and-zstandard-compression/

44 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Entorno

  • Actualizaciones
  • GZip-Brotli
  • HTTP/2+QUIC, HTTP/3
  • SSL/TLS
  • Caché
  • CDN propia

Fuente: https://blog.apnic.net/2023/09/25/why-http-3-is-eating-the-world/

45 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Entorno

  • Actualizaciones
  • GZip-Brotli
  • HTTP/2+QUIC, HTTP/3
  • SSL/TLS
  • Caché
  • CDN propia

Fuente: https://medium.com/@jayampathiadhikari/ssl-tls-simplified-c3c1f08051b2

46 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Entorno

  • Actualizaciones
  • GZip-Brotli
  • HTTP/2+QUIC, HTTP/3
  • SSL/TLS
  • Caché
  • CDN propia
  • Caché del proveedor de hosting
  • Plugin de caché
  • Suites de optimización

47 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Entorno

  • Actualizaciones
  • GZip-Brotli
  • HTTP/2+QUIC, HTTP/3
  • SSL/TLS
  • Caché
  • CDN propia
  • CDN del proveedor de hosting
  • O: integración en su panel de control

48 of 61

EDICIÓN E-COMMERCE

#WCBOGOTA

Resumiendo

49 of 61

  • Todo ha de estar centrado en el usuario.
  • CTAs orientados a que el usuario no tenga que pensar, sino actuar.
  • Quita todo lo que sobre o no aporte, y cuando lo hayas hecho, déjalo en la mitad.

Experiencia de usuario

EDICIÓN E-COMMERCE

#WCBOGOTA

50 of 61

  • Basa tu estrategia de optimización en datos de negocio, no sólamente técnicos
  • Recuerda que es una rutina, no un único proceso.
  • Si no tienes tiempo, contrata el servicio.

WPO

EDICIÓN E-COMMERCE

#WCBOGOTA

51 of 61

  • Contrata servicios de hosting especializados en WordPress.
  • Revisa qué tecnología ofrecen, ahorrarás recursos.
  • El hosting barato perjudica seriamente tu salud.

Hosting

EDICIÓN E-COMMERCE

#WCBOGOTA

52 of 61

Gracias

Preguntas?

EDICIÓN E-COMMERCE

#WCBOGOTA

53 of 61

NOTA DE IMPACTO / ESTADISTICA

Content marketing is a commitment, not a campaign.

FUENTE

54 of 61

EDICIÓN E-COMMERCE

La solución

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus aliquam ipsum, vel placerat mauris dapibus vitae. Aenean eu placerat

Photo Product

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus aliquam ipsum, vel placerat mauris dapibus vitae. Aenean eu placerat

Video Product

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus aliquam ipsum, vel placerat mauris dapibus vitae. Aenean eu placerat

Social Media

#WCBOGOTA

55 of 61

WHAT SETS

US APART?

INNOVATION AND QUALITY

Presentations are communication tools that can be used as demonstrations, lectures, speeches, reports, and more

Fuente imagen

56 of 61

Resultados

11

Easy to Use

Modern Design

HD Display

User Friendly

EDICIÓN E-COMMERCE

#WCBOGOTA

57 of 61

PROPOSAL OUTLINE

KEY DISCUSSION POINTS

Our Story

Our Mission and Vision

The McDowell Brand

Our Current Online Presence

McDowell in a Nutshell

Important Things to Remember

Our New Voice

Social Media Roll Out

58 of 61

Consultas?

@miusuario

Linkedin

hello@reallygreatsite.com

Email

EDICIÓN E-COMMERCE

#WCBOGOTA

59 of 61

Gracias

Preguntas?

EDICIÓN E-COMMERCE

#WCBOGOTA

60 of 61

Use these free, recolourable icons and illustrations in your Canva design.

Recursos

61 of 61

Use these free, recolourable icons and illustrations in your Canva design.

Recursos