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
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
580
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
830
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
260
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
テストを軸にした生き残り術
kworkdev
PRO
0
210
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
150
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
190
Language Update: Java
skrb
2
300
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Producing Creativity
orderedlist
PRO
347
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Building an army of robots
kneath
306
46k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
GitHub's CSS Performance
jonrohan
1032
460k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Cult of Friendly URLs
andyhume
79
6.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
RailsConf 2023
tenderlove
30
1.2k
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