Upgrading the Web: Driving Support For New Standards

A talk given at Velocity Santa Clara 2014

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