Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User-percieved performance

2,582 views

Published on

User Percieved Performance @ San Francisco Ember.js Meetup - 8/25/2015.

The perception of performance is as important as performance its self. In this talk I'll cover some aspects of user perception, talk about performance instrumentation, and then share some UX tips to keep your users more engaged -- even when they're waiting

Published in: Technology
  • Be the first to comment

User-percieved performance

  1. 1. User Perceived Performance Mike North Ember.js SF Meetup - 8/25/2015 @MichaelLNorth github.com/mike-north
  2. 2. @MichaelLNorth Hi
  3. 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. 4. //TODO • What is user-perceived performance? • Instrumenting & Measuring • Lessons learned from large ember apps @ Yahoo • UX tricks for perception of responsiveness
  5. 5. What is User Perceived Performance?
  6. 6. User Perception < 100ms Feels “instantaneous” < 1,000ms Keep flow of thought < 10,000ms Keep attention
  7. 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. 8. Perf Matters ↑ 1.0s Page Load ↓ $1.6B /Year ↑0.4s Search Load ↓ 8,000,000 Searches/Day
  9. 9. How do we measure it?
  10. 10. System-Wide Instrumentation
  11. 11. @MichaelLNorth APIDB Caching / Indexing Asset Serving Networking / Infrastructure Where do we start? Client
  12. 12. System-Wide Instrumentation API DB DB Network UI
  13. 13. System-Wide Instrumentation API DB DB Business logic API DB DB Network UI
  14. 14. System-Wide Instrumentation R Transition Render R Render R Route A RouteB
  15. 15. UI System-Wide Instrumentation R Transition Render R Render R Route A RouteB ember-perf API DB { meta: {} } DB
  16. 16. System-Wide Instrumentation ember-perf R Transition Render R Render R Route A RouteB API DB API DBDB
  17. 17. Other tools • Browser profiler, timeline and network tab • Ember inspector • Take rendering speed numbers with a grain of salt
  18. 18. #Protips
  19. 19. Project Setup • Enable gzip compression • Load images @ the size you need, and compress them • Keep up to date on the framework releases
  20. 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. 21. Ember Performance • Scrutinize observers • Avoid {{{ known slow things }}} • Find and squash re-renders • this.set() in didInsertElement
  22. 22. Ember Performance /companies/1 CompaniesShow /api/companies/1 /api/companies/1/employees CompaniesShowEmployees 180ms 220ms 400ms
  23. 23. Ember Performance /companies/1 CompaniesShow /api/companies/1 /api/companies/1/employees CompaniesShowEmployees 180ms 220ms 220ms
  24. 24. For the waits you can’t conquer…
  25. 25. UX Tricks
  26. 26. UX Tricks • Background tasks
  27. 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. 28. UX Tricks • Get something on the screen immediately • Use “dummy content” • Smooth and honest progress bars ember-load
  29. 29. Addons ember-load ember-perf

×