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.

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
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
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
40. Will Also Specify Height/Width
41. Simplifies Markup
43. Things You Learned • Origin Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching
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
53. Now We’re Getting Somewhere...
56. Key Stats First Run Bytes 576KB Start Render 932ms Speed Index 1269ms
57. Brief Aside:
    Speed Index
59. Convert JPEGs to WebP
61. Key Stats First Run WebP Difference Bytes 576KB 387KB -33% Start Render 932ms 1019ms +9% Speed Index 1269ms 1278ms <1%
63. Its Future is Uncertain
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
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
89. Slides, Links
    jkle.in/boswebperf
90. Let’s See it in Action
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
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
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">
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%
115. Things You Learned • Origin Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching
116. Browser Support
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