Diapositivas presentadas por Francisco Siutti, Founder & CEO at Nodus Company, en el eCommerce Day Buenos Aires 2017.

1. #SPEEDMATTERS
La importancia de la velocidad
de carga en m-commerce
Francisco Siutti
Founder & CEO

3. De los usuarios abandonan
una web que tarde más de 3
seg para cargar
La velocidad en mobile es importante
porque es fundamental para los usuarios
53%
de los usuarios abandona
un sitio que tarda mucho
en cargar
70%
De los usuarios esperan que
un sitio cargue en <2 seg
47%

4. Performance web es
EXPERIENCIA DE USUARIO
Una web rápida, fluida y estable

5. Documento Privado y Confidencial
1 SEGUNDO DE DEMORA REPRESENTA
Disminución del 16% en satisfacción de los usuarios
Pérdida del 7% en conversiones
Disminución del 11% en visitas al sitio
AUMENTO DE LA TASA DE REBOTE
AUMENTO DE LA FRUSTRACIÓN
AFECTA EL RANKING SEO
IMPACTA TU IMAGEN DE MARCA
COSTOS DE UNA
MALA PERFORMANCE WEB
IMPACTA EN LOS USUARIOS
IMPACTA EN EL NEGOCIO

6. 180,000
160,000
140,000
120,000
100,000
80,000
60,000
40,000
20,000
0
1.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6
9.9
TIEMPO DE CARGA (SEG)
SESIONESEstudio “The State of retail” - Objetivo: Llevar el tiempo de carga total a la “zona óptima de conversión”
Sesiones Tasa de Conversión (%)
Fuente: SOASTA Case study

7. 0 2 4 6 8 10 12 14 16 18
Buena
experiencia
1 a 2s
Lento,
pero tolerable
3 a 6s
Mas vale que
valga la pena
7 a 10s
¡Al fin!
10s+
Test utilizando WPT - Nexus 5 from USA - 3G

8. ¡Aún queda mucho por hacer!

9. Primero necesitamos entender:
¿De qué depende la velocidad de carga?

10. ¿De qué depende la velocidad de carga?
Lado Front End
El tiempo que demora el usuario en
descargar y visualizar el contenido
Lado Servidor
El tiempo que demora en generar la página
Dispositivo
Composición Sitio
Rendimiento del
dispositivo
Velocidad
Conexión
INTERNET
Calidad de la red
Calidad del
código
Rendimiento
Servidor
Locación del
servidor
TIEMPO TOTAL DE CARGA
(X +Y)X Segundos Y Segundos
El servidor
La velocidad de carga depende de ambos lados funcionando en un estado óptimo.

11. ¿Dónde podemos trabajar para mejorar nuestra velocidad de carga?
RECURSOS SITIO
Codigo JS, CSS, HTML
Imágenes/Video
Fonts y Otros
THIRD PARTIES INFRAESTRUCTURA
Capacidad
Rendimiento
Locación
Ads
Social
Tracking
RED
Calidad de la red
Conexión Usuario
Dispositivo Usuario

12. Ok, entiendo..
Ahora.. ¿Por donde empiezo?

13. 3 simples pasos para mi
Estrategia de Performance web
1) Hacer un buen diagnóstico de la “Situación actual”
2) Optimizar, optimizar y optimizar
3) Medir mis resultados y seguir optimizando

14. KPIs:
- Quantity Based (Page size, requests, third parties)
- Rule Based (PSI/Lighthouse Score)
- Milestone Timings (Render Start/Visually complete, Load Time)
- User perception: Speed Index
1) Diagnóstico - Entendiendo mi performance actual
Synthetic & RUM testing

15. Situación Actual: Entender el Renderizado progresivo de mi sitio:
INICIO CARGA URL
16 SEG
- 3.8MB
- 203 requests
- 2,2MB Imagenes
- >30 scrypts third parties
- 33% perdidas estiamdas
por Test My Site
- Speed Index: 27000
INTERMITENCIAS DE CONTENIDOEL USUARIO VE UNA PANTALLA BLANCA POR 16s
PRIMERA VISUALIZACIÓN
DEL CONTENIDO
TIEMPO DE
CARGA FINAL
32.0 SEG0 SEG
Test utilizando WPT - Nexus 5 from USA - 3G
Objetivos
- Lograr un renderizado progresivo entregando contenido cada 1 segundo. Verse y sentirse rapido.
- Benchmark: 20% Rule
- Speed Index <1000

16. - Lograr un renderizado progresivo entregando
contenido cada 1 segundo.
- Benchmark: 20% Rule
- Speed Index <1000
Optimized
(progressive)
rendering
Unoptimized
rendering
0.0s 0.3s 0.8s 1.2s 1.5s
Objetivos y benchmark
Competidor 1 Chedraui Competidor 2
Test utilizando WPT - Nexus 5 from USA - 3G

17. RECURSOS SITIO
Código JS, CSS, HTML/Imágenes/Video/Fonts y Otros
Chrome Dev Tools
LightHouse Report

18. THIRD PARTIES
Ads, Social & Tracking
- A/B Testing por Third Party para entender el impacto sobre la performance.
- Costo/Beneficio
- Análisis de punto de falla (SPOF) - Dependencias críticas.
Estudiar el impacto que tienen los “Third Parties” sobre nuestra performance.
Httparchive.orgSoasta - “The State of retail”
http://requestmap.webperf.tools/

19. INFRAESTRUCTURA
Capacidad, Rendimiento & Locación
Distribución
usuarios
LATENCIA DE LA RED
La ubicación de nuestros usuarios es clave a la hora de definir las locaciones donde estará
alojado nuestro contenido.

20. INFRAESTRUCTURA
Capacidad, Rendimiento & Locación
Una simple prueba nos puede dar una idea
del impacto de la latencia de la red en
nuestro sistema. (Response Time)
¿Contratar o no un CDN?

21. 2) Optimizar, optimizar y optimizar
Incorporar dentro de nuestro backlog de trabajo las mejoras encontradas, siempre priorizando según esfuerzo vs impacto al negocio.
1. Optimizar las imágenes
2. Combinar los recursos
3. Especificar el caché de navegador
1. No cargar imágenes que el
usuario no visualiza
2. Habilite compresión con GZIP
3. Evite los redireccionamientos
4. Analisis Third parties
1. Minificar Recursos
2. Cargue el contenido visible
antes de los archivos CSS y JS
3. Cargue primero el contenido de
la mitad superior de la página
4. Latencia de la red
Recomendaciones
críticas y fácil de corregir
CRÍTICO IMPORTANTE
Recomendaciones
críticas y fáciles de
corregir
ÚTIL
Recomendaciones de
alto impacto que toman
un poco más de tiempo
para arreglar

22. 3) Medir mis resultados y seguir optimizando
- ESTABLECER UN PERFORMANCE BUDGET
● Quantity Based (Page size, requests)
● Rule Based (PSI/Lighthouse score)
● Milestone Timings (Render Start/Visually complete)
● Speed Index

23. #DESAFIO
Desarrollo
Negocio
“Vamos a implementar un
nuevo servicio para las
reviews en la ficha de
producto”
“Eso nos va a representar 2
llamadas mas y un peso total de
500kb”
Desarrollo
Marketing
“Necesitamos implementar 2
ad tracking nuevos para cada
página”
“Sumara nuevos request y
dependencias importantes”

24. A nuestros usuarios no les importa que tan rápido nuestro sitio SEA,
sino más bien que tan rapido se SIENTE

25. Francisco Siutti
Founder & CEO
fsiutti@noduscompany.com
@nodus_company
¡Muchas gracias!