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