Upgrade to Pro — share decks privately, control downloads, hide ads and more …

User Perceived Performance

Avatar for Mike North Mike North
August 25, 2015

User Perceived Performance

Avatar for Mike North

Mike North

August 25, 2015
Tweet

More Decks by Mike North

Other Decks in Technology

Transcript

  1. Ember @ Yahoo • LOTS of Ember Apps • ~70

    Ember-focused developers • A “flagship” app that ’s huge (70K lines JS) • An internal add on ecosystem
  2. //TODO • What is user-perceived performance? • Instrumenting & Measuring

    • Lessons learned from large ember apps @ Yahoo • UX tricks for perception of responsiveness
  3. 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
  4. Perf Matters ↑ 1.0s Page Load ↓ $1.6B /Year ↑0.4s

    Search Load ↓ 8,000,000 Searches/Day
  5. UI System-Wide Instrumentation R Transition Render R Render R Route

    A RouteB ember-perf API DB { meta: {} } DB
  6. Other tools • Browser profiler, timeline and network tab •

    Ember inspector • Take rendering speed numbers with a grain of salt
  7. Project Setup • Enable gzip compression • Load images @

    the size you need, and compress them • Keep up to date on the framework releases
  8. 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
  9. Ember Performance • Scrutinize observers • Avoid {{{ known slow

    things }}} • Find and squash re-renders • this.set() in didInsertElement
  10. 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
  11. UX Tricks • Get something on the screen immediately •

    Use “dummy content” • Smooth and honest progress bars ember-load