Modern Web UI 9/29 @ LinkedIn Sunnvale. A presentation on the user perception of web app performance, along with pro tips from my experience building large-scale single-page apps
4. About Me
• We are everyone’s “household CFO”
• Come up with a cash flow plan, analyze
transactions, track alignment
• You “have a guy/gal” to handle your
bills/finances
5. About Me
• Job.old() = UI Architect of Yahoo Ads &
Data
• Organizer Modern Web UI
• Startup advisor, OSS contributor
6. //TODO
• What is user-perceived performance?
• Instrumenting & Measuring
• Lessons learned from complex apps
• UX tricks for perception of responsiveness
8. User Perception
< 100ms Feels “instantaneous”
< 1,000ms Keep flow of thought
< 10,000ms Keep attention
9. SPA Performance
• Server deals only w/ JSON
• Incremental changes instead
of boiling the ocean
• Control over UX of loading/
transitions
• Initial page load is longer
• Slowness appears to be in the
UI
• API loses context
ADVANTAGES CHALLENGES
19. Other tools
• Browser profiler, timeline and network tab
• Take rendering speed numbers with a grain of salt
• Framework-specific tools
• Ember inspector
• React.addons.Perf
22. Static Asset Bloat
• gzip compression - makes sense for anything >=
2KB
• Host static assets off a CDN
• bandwidth and latency matter
• Order assets to maximize parallel downloading
• inline scripts at the bottom
23. Static Asset Bloat - JS
• Scrutinize dependencies
• Minify
• Keep up to date on framework/library releases
25. Static Asset Bloat - IMG
• Compress
• Get size you need
• imgix - image hosting as a service
• Fewer, larger files (sprites are still cool rite?)
• Have awareness of when to use JPG, PNG, etc…
37. • Make waiting more interesting
Loading…
Thanks for
waiting, we’re
almost done!
Just a few
more
moments…
Yay! Your thing
is ready!
GET THING
Slow…on the critical path
38. Blank screens
• Anything is better
than a blank screen
• Pure CSS (inline)
spinners will show up
fast
• The perception of
“loaded” becomes a
grey area now