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

Upgrading the Web - Driving Support For New Sta...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Jonathan Klein Jonathan Klein
November 15, 2013
Technology
450
1

Upgrading the Web - Driving Support For New Standards

I gave this talk at Velocity London 2013.

Slides and links available at jkle.in/upgrade

Avatar for Jonathan Klein

Jonathan Klein

November 15, 2013

More Decks by Jonathan Klein

See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
Avatar for Jonathan Klein jklein
15
510
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
1
690
Demystifying SPDY and HTTP/2
Avatar for Jonathan Klein jklein
2
1.2k
Cognitive Biases in Engineering Organizations
Avatar for Jonathan Klein jklein
4
2k
Composer: From Beginner to Expert
Avatar for Jonathan Klein jklein
1
1.1k
Upgrading the Web: Boston Web Performance Meetup
Avatar for Jonathan Klein jklein
1
350
Upgrading the Web: Driving Support For New Standards
Avatar for Jonathan Klein jklein
1
870
Northeastern Lunch and Learn
Avatar for Jonathan Klein jklein
0
290
Profiling PHP With XHProf
Avatar for Jonathan Klein jklein
1
1.1k

Other Decks in Technology

See All in Technology
2026TECHFRESH畢業分享會 - Lightning Talk - E起 See See : 電商推薦讀心術? 數據說了算
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
920
protovalidate-es を導入してみた
Avatar for 弁護士ドットコム bengo4com
0
180
Disciplined Vibes: Scaling AI-Assisted Engineering
Avatar for Sheharyar Naseer sheharyar
0
140
FDE という解 ― 暗黙知と明示知をつなぐ、伴走型エンジニアリング ―
Avatar for 太田 博三 otanet
0
150
AIソロプレナー時代に2ヶ月で20人増員した事業創造会社の開発組織の話
Avatar for Koji Miyata miyatakoji
0
640
2026TECHFRESH畢業分享會 - 葬送的通靈師：化系統與用戶雜訊成行動訊號
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
920
NAB Show 2026 動画技術関連レポート / NAB Show 2026 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
0
190
エラーバジェットのアラートのタイミングを考える.pdf
Avatar for KairiM kairim0
0
140
Claude Code の Sandbox 機能を Anthropic Sandbox Runtime(srt) で試そう！/lets-play-anthropic-sandbox-runtime
Avatar for tomoki10 tomoki10
1
570
2026TECHFRESH畢業分享會 - Lightning Talk - 打造精準高效的 MCP 設計模式與測試實務
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
930
2026 TECHFRESH 畢業分享會 - 開發日常大解密！從領域驅動到企業級上線
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
920
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
930

Featured

See All Featured
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
220
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
250
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
480
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k

