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

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
APIDB
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
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

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