Upgrading the Web: Driving Support For New Standards

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