Transcript

  1. Upgrading the Web Driving Support For New Standards Velocity London

    2013 Jonathan Klein @jonathanklein Friday, November 15, 13

  2. Slides, Links jkle.in/upgrade Friday, November 15, 13

  3. About Me Friday, November 15, 13

  4. About Me • Performance Engineer At Etsy Friday, November 15,

    13

  5. About Me • Performance Engineer At Etsy • I write

    the Etsy Site Performance Reports Friday, November 15, 13

  6. About Me • Performance Engineer At Etsy • I write

    the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group Friday, November 15, 13

  7. Etsy Stats Friday, November 15, 13

  8. Friday, November 15, 13

  9. Friday, November 15, 13

  10. Friday, November 15, 13

  11. A Story Friday, November 15, 13

  12. A Story From the Future Friday, November 15, 13

  13. Friday, November 15, 13

  14. http://goo.gl/Uj3w9y Friday, November 15, 13

  15. Things You Learned Friday, November 15, 13

  16. Things You Learned • Hop Hints Friday, November 15, 13

  17. Things You Learned • Hop Hints • Client Hints Friday,

    November 15, 13

  18. Things You Learned • Hop Hints • Client Hints •

    WebP Friday, November 15, 13

  19. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 Friday, November 15, 13

  20. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  21. What Should You Implement? Friday, November 15, 13

  22. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  23. HTTP Origin/Hop Hints Friday, November 15, 13

  24. HTTP Origin/Hop Hints • IETF Draft Friday, November 15, 13

  25. HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header

    Friday, November 15, 13

  26. HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header

    •OH: a,b=6,c Friday, November 15, 13

  27. HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header

    •OH: a,b=6,c • Tells the browser about server capabilities Friday, November 15, 13

  28. HTTP Origin/Hop Hints Friday, November 15, 13

  29. HTTP Origin/Hop Hints • Small Request Headers Friday, November 15,

    13

  30. HTTP Origin/Hop Hints • Small Request Headers • Relative Referers

    Friday, November 15, 13

  31. HTTP Origin/Hop Hints • Small Request Headers • Relative Referers

    • Omitting Cookies Friday, November 15, 13

  32. HTTP Origin/Hop Hints • Small Request Headers • Relative Referers

    • Omitting Cookies • Sharing Connections Friday, November 15, 13

  33. HTTP Origin/Hop Hints • Small Request Headers • Relative Referers

    • Omitting Cookies • Sharing Connections • Pipeline Depth Friday, November 15, 13

  34. Reduce Header Size Friday, November 15, 13

  35. Optimize Transfer Friday, November 15, 13

  36. No Content Changes Friday, November 15, 13

  37. Friday, November 15, 13

  38. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  39. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  40. Client Hints Friday, November 15, 13

  41. Client Hints • IETF Draft Friday, November 15, 13

  42. Client Hints • IETF Draft • HTTP Request Header Friday,

    November 15, 13

  43. Client Hints • IETF Draft • HTTP Request Header •CH-DPR:

    2.0 Friday, November 15, 13

  44. Client Hints • IETF Draft • HTTP Request Header •CH-DPR:

    2.0 • Tells the server about browser capabilities Friday, November 15, 13

  45. Friday, November 15, 13

  46. Will Also Specify Height/Width Friday, November 15, 13

  47. Simplifies Markup Friday, November 15, 13

  48. Friday, November 15, 13

  49. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  50. Friday, November 15, 13

  51. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  52. WebP Friday, November 15, 13

  53. WebP • New image format from Google Friday, November 15,

    13

  54. WebP • New image format from Google • 25-34% smaller

    than JPEG Friday, November 15, 13

  55. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option Friday, November 15, 13

  56. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option • Alpha Transparency Friday, November 15, 13

  57. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option • Alpha Transparency • Growing adoption Friday, November 15, 13

  58. Friday, November 15, 13

  59. Now We Are Getting Somewhere... Friday, November 15, 13

  60. Friday, November 15, 13

  61. Friday, November 15, 13

  62. Key Stats First Run Bytes 576KB Start Render 932ms Speed

    Index 1269ms Friday, November 15, 13

  63. Brief Aside: Speed Index Friday, November 15, 13

  64. Friday, November 15, 13

  65. Convert JPEGs to WebP Friday, November 15, 13

  66. Friday, November 15, 13

  67. Key Stats First Run WebP Difference Bytes 576KB 387KB -33%

    Start Render 932ms 1019ms +9% Speed Index 1269ms 1278ms <1% Friday, November 15, 13

  68. Friday, November 15, 13

  69. Its Future is Uncertain Friday, November 15, 13

  70. Friday, November 15, 13

  71. Friday, November 15, 13

  72. Challenges with WebP Friday, November 15, 13

  73. Challenges with WebP • Worse shareability Friday, November 15, 13

  74. Challenges with WebP • Worse shareability • Increased decoding time

    Friday, November 15, 13

  75. Challenges with WebP • Worse shareability • Increased decoding time

    • Controversial studies around quality/size Friday, November 15, 13

  76. Challenges with WebP • Worse shareability • Increased decoding time

    • Controversial studies around quality/size • No progressive decoding (yet) Friday, November 15, 13

  77. Still a Big Bandwidth Win Friday, November 15, 13

  78. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  79. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  80. SPDY/HTTP 2.0 Friday, November 15, 13

  81. SPDY/HTTP 2.0 • Next version of HTTP Friday, November 15,

    13

  82. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    Friday, November 15, 13

  83. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression Friday, November 15, 13

  84. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression • Prioritization Friday, November 15, 13

  85. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression • Prioritization • Wide support Friday, November 15, 13

  86. Friday, November 15, 13

  87. No More... Friday, November 15, 13

  88. No More... • Domain Sharding Friday, November 15, 13

  89. No More... • Domain Sharding • Spriting Images Friday, November

    15, 13

  90. No More... • Domain Sharding • Spriting Images • Concatenating

    Files Friday, November 15, 13

  91. No More... • Domain Sharding • Spriting Images • Concatenating

    Files • DataURIs Friday, November 15, 13

  92. Friday, November 15, 13

  93. Friday, November 15, 13

  94. Slides, Links jkle.in/upgrade Friday, November 15, 13

  95. Let’s See it in Action Friday, November 15, 13

  96. Friday, November 15, 13

  97. Friday, November 15, 13

  98. Before SPDY Friday, November 15, 13

  99. After SPDY Friday, November 15, 13

  100. Key Stats First Run SPDY/ HTTP 2.0 Difference Bytes 387KB

    387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14% Friday, November 15, 13

  101. Friday, November 15, 13

  102. Friday, November 15, 13

  103. Sites Using SPDY Today Friday, November 15, 13

  104. Sites Using SPDY Today • Most (all?) Google Properties Friday,

    November 15, 13

  105. Sites Using SPDY Today • Most (all?) Google Properties •

    Facebook Friday, November 15, 13

  106. Sites Using SPDY Today • Most (all?) Google Properties •

    Facebook • Twitter Friday, November 15, 13

  107. Sites Using SPDY Today • Most (all?) Google Properties •

    Facebook • Twitter • You? Friday, November 15, 13

  108. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  109. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  110. Pre-fetching • Fetch assets for next page • Speeds up

    navigation <link rel="prefetch" href="/foo.css"> Friday, November 15, 13

  111. WebPagetest Script logData 0 navigate https://velocity.jkle.in logData 1 navigate https://velocity.jkle.in/product.html

    Friday, November 15, 13

  112. Friday, November 15, 13

  113. Key Stats First Run Bytes 85KB Speed Index 479ms CSS

    Files 2 JS Files 6 Friday, November 15, 13

  114. Prefetch <link rel="prefetch" href="/prestashop/themes/default/css/product.css"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/fancybox/jquery.fancybox.css"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/fancybox/jquery.fancybox.js">

    <link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.idTabs.js"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.scrollTo.js"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.serialScroll.js"> <link rel="prefetch" href="/prestashop/themes/default/js/tools.js"> <link rel="prefetch" href="/prestashop/themes/default/js/product.js"> Friday, November 15, 13

  115. Friday, November 15, 13

  116. Key Stats First Run Pre-fetching Difference Bytes 85KB 50KB -40%

    Speed Index 479ms 290ms -40% CSS Files 2 0 -100% JS Files 6 0 -100% Friday, November 15, 13

  117. Friday, November 15, 13

  118. Things You Learned • Hop Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

  119. Browser Support Friday, November 15, 13

  120. Friday, November 15, 13

  121. These Are Still Good Options Friday, November 15, 13

  122. Convincing CDNs Would Be HUGE Friday, November 15, 13

  123. Action Steps Friday, November 15, 13

  124. Action Steps • Implement as much as you can Friday,

    November 15, 13

  125. Action Steps • Implement as much as you can •

    Speak/blog about challenges Friday, November 15, 13

  126. Action Steps • Implement as much as you can •

    Speak/blog about challenges • Ask your CDN for support Friday, November 15, 13

  127. Action Steps • Implement as much as you can •

    Speak/blog about challenges • Ask your CDN for support • Report bugs Friday, November 15, 13

  128. Let’s Upgrade The Web Friday, November 15, 13

  129. Thanks! Friday, November 15, 13

  130. @jonathanklein [email protected] www.etsy.com/careers Get in Touch Friday, November 15, 13