Nodus - Performance en Mobile web

1. Performance en Mobile Web
Mejores prácticas y nuevas tecnologías
Francisco Siutti
Founder & CEO @NodusCompany

3. Desktop - Mobile Web - Mobile App

4. Mobile Web vs Mobile Apps

5. Acceso desde navegador Acceso luego de la instalación
Navegación estática Navegación interactiva
Requiere conexión No requiere conexión
Funcionalidades limitadas Funcionalidades nativas
Mobile Web Tradicional Mobile App Nativa

6. ¿Por qué los usuarios prefieren las apps?
60% CONVENIENCIA
57% VELOCIDAD
40% DATOS GUARDADOS
44%
33%
23%
eCommerce Sales Time Spent
87%
13%

7. Engagement
Reach

8. Engagement
Reach

9. Performance en mWeb es
EXPERIENCIA DE USUARIO
Una Mobile web
rápida, fluida y estable

10. Diseño no es como se ve
sino cómo funciona
Claves para lograr una buena web
mobile Performance

11. Rapida
La importancia de la
velocidad de carga
Confiable
offline
Atractiva
Diseño y usabilidad
Segura
Dar una buena impresión

12. Rapida
La importancia de la
velocidad de carga

13. La velocidad en mobile es
importante porque es fundamental
para los usuarios
53%
De los usuarios abandonan una web que
tarde más de 3 seg para cargar
70%
de los usuarios abandona un sitio
que tarda mucho en cargar
47%
De los usuarios esperan que un
sitio cargue en <2 seg
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
La velocidad en mobile es
importante porque es fundamental
para tu negocio
COSTOS DE UNA MALA PERFORMANCE WEB
● Aumento de la tasa de rebote
● Aumento de la frustración
● Afecta el ranking seo
● Impacta tu imagen de marca

14. 0 2 4 6 8 10 12 14 16 18
Test utilizando WPT - Nexus 5 from USA - 3G

15. Primero necesitamos entender: ¿Cómo medimos la velocidad de carga?

16. Entender el Renderizado progresivo de mi sitio:
INICIO CARGA URL
16 SEG
- 3.8MB
- 203 requests
- 2,2MB imágenes
- >30 scripts third parties
- 33% pérdidas estimadas
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
Objetivos
● Lograr un renderizado progresivo entregando contenido cada 1 segundo. Verse y sentirse rapido.
● Benchmark: 20% Rule
● Speed Index <1000

17. ¿De qué depende la velocidad de carga?

18. 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
¿Dónde NO podemos trabajar para mejorar nuestra velocidad de carga?

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

20. THIRD PARTIES
Ads, Social & Tracking
Estudiar el impacto que tienen los “Third Parties” sobre nuestra performance.
Soasta - “The State of retail” Httparchive.org
- 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.
http://requestmap.webperf.tools/

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

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

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

24. Adentrándonos en la Web Moderna
Elevando la vara de las experiencias en mobile web
Rapida
La importancia de la
velocidad de carga
Confiable
Offline
Atractiva
Diseño y usabilidad

25. Bienvenidos a la web
moderna - AMP
AMP Accelerated Mobile Pages es un proyecto que apunta a
acelerar la entrega de contenido a utilizando un código
restringido llamado AMP HTML.
Es una librería que permite crear sitios que cargan (y pre-
renderizan en Google Search, Twitter, Linkedin y muchas
mas plataformas) mucho más rápido.

26. 0.0 6.0 8.5 11.5 26.5
White Screen First Paint FMP Visually Complete Fully Loaded
Usuario dirigido a la
versión no AMP del sitio.
Con AMP se mejora
drásticamente la velocidad de
carga del sitio.
1
Visually complete
2/3
Fully Loaded

27. Comienza con una búsqueda Cautiva a tus visitas Proceso de checkout fluido
Las AMP lucen el logo otorgado por
Google que certifica la carga instantánea
La carga inmediata mantiene a los
visitantes en la senda hacia la compra
Todas las acciones realizadas sobre una
AMP dirigen al usuario al sitio de una
manera rápida y fluida.
A B C

28. AMP en Retail

29. AMP for Advertisers

30. AMP for Gmail

31. www.ampproject.com

32. Bienvenidos a la “appificación” de la web - PWA
Local cachingAdd to
HomeScreen*
Push
Notifications
Available
offline

33. PWA - Diferentes estrategias:
Desarrollo de cero
Mejoras sobre el sitio existente
Comenzar con una única funcionalidad

35. Usuarios pueden acceder al
boarding pass de manera offline
Notificaciones
push

36. ¡Muchas gracias!
Francisco Siutti
fsiutti@noduscompany.com
Founder & CEO @NodusCompany