User percieved performance
2 likesâ˘424 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 ďŹrstâŚ. 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/ďŹnances
- 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 ďŹow 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 proďŹler, timeline and network tab ⢠Take rendering speed numbers with a grain of salt ⢠Framework-speciďŹc 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 ďŹles (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
- 34. Unavoidably Slow Stuff ⢠Large ďŹle 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