HTTP2 What, where, why, and when?! Smashing Conference, March 2016

This version of the talk was given at Smashing Conference, Oxford, March 2016.

The onset of HTTP/2 is upon us. Now over 60% of your users browsers are be capable of interpreting requests delivered over the new protocol. But what does this really mean for us as frontend developers? How can we utilise H2’s features to deliver fast experiences? Have our best practices become anti-patterns? What is the tooling landscape like and will we need to change our existing systems?

Over the course of this talk Patrick will use new research and real-world examples from the Financial Times to put our minds at easy and – most importantly – get you excited about a future with HTTP/2.

Transcript

1. HTTP/2 Patrick Hamann — Smashing Conference, Oxford, March 2016 @patrickhamann What, where, why, and when?! !
4. Web application stack Session TLS (optional) Transport (TCP) Network (IP) Application (HTTP) HTML CSS JavaScript
5. The brief history of HTTP 1995 HTTP/1.0 (RFC1945) HTTP/0.9 1991 HTTP/2 (RFC7540) 2015 HTTP/1.1 (RFC2068) 1997 2006 SPDY
6. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015 GET /index.html
7. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015
8. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015
9. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015
10. 1995 HTTP/1.0 HTTP/0.9 1991 SPDY 2006 HTTP/1.1 1997 HTTP/2 2015 HTTP/2 HTTP/2 HTTP/2 HTTP/2
11. HTTP/2 ?%&$! https://bagder.gitbooks.io/http2-explained/content/en/part4.html • Be less sensitive to latency • Fix pipelining and the head of line blocking problems • Eliminate the need to increase the number of connections to each host • Keep all existing interfaces, URI formats and schemes • Be made within the IETF's HTTPbis working group 
 HTTP/2 Explained
 DANIEL STENBERG — MOZILLA, 2015
12. 1. Why 2. What 3. Where 4. When
13. Why?
14. Our websites are changing !=
15. Requesrts 0 50 100 150 200 250 300 2011 2012 2013 2014 2015 2016 201 219 224 227 238 239 59 68 70 75 76 81 Median 95th Average HTTP requests per page
16. 80 Average requests per page
17. Requesrts 0 1000 2000 3000 4000 5000 6000 7000 8000 2011 2012 2013 2014 2015 2016 2,186 2,898 4,103 5,106 6,119 6,883 487 667 848 1,089 1,280 1,474 Median 95th Average bytes per page
18. 1.4mb Average bytes transferred per page
19. We don’t use the network efficiently
20. It’s all about latency! https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
21. HTTP connection DNS lookup Initial connection
 (TCP) SSL/TLS negotiation TTFB Content download
