The Case for HTTP/2 - GreeceJS - June 2016

1. http://www.ﬂickr.com/photos/arnybo/2679622216 The Case for HTTP/2 @AndyDavies #GreeceJS, June 2016

2. 1999

3. 1999 RFC 2616 - HTTP/1.1

4. The Web of 1999…

5. …is not the Web of 2016

6. …is not the Web of 2016

7. http://www.ﬂickr.com/photos/7671591@N08/1469828976 HTTP/1.x doesn’t use the network efficiently

8. and we’ve been hacking around some of the limitations https://www.ﬂickr.com/photos/rocketnumber9/13695281

9. Each TCP connection only supports one request at a time* https://www.ﬂickr.com/photos/39551170@N02/5621408218 *HTTP Pipelining is broken in practice

10. So browsers allowed us to make more requests in parallel Very old browsers - 2 parallel connections Today’s browsers - 4 plus connections

11. To make even more parallel requests we split resources across hosts www.bbc.co.uk static.bbci.co.uk news.bbcimg.co.uk node1.bbcimg.co.uk

12. Increasing the risk of network congestion and packet loss https://www.ﬂickr.com/photos/dcmaster/4585119705

13. Every request has an overhead https://www.ﬂickr.com/photos/tholub/9488778040

14. HTTP 1.x - Higher latency = slower load times PageLoadTime(s) 1 2 3 4 Round Trip Time (ms) 0 20 40 60 80 100 120 140 160 180 200 220 240 Mike Belshe - “More Bandwidth Doesn’t Matter (much)”

15. Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Cookie:NTABS=B5; BBC- UID=75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozilla %2f5%2e0%20%28Macintosh%3b%20Intel%20Mac%20OS%20X%2010%5f9%5f1%29%20AppleWebKit %2f537%2e36%20%28KHTML%2c%20like%20Gecko%29%20Chrome%2f31%2e0%2e1650%2e63%20Safari %2f537%2e36; ckns_policy=111; BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40; s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3; ckpf_ww_mobile_js=on; ckpf_mandolin=%22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end %22%3A%221392834182609%22%7D; _chartbeat2=ol0j0uq4hkq6pumu. 1389101635322.1392285654268.0111111111111111; _chartbeat_uuniq=1; ecos.dt=1392285758216 Host:www.bbc.co.uk Pragma:no-cache User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36 Headers sent with every request Contain lots of repeated data and aren’t compressed

16. And small responses may not fill the TCP Congestion Window Could have sent more segments in this round-trip Small response

17. So we follow recipes e.g. Reduce Requests https://www.ﬂickr.com/photos/nonny/116902484

18. Create CSS and JavaScript bundles ++++ = =

19. Create CSS and JavaScript bundles ++++ = =More to download and parse

20. Create CSS and JavaScript bundles ++++ = = x+ Whole bundle is invalidated if a single ﬁle changes More to download and parse

21. and combine images to make sprites

22. and combine images to make sprites To get just one sprite …

23. and combine images to make sprites Browser must download and decode the whole image To get just one sprite …

24. We override the browser’s priorities https://www.ﬂickr.com/photos/skoupidiaris/5025176923

25. Embed binary* data using DataURIs url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) = *dataURIs can be text too e.g. SVG

26. and inline ‘critical resources’ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' typ <link rel="alternate" href="http://blog.yoav.ws/index.xml" type="application/rss+xml" title="Y <style> body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; color: rgb(72, 7 img { max-width: 100%; } .li-page-header { color: rgb(255, 255, 255); padding: 16px 0px; background-color: #8a1e1b; .container { position: relative; width: 90vw; max-width: 760px; margin: 0px auto; padding: .clearfix:before, .clearfix:after, .row:before, .row:after { content: '0020'; display: bl .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; }

27. There’s a tension between development and delivery https://www.ﬂickr.com/photos/domiriel/7376397968

28. Build tools and optimisation services help plug gaps and won’t be going away…

29. But what if we could use the network more efficiently? https://www.ﬂickr.com/photos/belsymington/4102783610

30. HTTP/2

31. HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles

32. HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles

33. HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles Impressive But is it a real world test?

34. • HTTP methods, status codes and semantics remain the same • Binary headers • Header compression • Multiplexed • Server can push resources HTTP/2

35. Each request becomes a stream

36. DATA frame HEADERS frame HTTP/1.1 200 OK Date: Mon, 07 Sep 2015 17:39:33 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip X-XSS-Protection: 1; mode=block X-Frame-Options: SAMEORIGIN Transfer-Encoding: chunked <!doctype html> <html> <head> <meta charset="utf-8"> <title>This is my title<title> <link rel="stylesheet" href="styles.css" type="text/css" /> HTTP/2HTTP/1.1 Streams are divided into frames } } DATA frame DATA frame

37. Frames are multiplexed over a TCP connection … Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA … Stream 4 DATA Client Server

38. TCP connection comparison HTTP/2 vs HTTP/1.1 HTTP/1.1 HTTP/2

39. Prioritised using Weights and Dependencies https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/ Weight: 200 id: 2 Weight: 100 id: 4 Weight: 1 id: 6 Weight: 100 id: 12 Weight: 100 id: 8 Weight: 100 id: 10

