HTTP/2 - The future of the Web today (NDC Sydney 2017)

Client side web technologies continue to advance at breakneck speed. The quest to deliver richer user experiences is relentless and due to the limitations of HTTP/1.x, we have been forced to develop various workarounds (domain sharding, spriting, resource concatenation and inlining) in a bid to optimize performance.
HTTP/2 has been designed with the modern web in mind and eliminates the need for such compensating hacks. In this session we'll take an in-depth look at web performance optimization; the best practices that have evolved; the game changing new features of HTTP/2; and most importantly what you need to do to deliver a world class HTTP/2 experience:

- Why domain sharding, resource concatenation and image sprites are now anti-patterns
- How server push is effectively resource inlining on steroids
- What new best practices are possible with HTTP/2
- What techniques to apply during the transitional period from HTTP/1.x to HTTP/2

Additionally, we will look at the tooling available for working with HTTP/2 traffic and how we can ensure that we're getting the full benefit of HTTP/2 both client and server side.

Transcript

1. HTTP/2 the future of the web today @robdcrowley | robdcrowley https://www.flickr.com/photos/79909830@N04/15599391872
2. Slides are available at https://bit.ly/ndcsydney-http2
3. Goals for the session - Explore the evolution of HTTP from a simple one line protocol to being the rich full featured one we know. - Look at the motivations for HTTP/2 and investigate its major features. - Take an in depth look at Server Push, one of the key new HTTP/2 features and the current browser support. - Most of all, encourage you all learn more about HTTP/2 and migrate your applications across to leverage it
4. HTTP is the foundation of data communication for the World Wide Web.
5. Internet Protocol Stack Network Access IP TCP UDP DNS, TFTP etc. Application Layer Network Layer Internet Layer Transport Layer HTTP , FTP etc.
6. Internet Protocol Stack Network Access IP TCP UDP DNS, TFTP etc. Application Layer Network Layer Internet Layer Transport Layer Network Access IP TCP HTTP , FTP etc. HTTP , FTP etc.
7. TCP/IP vs OSI 7. Application 6. Presentation 5. Session 4. Transport 3. Network 2. Data Link 1. Physical Network Access Internet Transport Application OSI TCP/IP
8. Network Performance 101 Cable ISP ISP Ethernet … WIFI Latency: The time from the source sending a packet to the destination receiving it. Bandwidth: Maximum throughput of a logical or physical communication path.
9. 1990 HTTP/0.9 The abridged history of HTTP
10. HTTP/0.9 was the ultimate MVP
11. > telnet example.com 80 connected to 74.128.xxx.xxx GET /about/ (hypertext response) (connection closed)
12. 1996 HTTP/1.0 The abridged history of HTTP
13. 1996 HTTP/1.0 The abridged history of HTTP Adhoc Changes
14. “This HTTP thing is really taking off. We should catalog all the de facto standard protocol extensions that been adopted.”
15. HTTP/1.0 was not a standard but rather a compilation of best practices that had emerged.
16. 1999 HTTP/1.1 The abridged history of HTTP
17. HTTP/1.1 was a massive success.
18. Connection: Keep-Alive provided the much needed ability to persist TCP connections across requests.
19. Pipelining never gained widespread support, largely due to implementation complexity.
20. We are now going to travel back through time to 1999 when the web was a simpler place.
21. http://web.archive.org/web/19990508070818/http://www3.yahoo.com:80/
22. http://web.archive.org/web/19990508070818/http://www3.yahoo.com:80/ This is the era when <table> ruled page layouts
23. http://web.archive.org/web/19990117032727/http://www.google.com:80/
24. So what precipitated the need for a new version of HTTP?
25. 1999 HTTP/1.1 The abridged history of HTTP
26. 1999 HTTP/1.1 Rob’s first website The abridged history of HTTP
27. 1999 HTTP/1.1 Rob’s first website The abridged history of HTTP 2004 “Web 2.0”
28. Web page weight gain 700 kB 80 3284 kB 108 # requests page size 2010 2017
29. TCP is optimized for long flows… …web pages typically have many short ones
30. “For HTTP/1 74% of our active connections carry just a single transaction - persistent connections just aren't as helpful as we all want.” - Patrick McManus, Mozilla
31. “You don't have to be an engineer to be a racing driver, but you do have to have mechanical sympathy.” - Jackie Stewart
32. Issues with HTTP/1.x Head-of-line Blocking Lack of Parallelism Protocol Overhead
33. Only one request can be outstanding on a connection at any point in time Image via https://www.flickr.com/photos/ivoposthumus/8385430378
34. Head of line blocking Slow Response
35. Poor bandwidth utilization Processing request Processing request Network idle Network idle
36. :authority: www.bankwest.com.au :method: GET :path: /etc/clientlibs/dtm/bw-dtm-config/af27f6333b4c7c76398b2602be76dbf96 :scheme: https accept: */* accept-encoding: gzip, deflate, br accept-language: en-US,en;q=0.8 cache-control: no-cache cookie: JSESSIONID=BE056DF42B8A33245443C18C6BDD83DE; AWSELB=D739253506AB16 4225E86F8ADB10064C84FD43D1730B9B017999C004025758CEC0F5F93E55CB1934783B2FF7 670F03C545EDCB976AF90500354D65C74362F403; AMCVS_C7671CFE532E6D320A490D45%4 AdobeOrg=1; s_vnum=1505269579970%26vn%3D1; existingSession=true; s_ppvl=bw credit-cards%253Acompare-business-credit-cards%253Amastercard-low-rate%2C3 user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWe Headers are sent on every request
37. :authority: www.bankwest.com.au :method: GET :path: /etc/clientlibs/dtm/bw-dtm-config/af27f6333b4c7c76398b2602be76dbf96 :scheme: https accept: */* accept-encoding: gzip, deflate, br accept-language: en-US,en;q=0.8 cache-control: no-cache cookie: JSESSIONID=BE056DF42B8A33245443C18C6BDD83DE; AWSELB=D739253506AB16 4225E86F8ADB10064C84FD43D1730B9B017999C004025758CEC0F5F93E55CB1934783B2FF7 670F03C545EDCB976AF90500354D65C74362F403; AMCVS_C7671CFE532E6D320A490D45%4 AdobeOrg=1; s_vnum=1505269579970%26vn%3D1; existingSession=true; s_ppvl=bw credit-cards%253Acompare-business-credit-cards%253Amastercard-low-rate%2C3 user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWe Headers are sent on every request A lot of duplicate data is transferred uncompressed across the wire.
38. We have hacked out HTTP1/x best practices https://www.flickr.com/photos/canadianveggie/6774413477
39. Domain Sharding
40. Domain Sharding static1.example.com static2.example.com static3.example.com Modern browsers will open at most 6 concurrent connections to any single origin. Sharding requests across multiple domains allows us to overcome this limitation. This comes at a cost however….
41. The cost of establishing a connection SYN SYN ACK ACK Client Hello Server Hello Certificate Server Hello Done Client Key Exchange Change Cipher Spec Finished Change Cipher Spec Finished
42. …and we’re not done yet. TCP starts slowly. GET /me.webp 10 x TCP Packet 10 x ACK 14600 bytes 20 x TCP Packet 29200 bytes 20 x ACK 6 x TCP Packet 7400 bytes 6 x ACK Size = 50Kb Initial cwnd = 10
43. Image via https://www.flickr.com/photos/volvob12b/8096363022 Increases risk of network congestion and packet loss
44. Ensure page level optimizations align with any overarching Quality of Service (QoS) policy.
45. Image Sprites
46. To get just one sprite, the browser must download and decode the entire image. Likewise if just one sprite changes the entire cached image on the client is invalidated. We are trading cache efficiency for reduced network requests.
47. Resource Concatenation Image via https://www.flickr.com/photos/samcatchesides/3326878608
48. JavaScript and CSS bundles { } { } { } { } {;} {;} {;} {;} bundle.css bundle.js
49. JavaScript and CSS bundles { } { } { } { } {;} {;} {;} {;} bundle.css bundle.js X
50. JavaScript and CSS bundles { } { } { } { } {;} {;} {;} {;} bundle.css bundle.js When just one resource changes the entire cached bundle is invalidated X X
51. Resource Inlining Image via https://www.flickr.com/photos/backpackphotography/2318062662
52. Above the fold CSS is a good candidate to be inlined.
53. url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/4QBGRXhpZgAATU0AKgAAAAgABAESAAMAAAABAAEAAFEQ AAEAAAABAQAAAFERAAQAAAABAAAAAFESAAQAAAABAAAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBA MFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMD AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAPAEADASIAAhEB AxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUE GE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dn d4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8 QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcR MiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl 6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6 /9oADAMBAAIRAxEAPwD9NvHHinxZrHxD+Iws/GGuabH4evN1vANRaG32vdLDsJLAIo3gj6Y71zd7rXxU037YLjxB4khk08sLlG1k7 oQs4tyxAf7olIXPcHcMr81d/wDE79nD4gJ8SfFlzoumWGraP4mnE0vmXEaCVPMEwjYM6su2RQcqedo5wSKqXfwk+Mmo2V1Dd aFpt19u877RI9xbrJMZZ0nYkrIBkPGmCAMKAvQKB/KeYZRmssRWVWli1JOpZwU3GT9pNxfVW5XCzjpZPTZv95weYYGNGm6c8O 4tQupOKklyRTXR35lK9+680uesP+FlR3t9DqXirxLatbWepSxiDVjcl7iyjDvAwSQ4PKj/AIEMZwRVDRtS+KniK4WGx8R69dyNfNpoW PXMn7QsLzGP7/Xy43OehKFQSwIrsJfhL8Zpbm4m/sSxjmupL2V5I7yFGV7xVWdlIlypIVcEfdxkYNQn4MfGRPEF9qUOj2drc6lc2t5 d+Tc2yJcTWziSORl343bxuYj7xLE5yc41Mpx14pUcdyqWuk+Zx5V1ta/MrbaRd9WrPSOYYazbqYW9tNYWTv2ve3Lrvq1bS91ymlal 8WNctLOez1zxNcR3+z7OV1Zv3gaWOEHlxgCWREOcbW3A42ttgv8Axb8QNM8Fza1P401pYodQTTfIGqymbzDD5pyM/LtBUFT8 wJYEKVOemn/Z6+LF7pNnZ3fh3T74afNNPbzT3Nu00ZmcySDcJBkNIS+SNyknaVBIqbxN8CvjB4w0aex1HRba6hnuIbovJewPMsk UAgU+Y0pZiY1AYuWJIznJOeOeT5t7GThSxvPy6XVS3Ny63slZKWi1ldWbtqjphmGB9olOpheW+tnC/Lfzbu3HfRWd0r6MzfBuv+N fiJ4kmtofF3iq3jtrG1ncw3kzfet48njPO9gTnAwXYn5cHpNB1zxp8NPjJ4St7rxPr2p2esan9ilivppJImi3JGeH43bvNII52pG3G8qMe2 /Zh+Jfh7xPZatp+iW7TRWkUeGvYMxsLcQOp+fvhiCCcqwzyWUaHg79nL4iv8ZdA8QaxosMcVnf20tzKt5A22KNwegfJCqAqgDhV Uc459jLsLnUPZwlhsT7b2yfP+95VDnTv2tbRp9Nb9DzMZVy6fNKNeh7L2T933L83K1bve+qffS3U//Z) We also inline using DataURIs… …resulting in larger downloads and overriding browser priorities
54. These best practices create a tension... …between development and production
55. Build tools help address this impedance mismatch
56. The cost of such tooling is managing the added complexity
57. 2009 SPDY The abridged history of HTTP
58. Latency is the new bottleneck https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
59. Latency is the new bottleneck https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ In many scenarios latency, not bandwidth, is the constraining factor on network performance.
60. 2015 HTTP/2 The abridged history of HTTP
61. HTTP/2 is a protocol designed for low-latency transport of content over the World Wide Web
62. Adoption is rising with 16.2% of websites now leveraging HTTP/2 * * source: https://w3techs.com (2017-09-15)
63. HTTP/2 respects existing HTTP semantics. Not breaking the web is a good idea.
64. With HTTP/2 all communication occurs over a single TCP connection per origin.
65. HTTP/2 Binary Framing POST /products HTTP/1.1 Content-Type: application/json Content-Length: 21 HTTP/1.1 HTTP/2 DATA frame (payload) HEADERS frame (meta-data) { “name”: “Hero Saver” }
66. HTTP/2 Binary Framing Client Server HTTP/2 Connection Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA Stream 2 DATA Stream 5 DATA Stream 4 DATA Multiplexing is possible as frames can be interleaved
67. Better bandwidth utilization As request streams can be multiplexed the client no longer needs to queue requests.
68. Only 25% of HTTP/2 connections carry a single transaction.
69. With the efficiency that streams bring we are finally in a position to maximise the benefit of HTTP caching.
70. With HTTP/2 the browser relies on the server to deliver data in an optimal way.
71. Stream Prioritization With HTTP/1.x the browser defines the priority. With HTTP/2 the browser hints the priority via stream weights and dependencies. The server is not obligated to respect these hints. * id:A w:1 id:B w:4 id:C w:4 id:D w:8 id:E w:2
72. HTTPS/2 Image via https://www.flickr.com/photos/sugarhiccuphiccup/4617472996
73. The Internet is strewn with middle-box debris Image via https://www.flickr.com/photos/usfwspacific/33882304895
74. Middle-box debris Client Server A lot of middle-boxes on the internet assume HTTP would never change. They expect text based traffic over port 80 and HTTP/2 binary data causes interoperability issues, mostly resulting in termination of the connection. In trials, between 20-30% of HTTP/2 traffic over port 80 was affected. Firewall WAN Optimizer IDS NAT X
75. When served over HTTP/2 over TLS, version 1.2 or higher must be used along with perfect forward secrecy cypher suites.
76. HTTPS adoption more than doubled in 2016 and now accounts for more than 50% of traffic on the web.
77. For many sites, deploying HTTPS will be the most difficult part of migrating to HTTP/2.
78. Protocol negotiation with ALPN (RFC 7301) Client Hello ( ALPN Extension + List of Protocols ) Server Hello ( ALPN Extension + Selected Protocol ) ALPN performs the equivalent function that Next Protocol Negotiation (NPN) did in SPDY.
79. Header Compression via HPACK https://www.flickr.com/photos/23119666@N03/16159122789
80. HPACK (RFC 7541) Techniques ▪ Index value for common header/values ▪ Indexed list of previously sent headers ▪ Huffman encoding to compress value Static Table ▪ Predefined common headers/values Dynamic Table ▪ Maximum size
81. 192.168.10.101 192.168.10.101 https://www.example.com https://www.cnd.example.com Connection Coalescing A TCP connection will be reused between two origins if: ▪ The origins resolve to the same server IP address. ▪ The origins are covered by the same TLS certificate.
82. Mitigating latency is fine but they should have fixed <insert your favorite HTTP peeve here>
83. “HTTP/2 isn’t magic Web performance pixie dust; you can’t drop it in and expect your page load times to decrease by 50%.” - Mark Nottingham
84. SERVER Image via https://www.flickr.com/photos/mryipyop/1673801831/
85. Server Push Processing request
86. Server Push Processing request Client can reject push promise via RST_STREAM
87. A client may choose to opt out of Server Push via SETTINGS frame.
88. HTTP/2 push is a low-level networking feature, its available to anything that uses the networking stack.
89. Server Push Page Service Worker HTTP Cache Server Push Cache HTTP/2 Connection An item can only be read from the push cache once. The push cache has the lowest priority. If a matching item is found in an upstream cache, then the value in the push cache will not be used.
90. If the connection is closed then it’s push cache is also lost.
91. Requests without credentials use a separate connection. Handling these scenarios are key. fetch(url, {credentials: 'include'});
92. Browser support is well…inconsistent
93. Use User-Agent sniffing to only push resources to particular browsers.
94. A bad server push strategy will perform worse than not supporting it at all. Caveat Emptor
95. “An interesting observation about network-based applications is that the best application performance is obtained by not using the network.” - Roy Fielding
96. Cache Digest will allow clients to inform the server of the resources they already have.
97. So now we have Server Push do we need <link rel=”preload”> or <link rel=”prefetch”> anymore?
98. Good ideas with both HTTP/1.x and HTTP/2 Image via https://www.flickr.com/photos/lloydcrew/3263012874
99. Minimize DNS lookups Requests are blocked by unresolved names
100. Reuse existing TCP connections Establishing a connection is expensive
101. Minimize number of HTTP redirects
102. Minimize data sent across the network through removing waste and effective caching
103. Use a CDN to reduce latency including uncached origin fetches
104. https://www.flickr.com/photos/rowenaoscura/8937849314 Tools to make your HTTP/2 life easier
105. chrome://net-internals
106. webpagetest
107. wireshark
108. QUIC The abridged history of HTTP
109. Serving HTTP/2 over TCP removes head-of-line blocking at the application layer but not the transport layer.
110. QUIC - A key goal of QUIC is reduce TLS handshake overhead. - 0 RTT for resuming session - 1 RTT for new session - Head-of-line blocking is eliminated at the transport layer. IP UDP QUIC HTTP/2 API
111. So now you know HTTP/2, go try it out.
112. Questions https://www.flickr.com/photos/abulic_monkey/1802610068