NetLab 2016. UI & Web Performance

1. Diego Ferreiro Val
@diervo
Software Architect, Salesforce
UI and Web Performance
Qué es, cómo se mide, y porqué es importante.

2. Descubriendo la importancia
del rendimiento en la web

3. 600M searches x day
~7000 searches x second

4. 0.1% 99.9%

5. CONTROL (99.9% traffic)
VARIACION (0.1% traffic)
CONVERSIONRATE

6. Todavía no estás
convencido?

7. http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html

8. “Amazon found every 100ms of latency
cost them 1% in sales”
“Google found an extra .5 seconds in
search page generation time dropped
traffic by 20%.“

9. https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

10. Parsers, lexers, layers, render trees, ...
(dragons be here)
GPU acceleration, multi-core optimization, RAM usage, ...
Latency, bandwidth, protocols, ...
JavaScript speed, ASM, GC performance, ...
Selector matching, style calculation, layout, painting, ...
visits, engagement, conversions, ...
https://developers.google.com/web/fundamentals/performance

11. Es todo rendimiento técnico?

12. Muchas peculiaridades características!

13. Retraso Reacción del usuario
0 - 100 ms Instantaneo
100 - 300 ms Se percibe un pequeño retraso
300 - 1000 ms Todavía con la actividad en mente, se percibe retraso
1 s+ Cambio de contexto en nuestra mente
10 s+ Ya mañana ...
Same across all mediums and platforms.
Speed, performance and human perception
Reacciones a tareas en el tiempo: intent → action → response

14. Procesado visual y de audio...
24 FPS (~40 ms) FPS de percepción mínima
60 FPS (~16 ms) Experiencia perfecta
1+ ms jitter Discontinuidad audible

15. Rendimiento percibido = f(Rendimiento esperado, UX, Rendimiento actual)
Pegamento

16. El rendimiento no son solo milisegundos,
frames o megabytes. Sino como esos
milisegundos frames y megabytes se
trasladan a cómo el usuario percibe la
aplicación.

17. Quién es el responsable?
Desarrollador, Diseñador Visual, Diseñador de interacciones?
Todos!
Rendimiento es la función f() de todas las variables.
Rendimiento percibido = f(Rendimiento esperado, UX, Rendimiento actual)

18. Técnicamente, es rápido:
● 10kb de HTML
● 3kb de CSS
● 500 bytes de GIFs (3 ficheros)
● Render < 500ms
La experiencia: Horrible!
● Doble-clicks, pinch zoom, pan, …

19. Quiero saber las últimas noticias
de tecnología y startups.
● Carga de la página en <1s.
● Necesito 2-4 segundos de zoom, pinch, …
● La página completa mi tarea en 5s+
Es esto una buena experiencia?
Actividad: Tarea principal a realizar de manera correcta

20. Cuales son las “actividades” principales
de tu aplicación? Cual es el tiempo para
completar dicha “actividad”?
Cual es el tiempo esperado?

21. Experiencia de usuario = f(Rendimiento percibido, Actividad completada)
● Que actividad el usuario está intentando realizar?
○ Cual es la expectación de nuestra mente para esa tarea?
● Cual es el rendimiento técnico de los components requeridos para la actividad?
○ Megabytes, milliseconds, frames?
● Cómo podemos diseñar la app para conectar el rendimiento y la experiencia de
usuario?
○ Hemos ayudado al usuario a completar la actividad con éxito satifactoriamente?
Rendimiento percibido = f(Rendimiento esperado, UX, Rendimiento actual)

22. Diseñadores: Aprender detalles técnicos, cuales
son las restricciones cognitivas, diseñar en base a
esas “actividades” principales.
Rendimiento
Desarrolladores: Comprender mejor la percepción
y como funciona nuestro cerebro. Centrarse en
“actividades” principales.

23. Twitter @diervo
Web diervo.com
#perfmatters