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

Upgrading the Web: Boston Web Performance Meetup

Upgrading the Web: Boston Web Performance Meetup

There are two classes of improvements that this talk covers:

1. Server side changes, like SPDY and HTTP Origin/Hop Hints
2. Browser changes, like support for WebP, Client Hints, and pre-fetching

This talk explains which ones are valuable today and provides data around the benefit you can expect to get from each optimization.

72f8175ac13e367bb500dd4da1f1aa32?s=128

Jonathan Klein

July 15, 2014
Tweet

Transcript

  1. Upgrading the Web Driving Support For New Standards Boston Web

    Performance Meetup Jonathan Klein @jonathanklein
  2. Slides, Links jkle.in/boswebperf

  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 this group
  7. None
  8. None
  9. Things You Learned

  10. Things You Learned • Origin Hints

  11. Things You Learned • Origin Hints • Client Hints

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

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

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

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

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

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

  18. HTTP Origin Hints • IETF Draft

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

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

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

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

  23. HTTP Origin Hints • Small Request Headers

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

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

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

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

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

  29. Optimize Transfer

  30. No Content Changes

  31. None
  32. Things You Learned • Origin Hints • Client Hints •

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

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

  35. Client Hints • IETF Draft

  36. Client Hints • IETF Draft • HTTP Request Header

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

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

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

  41. Simplifies Markup

  42. None
  43. Things You Learned • Origin Hints • Client Hints •

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

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

  47. WebP • New image format from Google

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

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

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

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

    than JPEG • Lossless Option • Alpha Transparency • Animation
  52. None
  53. Now We’re Getting Somewhere...

  54. None
  55. None
  56. Key Stats First Run Bytes 576KB Start Render 932ms Speed

    Index 1269ms
  57. Brief Aside:  Speed Index

  58. None
  59. Convert JPEGs to WebP

  60. None
  61. Key Stats First Run WebP Difference Bytes 576KB 387KB -33%

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

  64. None
  65. Challenges with WebP

  66. Challenges with WebP • Harder to share

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

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

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

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

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

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

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

  74. SPDY/HTTP 2.0 • Next version of HTTP

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

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

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

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

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

  80. Reducing Header Size vs. Header Compression

  81. None
  82. None
  83. No More...

  84. No More... • Domain Sharding

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

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

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

    Files • DataURIs
  88. None
  89. Slides, Links jkle.in/boswebperf

  90. Let’s See it in Action

  91. None
  92. None
  93. Before SPDY

  94. After SPDY

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

    387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14%
  96. istlsfastyet.com

  97. None
  98. None
  99. Sites Using SPDY Today

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

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

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

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

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

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

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

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

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

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

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

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

  117. None
  118. These Are Still  Good Options

  119. Convincing CDNs Would Be HUGE

  120. Implementation Challenges

  121. Action Steps

  122. Action Steps • Implement as much as you can

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

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

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

    Speak/blog about challenges • Ask your CDN for support • Report bugs
  126. Let’s Upgrade The Web

  127. Thanks!

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