User percieved performance
2 likes424 views
The document discusses user-perceived performance in web applications, emphasizing the importance of responsiveness to user interaction, with specific thresholds for perception. It covers various performance measurement techniques, challenges with API calls, and strategies to optimize loading times, including asset management and asynchronous processing. The author also shares insights into maintaining user engagement during latency through visual feedback and effective loading indicators.
User percieved performance
- 1. User Perceived Performance Mike North Modern Web UI - 9/29/2015 @MichaelLNorth github.com/mike-north
- 2. But first…. OCTOBER 3RD & 4TH
- 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
- 7. What is User Perceived Performance?
- 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
- 10. Perf Matters ↑ 1.0s Page Load ↓ $1.6B /Year ↑0.4s Search Load ↓ 8,000,000 Searches/Day
- 11. How do we measure it?
- 13. @MichaelLNorth APIDB Caching / Indexing Asset Serving Networking / Infrastructure Where do we start? Client
- 15. System-Wide Instrumentation API DB DB Business logic API DB DB Network UI
- 17. UI System-Wide Instrumentation R Transition Render R Render R Route A RouteB ember-perf API DB { meta: {} } DB
- 18. System-Wide Instrumentation ember-perf R Transition Render R Render R Route A RouteB API DB API DBDB
- 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
- 20. #Protips
- 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
- 24. Static Asset Bloat - CSS • Minify • Sanity check on style stack • CSS redundancy checker
- 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…
- 26. API call typhoon
- 29. JSON-API include • ActiveRecord and JSON-API concept • Returns related records in the API response • GET /articles/1?include=comments
- 30. API call creep • It’s easy to accidentally make a new, useless, API call • Annoying to sort out after the fact • is great for thisPretender
- 31. “Slow API”
- 32. “Slow API” • Have an awareness of DB cost • Take only what you need • ?per_page=200 • Let the stragglers straggle
- 33. It’s still slow…
- 34. Unavoidably Slow Stuff • Large file uploads • Slow external systems • Pesky humans • Transcoding
- 35. Unavoidably Slow Stuff • Async to the rescue! Model as a background task
- 36. Unavoidably Slow Stuff • Communicate long-running status to users
- 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
- 39. Perf matters • webpagetest.org • React performance tools - https:// facebook.github.io/react/docs/perf.html ember-load ember-perf