User-percieved performance
2 likes•2,729 views
The document discusses user-perceived performance in Ember.js applications, highlighting key metrics for response times and the importance of user experience during loading. It outlines strategies for measuring performance, including instrumentation and tools, as well as best practices for optimizing app performance and enhancing user perception. Tips for making waiting times better and maintaining attention are also provided.
User-percieved performance
- 1. User Perceived Performance Mike North Ember.js SF Meetup - 8/25/2015 @MichaelLNorth github.com/mike-north
- 3. Ember @ Yahoo • LOTS of Ember Apps • ~70 Ember-focused developers • A “flagship” app that ’s huge (70K lines JS) • An internal add on ecosystem
- 4. //TODO • What is user-perceived performance? • Instrumenting & Measuring • Lessons learned from large ember apps @ Yahoo • UX tricks for perception of responsiveness
- 5. What is User Perceived Performance?
- 6. User Perception < 100ms Feels “instantaneous” < 1,000ms Keep flow of thought < 10,000ms Keep attention
- 7. 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
- 8. Perf Matters ↑ 1.0s Page Load ↓ $1.6B /Year ↑0.4s Search Load ↓ 8,000,000 Searches/Day
- 9. How do we measure it?
- 11. @MichaelLNorth APIDB Caching / Indexing Asset Serving Networking / Infrastructure Where do we start? Client
- 13. System-Wide Instrumentation API DB DB Business logic API DB DB Network UI
- 15. UI System-Wide Instrumentation R Transition Render R Render R Route A RouteB ember-perf API DB { meta: {} } DB
- 16. System-Wide Instrumentation ember-perf R Transition Render R Render R Route A RouteB API DB API DBDB
- 17. Other tools • Browser profiler, timeline and network tab • Ember inspector • Take rendering speed numbers with a grain of salt
- 18. #Protips
- 19. Project Setup • Enable gzip compression • Load images @ the size you need, and compress them • Keep up to date on the framework releases
- 20. Ember Performance • Have an awareness of the cost of data • Load what you need • ?per_page=200 • Pretender is your friend • It’s ok to keep loading stragglers Pretender
- 21. Ember Performance • Scrutinize observers • Avoid {{{ known slow things }}} • Find and squash re-renders • this.set() in didInsertElement
- 24. For the waits you can’t conquer…
- 25. UX Tricks
- 26. UX Tricks • Background tasks
- 27. UX Tricks • Make waiting more interesting Loading… Thanks for waiting, we’re almost done! Just a few more moments… Yay! Your thing is ready! GET THING
- 28. UX Tricks • Get something on the screen immediately • Use “dummy content” • Smooth and honest progress bars ember-load