22. Average round trip time on UK 3G connection Dmytrii Shchadei — http://www.slideshare.net/metrofun/reduce-mobile-latency " # # # $ Internal latency Firewalls, Load Balancers, Servers % Internet routing latency CDNs, ISPs, Caches, Proxies Control plane latency ~600ms on average UK 3G connection ~200ms
23. Head of line blocking $ & Client Server TCP connection GET /image-1.jpg GET /image-1.jpg '
24. Head of line blocking $ & Client Server GET /image-1.jpg GET /image-2.jpg GET /image-3.jpg GET /image-4.jpg GET /image-5.jpg GET /image-6.jpg
25. Hacks: concatenation ( React.js ( Angular.js ( jQuery.js ( Bootstrap.js ( MooTools.js ( main.js + + + +
27. Hacks: domain sharding
28. Example of base64 json’ifed fonts Hacks: inlining
29. • Why latency matters • Where latency occurs • Head of line blocking • HTTP/1.1 Hacks and anti-patterns
30. 1. Why 2. What 3. Where 4. When
31. What?
32. HTTP/2 ?%&$! https://bagder.gitbooks.io/http2-explained/content/en/part4.html • Be less sensitive to latency • Fix pipelining and the head of line blocking problems • Eliminate the need to increase the number of connections to each host • Keep all existing interfaces, URI formats and schemes • Be made within the IETF's HTTPbis working group 
 HTTP/2 Explained
 DANIEL STENBERG — MOZILLA, 2015
33. HTTP/2 core features 1. Multiplexing (via streams, frames, and messages) 2. Binary data format 3. Prioritisation 4. Header compression 5. Flow control 6. Server push
34. & Client $ Server Stream Message :method: GET :path: /image-2.jpg Frame Message :status 200 :version: HTTP/2.0 :vary: Accept-Encoding Frame … response payload … Frame Connection Stream A virtual channel within an established connection which carries bidirectional messages. Frame The smallest unit of communication, which carries a specific type of data—e.g., HTTP headers, payload, commands e.t.c. Message A complete sequence of frames that map to a logical HTTP message, such as a request. Multiplexing: terminology
35. Multiplexing: Frames HTTP/1.1 200 OK Content-Type: text/css Vary: Accept-Encoding Content-Encoding: gzip Cache-Control: max-age=6427474 Content-Length: 11740 Connection: keep-alive @font-face{font-family:"BentonSans";src:url("http://s1.ft- static.com/m/font/ft-velcro/bentonsans- regular.eot");src:url("http://s1.ft-static.com/m/font/ft-velcro/ bentonsans-regular.eot?#iefix") format("embedded- HEADERS frame DATA frame HTTP/1.1 HTTP/2
36. Binary frames Length Data payload… Type Flags Stream Identifier
37. Stream 5 HEADERS Stream 6 HEADERS Multiplexing: Streams HTTP/2 connection Stream 1 HEADERS Stream 1 DATA Stream 1 DATA Stream 2 HEADERS Stream 1 DATA Stream 1 DATA Stream 3 HEADERS $ Server & Client
38. HTTP/1.1 Prioritisation ) /index.html /main.css /app.js /image-1.jpg /image-2.jpg Time Delay
39. HTTP/2 Prioritisation ) /index.html Time /main.css /app.js /image-1.jpg /image-2.jpg
40. /hero.jpg Stream ID: 4 Weight: 16 /data.json Stream ID: 7 Weight: 16 /app.js Stream ID: 2 Weight: 64 /icon.svg Stream ID: 9 Weight: 16 /main.css Stream ID: 1 Weight: 128 HTTP/2 Prioritisation
41. Header compression: HPACK :method: GET :scheme: https :host: next.ft.com :path: /main.css Cookie FTUserTrack=213.216.148.1.1432658066641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2NTU0NS4x NDMyNzI0MTE2NDc4LjZmM2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432724114:S= ALNI_MZykGfLfvkhayKSL3LXYT9YQNtRjg; cookieconsent=accepted; & Client
42. Header compression: HPACK 2 :method: GET 3 :scheme: https 3 :host: next.ft.com 4 :path: /main.css 64 Cookie FTUserTrack=213.216.148.1.1432658066 641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2N TU0NS4xNDMyNzI0MTE2NDc4LjZm M2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432 & Client 2 :method: GET 3 :scheme: https 4 :host: next.ft.com 5 :path: /main.css 64 Cookie FTUserTrack=213.216.148.1.1432658066 641353; SIVISITOR=Mi45NzIuMjIzMDc2NzM2N TU0NS4xNDMyNzI0MTE2NDc4LjZm M2U4YmFj*; __gads=ID=0d68ab230d47cf5f:T=1432 Static table Dynamic table
43. Header compression: HPACK 2 3 4 ` 5 :path: /app.js 64 65 X-Custom-Header TRUE & Client
44. Push $ & Client Server HTTP/2 connection GET /index.html GET /main.css
45. Push $ & Client Server GET /index.html PUSH_PROMISE /imain.css ' 200 OK /index.html HTTP/2 connection
46. Push $ & Client Server GET /index.html PUSH_PROMISE /imain.css ' RST_STREAM /main.css HTTP/2 connection
47. • Multiplexing via streams and frames • Client/server prioritisation • Header compression via HPACK • Server-side resource pushing
48. 1. Why 2. What 3. Where 4. When
49. Where?
50. Browsers https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing Current browser support
52. Severs https://github.com/http2/http2-spec/wiki/Implementations Server Version Push NGINX 1.9.5+ No Apache 2.4.17+ Yes IIS 10 Yes Jetty 9.3+ Yes
53. CDNs https://istlsfastyet.com/ Provider Version Push Akamai Yes No CloudFlare Yes No KeyCDN Yes No MaxCDN No No Fastly No No AWS CloudFront No No
54. PaaS https://istlsfastyet.com/ Server Version Google App Engine Yes AWS (ELB) No Heroku No
55. Choosing the right server! Does it support stream priorities? * * Does it support server push? * If so, what strategies does it support for resource hinting? * Does it have intelligent optimisation?
56. Strategy: static assets/CDN " % $ $ ( + ) .css ) .js ) .woff /index.html Origin CDN Origin Static assets Client HTTP/2 HTTP/1.1
57. Strategy: reverse proxy " $ Proxy ( /index.html + ) .css ) .js ) .woff Static assets Client HTTP/1.1 $ Origin HTTP/2
58. Strategy: all teh thingz! " ( /index.html + ) .css ) .js ) .woff Static assets Client $ Origin HTTP/2
59. Strategy: push critical assets Request page Network Render GET html Build DOM response Build CSSOM Render page idle idle GET css response Render blocking Run JS GET js response Async Render text GET font response
60. Strategy: push critical assets Request page Network Render GET html Build DOM response Build CSSOM Render page idle idle GET css response Run JS GET js response Render text GET font response Push ,
61. What should we push? Critical CSS * * Critical fonts * Core JavaScript applications
62. How can we push? Resource hints Link: </app/style.css>; rel=preload; as=style; <link rel="preload" href="/app/style" as="style"> Link header: Link element: Link: </app/font.woff>; rel=push; rel=push ?? https://www.w3.org/TR/preload/#server-push-http-2
63. How can we push? Manifest { "/css/app.css": { "type": "style", "weight": 2 }, "/js/app.js": { "type": "script", "weight": 1 }, "/bower_components/component/webcomponents-lite.js": { "type": "script", "weight": 1 } …
64. ) .css /main.css GET ) .js /main.js GET ( /index.html GET How can we push? Intelligent push % CDN " Client
65. ) .css /main.css , ) .js /main.js , ( /index.html How can we push? Intelligent push % CDN " Client
66. Tools: WebPageTest
67. Tools: WPT http://www.slideshare.net/AndyDavies/the-case-for-http2-internetdagarna-2015-stockholm/65
68. Dev tools https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing
69. Dev tools https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing
70. Wireshark https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing https://jimshaver.net/2015/02/11/decrypting-tls-browser-traffic-with-wireshark-the-easy-way/
71. Wireshark https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing $ export SSLKEYLOGFILE=~/sslkeylogs/
72. https://github.com/summerwind/h2spec
73. Tools: chrome://net-internals
74. Tools: http2-log-parser https://github.com/rmurphey/chrome-http2-log-parser
76. • Browser and server support • TLS requirement • Considerations when choosing your HTTP server • Deployment strategies • Push strategies • Tooling landscape
77. 1. Why 2. What 3. Where 4. When
78. When?
79. Move to TLS first Acquire certificates * * Ensure all 3rd party scripts are secure * Ensure all 1st party assets are secure * Configure / upgrade servers * Force all traffic to TLS
81. What is your user support like? 56% 44% H2 capable Browser statistics taken form next.ft.com March 2016
82. Change your build process to be H2 first gulp build-default build-concat
83. Bundle by frequency of change! Libraries Utilities Application
84. Bundle by frequency of change! Libraries Utilities Application Rarely change Frequent change
85. Bundle by frequency of change! Libraries Utilities Application Rarely change Frequent change ( core.js ( app.js
86. Performance basics still matter! First render (above the fold) prioritisation & optimisation * * Compression, minification, and image optimisation * Cache wherever possible * Reduce DNS lookups and TLS handshakes * Use CDNs to reduce latency
87. • Move to TLS first • Get stakeholders involved • Analyse your user support • Change your build processes • Performance basics still matter!
88. 1. Why 2. What 3. Where 4. When
89. Summary
90. Does it work? 95th percentile load event FT.com Statistics taken form next.ft.com March 2016 loadEvent (ms) 0 4,500 9,000 13,500 18,000 Mobile Tablet Desktop HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 6,671 16,411 15,163 6,317 12,956 10,776
91. Does it work? Impact of latency and HTTP/2 Statistics taken form next.ft.com March 2016 Median loadEvent (ms) 0 1,250 2,500 3,750 5,000 RTT (latency) 0 100 200 300 400 500 H2 H1
92. Does it work? 95th percentile start render Statistics taken form next.ft.com March 2016 Start render (ms) 0 800 1,600 2,400 3,200 Mobile Tablet Desktop HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 HTTP/2 HTTP/1.1 2,521 2,944 3,028 1,105 2,453 2,506
93. #perfmatters
94. Thanks @patrickhamann http://bit.ly/http2-what-where-why-when
 github.com/Financial-Times ! - . Do you want to help build this stuff? Join in.