Diego Ferreiro Val@diervoSoftware Architect, Salesforce

UI and Web PerformanceQué es, cómo se mide, y porqué es importante.

Descubriendo la importancia del rendimiento en la web

600M searches x day~7000 searches x second

0.1% 99.9%

CONTROL (99.9% traffic)

VARIACION (0.1% traffic)

CO

NVE

RSI

ON

RA

TE

Todavía no estás convencido?

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

“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%.“

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

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

Es todo rendimiento técnico?

Muchas peculiaridades características!

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

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

Rendimiento percibido = f(Rendimiento esperado, UX, Rendimiento actual)

Pegamento

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.

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)

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, …

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

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

Cual es el tiempo esperado?

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)

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.

Twitter @diervo Web diervo.com

#perfmatters