User Perceived Performance

Transcript

1. User Perceived Performance Mike North Ember.js SF Meetup - 8/25/2015 @MichaelLNorth github.com/mike-north
2. @MichaelLNorth Hi
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?
10. System-Wide Instrumentation
11. @MichaelLNorth API DB Caching / Indexing Asset Serving Networking / Infrastructure Where do we start? Client
12. System-Wide Instrumentation API DB DB Network UI
13. System-Wide Instrumentation API DB DB Business logic API DB DB Network UI
14. System-Wide Instrumentation R Transition Render R Render R Route A RouteB
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 DB DB
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
22. Ember Performance /companies/1 CompaniesShow /api/companies/1 /api/companies/1/employees CompaniesShowEmployees 180ms 220ms 400ms
23. Ember Performance /companies/1 CompaniesShow /api/companies/1 /api/companies/1/employees CompaniesShowEmployees 180ms 220ms 220ms
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
29. Addons ember-load ember-perf