user-percieved performance
Post on 17-Jan-2017
2.425 Views
Preview:
TRANSCRIPT
User Perceived Performance
Mike North Ember.js SF Meetup - 8/25/2015
@MichaelLNorth github.com/mike-north
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
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
@MichaelLNorth
APIDB
Caching / Indexing
Asset Serving
Networking / Infrastructure
Where do we start?
Client
UI
System-Wide Instrumentation
R
Transition
Render
R
Render
R
Route A
RouteB
ember-perf
API
DB
{ meta: {}}
DB
Other tools
• Browser profiler, timeline and network tab
• Ember inspector
• Take rendering speed numbers with a grain of salt
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
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
top related