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
Performance and User Experience
Search
Jonathan Klein
October 01, 2013
Technology
0
100
Performance and User Experience
A talk I gave at UX Fest 2013 at the offices of Fresh Tilled Soil in Boston, Massachusetts
Jonathan Klein
October 01, 2013
Tweet
Share
More Decks by Jonathan Klein
See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
jklein
15
350
Demystifying SPDY and HTTP/2
jklein
1
570
Demystifying SPDY and HTTP/2
jklein
2
1k
Cognitive Biases in Engineering Organizations
jklein
4
1.9k
Composer: From Beginner to Expert
jklein
1
840
Upgrading the Web: Boston Web Performance Meetup
jklein
1
260
Upgrading the Web: Driving Support For New Standards
jklein
1
760
Northeastern Lunch and Learn
jklein
0
210
Profiling PHP With XHProf
jklein
1
980
Other Decks in Technology
See All in Technology
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
6
1.5k
スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.
moneyforward
0
210
C++26 エラー性動作
faithandbrave
2
870
大規模言語モデルとそのソフトウェア開発に向けた応用 (2024年版)
kazato
2
410
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
1
510
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
890
シフトライトなテスト活動を適切に行うことで、無理な開発をせず、過剰にテストせず、顧客をビックリさせないプロダクトを作り上げているお話 / Shift Right
nihonbuson
2
720
深層学習と3Dキャプチャ・3Dモデル生成(土木学会応用力学委員会 応用数理・AIセミナー)
pfn
PRO
0
330
Fearsome File Formats
ange
0
540
信頼されるためにやったこと、 やらなかったこと。/What we did to be trusted, What we did not do.
bitkey
PRO
0
920
Denoで作るチーム開発生産性向上のためのCLIツール
sansantech
PRO
0
120
20240522 - 躍遷創作理念 @ PicCollage Workshop
dpys
0
290
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
50k
Code Review Best Practice
trishagee
65
17k
Scaling GitHub
holman
459
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
For a Future-Friendly Web
brad_frost
176
9.5k
A better future with KSS
kneath
238
17k
Transcript
RUM Distillation 101 UX Fest 2013 Jonathan Klein @jonathanklein Tuesday,
October 1, 13
Some Etsy Stats • Handmade marketplace • 1.5 billion page
views/month • Almost $1B in sales last year Tuesday, October 1, 13
Tuesday, October 1, 13
What We Focus On Tuesday, October 1, 13
Metrics We Care About Tuesday, October 1, 13
Metrics We Care About • Backend Load Time Tuesday, October
1, 13
Metrics We Care About • Backend Load Time • SEO,
capacity, impacts first paint Tuesday, October 1, 13
Metrics We Care About • Backend Load Time • SEO,
capacity, impacts first paint • Time to first paint Tuesday, October 1, 13
Metrics We Care About • Backend Load Time • SEO,
capacity, impacts first paint • Time to first paint • Rendering Performance Tuesday, October 1, 13
Metrics We Care About • Backend Load Time • SEO,
capacity, impacts first paint • Time to first paint • Rendering Performance Tuesday, October 1, 13
Time to First Paint Tuesday, October 1, 13
Tuesday, October 1, 13
Blocked By Tuesday, October 1, 13
Blocked By • Base HTML Page Tuesday, October 1, 13
Blocked By • Base HTML Page • CSS Tuesday, October
1, 13
Blocked By • Base HTML Page • CSS • JavaScript
Tuesday, October 1, 13
Solutions Tuesday, October 1, 13
Solutions • Small CSS (can inline) Tuesday, October 1, 13
Solutions • Small CSS (can inline) • Defer JavaScript Tuesday,
October 1, 13
Solutions • Small CSS (can inline) • Defer JavaScript •
Fast backend Tuesday, October 1, 13
Solutions • Small CSS (can inline) • Defer JavaScript •
Fast backend • CDN Tuesday, October 1, 13
Rendering Performance Tuesday, October 1, 13
60 FPS Tuesday, October 1, 13
16.6 ms Tuesday, October 1, 13
Tuesday, October 1, 13
Jank Tuesday, October 1, 13
http://jankfree.org/jank-busters-io-2013/template.html#15 Tuesday, October 1, 13
Why Do We Care? Tuesday, October 1, 13
Facebook artificially slowed down frame rate on iOS and Android
to 30 FPS, and “engagement collapsed” - Shane O'Sullivan, Edge London 2013 Tuesday, October 1, 13
Etsy tested pre-fetching JS on our search results page, which
caused jank as the JS finished downloading. All business metrics we monitored got much worse. - Me, right now Tuesday, October 1, 13
Solutions Tuesday, October 1, 13
Tuesday, October 1, 13
jankfree.org Tuesday, October 1, 13
Etsy Studies Tuesday, October 1, 13
Improved Performance Tuesday, October 1, 13
Improved Performance • Went from 4 sharded domains to two
Tuesday, October 1, 13
Improved Performance • Went from 4 sharded domains to two
• 500ms load time improvement on mobile Tuesday, October 1, 13
Improved Performance • Went from 4 sharded domains to two
• 500ms load time improvement on mobile • 30-50ms on desktop Tuesday, October 1, 13
Improved Performance • Went from 4 sharded domains to two
• 500ms load time improvement on mobile • 30-50ms on desktop • 0.27% increase in page views per visit Tuesday, October 1, 13
Increased Page Weight Tuesday, October 1, 13
Increased Page Weight • Added ~160k more bytes on mobile
Tuesday, October 1, 13
Increased Page Weight • Added ~160k more bytes on mobile
• 12% increase in bounce rate Tuesday, October 1, 13
Tradeoffs Tuesday, October 1, 13
Test Everything Tuesday, October 1, 13
Listen to the Customer Tuesday, October 1, 13
Faster is Better Tuesday, October 1, 13