Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
User Perceived Performance
Search
Mike North
August 25, 2015
Technology
0
110
User Perceived Performance
Mike North
August 25, 2015
Tweet
Share
More Decks by Mike North
See All by Mike North
Enemy of the state
truenorth
0
50
Phoenix for Rubyists
truenorth
0
71
Scalable, Ambitious, Future-friendly web apps with Ember.js
truenorth
0
130
Ember addons, served three ways
truenorth
0
67
Write Once, Run Everywhere - Mobile+Web Devcon 2015
truenorth
0
350
Compose All the Things (Wicked Good Ember 2015)
truenorth
0
110
Async/Await in JavaScript, today!
truenorth
1
200
Test like a pro with Ember.js
truenorth
0
54
Tomorrow's components, today!
truenorth
0
48
Other Decks in Technology
See All in Technology
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
120
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
380
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
140
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
390
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
380
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
130
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
210
Trust as Infrastructure
bcantrill
1
370
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
We Have a Design System, Now What?
morganepeng
53
7.8k
Code Review Best Practice
trishagee
72
19k
Building Applications with DynamoDB
mza
96
6.7k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Embracing the Ebb and Flow
colly
88
4.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Designing for Performance
lara
610
69k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
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 API DB 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 Instrumentation ember-perf R Transition Render R Render R Route
A RouteB API DB API DB DB
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