40. Prioritised using Weights and Dependencies https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/ Weight: 200 id: 2 Weight: 100 id: 4 Weight: 1 id: 6 Weight: 100 id: 12 Weight: 100 id: 8 Weight: 100 id: 10 2/3 1/3 Low priority

41. Prioritised using Weights and Dependencies https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/ Weight: 200 id: 2 Weight: 100 id: 4 Weight: 1 id: 6 Weight: 100 id: 12 Weight: 100 id: 8 Weight: 100 id: 10 2/3 1/3 Low priorityIn reality, there are some difficulties implementing this

42. What is the optimal order… Does it change as page loads? https://www.ﬂickr.com/photos/add1sun/4993432274

43. Header compression https://http2.github.io/http2-spec/compression.html

44. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable

48. What about when server and client are close? Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2

49. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2

50. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2

51. https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016

54. Opportunities for new kinds of optimisations https://www.ﬂickr.com/photos/inucara/14981917985

55. Browser Server Server builds page GET index.html <html><head>… Network Idle Request other page resources Server push

56. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Server push

57. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Server push

58. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Browser can reject push but may have already received data Server push

59. Many opportunities for server push HTML CSS DOM CSSOM Render Tree Layout PaintJavaScript Fonts and background images discovered when render tree builds Could we push them?

60. Multiplexing offers interesting possibilities too

61. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google

62. Parallel version looks usable with just 15% of bytes

63. And almost complete with 25% of the image bytes!

64. There are some questions over the user experience with progressive images Sequential version needs 80% of bytes to match up…

65. When do we kill off some HTTP/1.1 optimisation techniques? http://www.ﬂickr.com/photos/tonyjcase/7183556158

66. Browser support for HTTP/2 is relatively good 40 Edge 9b39 30a a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported yet

67. Server Support https://github.com/http2/http2-spec/wiki/Implementations Common servers already support it*

68. But choose your server carefully… Does it respect stream and connection ﬂow? Does it support dependencies and weights? Does it support server-push? How does it help optimisation?

69. You might find some strange things… https://www.ﬂickr.com/photos/joebenjamin/5009411920

70. Implementations are still young… Resources pushed in reverse order! (h20 v1.5.0 - ﬁxed in h2o 1.5.3)

71. Different patterns of server resource usage http://engineering.khanacademy.org/posts/js-packaging-http2.htm

72. Sometimes browsers have unexpected behaviour… 1.6s 1.7s 1.8s 1.9s 2.0s 2.1s With Push 1.6 Without Push (Chrome 46, in Firefox both tests were fast)

73. with push without push 300ms gap in waterfall while Chrome’s preloader starts

74. Chrome recently deprecated NPN

75. https://blogs.dropbox.com/tech/2016/05/enabling-http2-for-dropbox-web-services-experiences-and-observations/

76. Tools that might help you understand more https://www.ﬂickr.com/photos/99783447@N07/9431062947

77. Wireshark

78. chrome://net-internals

79. https://github.com/rmurphey/chrome-http2-log-parser

80. http://webpagetest.org Shows pushed resources in Chrome & Firefox tests

81. Balancing HTTP/1.1 & HTTP/2 https://www.ﬂickr.com/photos/kyletaylor/589628071

82. Some good practices remain constant across HTTP/1.1 and HTTP/2 Shrinking content - compression, miniﬁcation, image optimisation Reducing re-redirects Effective caching Reducing latency e.g. using a CDN Reducing DNS lookups and TCP connections

83. Others need to vary to make the most of each Replace inlining with server push Reduce CSS/JS concatenation and image spriting Avoiding sharding

84. HTTP/2 combines connections for shards When: Refer to same IP address Use same certiﬁcate (wildcard, or SAN) But… how well does this work in the ﬁeld, with complexities of Global Load Balancing etc?

85. HTTP/2 combines connections for shards When: Refer to same IP address Use same certiﬁcate (wildcard, or SAN) DNS lookup, but no new TCP connection or TLS negotiation But… how well does this work in the ﬁeld, with complexities of Global Load Balancing etc?

86. No content until DNS, TCP and TLS negotiation complete Efficient TLS is still important Session Resumption, Certiﬁcate Stapling and improvements in TLS v1.3 all help

87. Efficient TLS is Important istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic

88. https://www.ﬂickr.com/photos/mariachily/3335708242 Still plenty of challenges…

89. Use of Third-Parties is still growing Requests by Domain Bytes by Domain

90. W3C Resource Hints should help <link rel="dns-prefetch" href=“//example.com”> <link rel="preconnect" href=“//example.com”> <link rel="preload" href=“//example.com/font.woff” as=“font”>

91. If you want to learn more… hpbn.co/http2 http://daniel.haxx.se/http2

92. Go explore! http://www.ﬂickr.com/photos/atoach/6014917153

93. http://www.flickr.com/photos/auntiep/5024494612 @andydavies andy.davies@nccgroup.trust http://slideshare.net/andydavies

The Case for HTTP/2 - GreeceJS - June 2016

Andy Davies

The Case for HTTP/2 - GreeceJS - June 2016