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

Upgrading the Web: Driving Support For New Standards

Upgrading the Web: Driving Support For New Standards

A talk given at Velocity Santa Clara 2014

72f8175ac13e367bb500dd4da1f1aa32?s=128

Jonathan Klein

June 25, 2014
Tweet

Transcript

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

    Clara 2014 Jonathan Klein @jonathanklein
  2. Slides, Links jkle.in/future

  3. About Me

  4. About Me • Performance Engineer At Etsy

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

    the Etsy Site Performance Reports
  6. About Me • Performance Engineer At Etsy • I write

    the Etsy Site Performance Reports • Started Boston Web Perf Meetup Group
  7. A Story

  8. A Story From the Future

  9. None
  10. http://goo.gl/Uj3w9y

  11. Things You Learned

  12. Things You Learned • Origin Hints

  13. Things You Learned • Origin Hints • Client Hints

  14. Things You Learned • Origin Hints • Client Hints •

    WebP
  15. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0
  16. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  17. What Should I Implement?

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

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  19. HTTP Origin Hints

  20. HTTP Origin Hints • IETF Draft

  21. HTTP Origin Hints • IETF Draft • HTTP Response Header

  22. HTTP Origin Hints • IETF Draft • HTTP Response Header

    • Tells the browser about server capabilities
  23. HTTP Origin Hints • IETF Draft • HTTP Response Header

    • Tells the browser about server capabilities •OH: a,b=6,c
  24. HTTP Origin Hints

  25. HTTP Origin Hints • Small Request Headers

  26. HTTP Origin Hints • Small Request Headers • Relative Referers

  27. HTTP Origin Hints • Small Request Headers • Relative Referers

    • Omitting Cookies
  28. HTTP Origin Hints • Small Request Headers • Relative Referers

    • Omitting Cookies • Sharing Connections
  29. HTTP Origin Hints • Small Request Headers • Relative Referers

    • Omitting Cookies • Sharing Connections • Pipeline Depth
  30. Reduce Header Size

  31. Optimize Transfer

  32. No Content Changes

  33. None
  34. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  35. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  36. Client Hints

  37. Client Hints • IETF Draft

  38. Client Hints • IETF Draft • HTTP Request Header

  39. Client Hints • IETF Draft • HTTP Request Header •

    Tells the server about browser capabilities
  40. Client Hints • IETF Draft • HTTP Request Header •

    Tells the server about browser capabilities •CH-DPR: 2.0
  41. None
  42. Will Also Specify Height/Width

  43. Simplifies Markup

  44. None
  45. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  46. None
  47. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  48. WebP

  49. WebP • New image format from Google

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

    than JPEG
  51. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option
  52. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option • Alpha Transparency
  53. WebP • New image format from Google • 25-34% smaller

    than JPEG • Lossless Option • Alpha Transparency • Animation
  54. None
  55. Now We Are Getting Somewhere...

  56. None
  57. None
  58. Key Stats First Run Bytes 576KB Start Render 932ms Speed

    Index 1269ms
  59. Brief Aside:  Speed Index

  60. None
  61. Convert JPEGs to WebP

  62. None
  63. Key Stats First Run WebP Difference Bytes 576KB 387KB -33%

    Start Render 932ms 1019ms +9% Speed Index 1269ms 1278ms <1%
  64. None
  65. Its Future is Uncertain

  66. None
  67. Challenges with WebP

  68. Challenges with WebP • Harder to share

  69. Challenges with WebP • Harder to share • Increased decoding

    time
  70. Challenges with WebP • Harder to share • Increased decoding

    time • Controversial studies around quality/size
  71. Challenges with WebP • Harder to share • Increased decoding

    time • Controversial studies around quality/size • No progressive decoding (yet)
  72. Still a Big  Bandwidth Win

  73. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  74. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  75. SPDY/HTTP 2.0

  76. SPDY/HTTP 2.0 • Next version of HTTP

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

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

    • Header Compression (HPACK)
  79. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression (HPACK) • Prioritization
  80. SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing

    • Header Compression (HPACK) • Prioritization • Server Push
  81. Recall Origin Hints…

  82. Reducing Header Size vs. Header Compression

  83. None
  84. None
  85. No More...

  86. No More... • Domain Sharding

  87. No More... • Domain Sharding • Spriting Images

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

    Files
  89. No More... • Domain Sharding • Spriting Images • Concatenating

    Files • DataURIs
  90. None
  91. Slides, Links jkle.in/future

  92. Let’s See it in Action

  93. None
  94. None
  95. Before SPDY

  96. After SPDY

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

    387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14%
  98. None
  99. None
  100. Sites Using SPDY Today

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

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

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

    Facebook • Twitter
  104. Sites Using SPDY Today • Most (all?) Google Properties •

    Facebook • Twitter • You?
  105. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  106. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  107. NOT talking about pre-render

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

    navigation <link rel="prefetch" href="/foo.css">
  109. WebPagetest Script ! logData 0 navigate https://velocity.jkle.in logData 1 navigate

    https://velocity.jkle.in/product.html
  110. None
  111. Key Stats First Run Bytes 85KB Speed Index 479ms CSS

    Files 2 JS Files 6
  112. ! ! ! ! ! <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">
  113. None
  114. 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%
  115. None
  116. Things You Learned • Origin Hints • Client Hints •

    WebP • SPDY/HTTP 2.0 • Pre-fetching
  117. Browser Support

  118. None
  119. These Are Still  Good Options

  120. Convincing CDNs Would Be HUGE

  121. Implementation Challenges

  122. Action Steps

  123. Action Steps • Implement as much as you can

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

    Speak/blog about challenges
  125. Action Steps • Implement as much as you can •

    Speak/blog about challenges • Ask your CDN for support
  126. Action Steps • Implement as much as you can •

    Speak/blog about challenges • Ask your CDN for support • Report bugs
  127. Other Talks at Velocity What Makes Mobile Websites Tick? 3:30

    today Is TLS Fast Yet? 3:30 tomorrow Chasing Waterfalls 5:00 tomorrow
  128. Office Hours at 3:30 today

  129. Let’s Upgrade The Web

  130. Thanks!

  131. @jonathanklein ! jonathan@etsy.com ! www.etsy.com/careers Get in Touch