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
100
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
43
Phoenix for Rubyists
truenorth
0
63
Scalable, Ambitious, Future-friendly web apps with Ember.js
truenorth
0
120
Ember addons, served three ways
truenorth
0
61
Write Once, Run Everywhere - Mobile+Web Devcon 2015
truenorth
0
320
Compose All the Things (Wicked Good Ember 2015)
truenorth
0
100
Async/Await in JavaScript, today!
truenorth
1
190
Test like a pro with Ember.js
truenorth
0
47
Tomorrow's components, today!
truenorth
0
41
Other Decks in Technology
See All in Technology
NewSQL Landscape
oracle4engineer
PRO
2
2.7k
Building Dashboards as a Hobby
egmc
0
430
ルーターでプレゼンする
puhitaku
1
3.4k
認知症フレンドリーテックとスタックチャン
naokiuc
0
380
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
380
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.9k
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
130
uvを使ってストレスフリーな Python開発をしよう!
r74tech
0
260
20分で完全に理解するGrafanaダッシュボード
hamadakoji
5
1k
Handling focus in 2024
tahia910
0
610
Cypress or Playwright?
rainerhahnekamp
0
180
Cloudflare WorkersがPythonに対応したので試してみた
miura55
0
100
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
515
39k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Being A Developer After 40
akosma
67
580k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
80
44k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Product Roadmaps are Hard
iamctodd
45
9.8k
Typedesign – Prime Four
hannesfritz
36
2.1k
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