Tweet
Tweet

Slide 1

Slide 1 text

HTTP/2 the future of the web today @robdcrowley | robdcrowley https://www.flickr.com/photos/79909830@N04/15599391872

Slide 2

Slide 2 text

Slides are available at https://bit.ly/ndcsydney-http2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

HTTP is the foundation of data communication for the World Wide Web.

Slide 5

Slide 5 text

Internet Protocol Stack Network Access IP TCP UDP DNS, TFTP etc. Application Layer Network Layer Internet Layer Transport Layer HTTP , FTP etc.

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

1990 HTTP/0.9 The abridged history of HTTP

Slide 10

Slide 10 text

HTTP/0.9 was the ultimate MVP

Slide 11

Slide 11 text

> telnet example.com 80 connected to 74.128.xxx.xxx GET /about/ (hypertext response) (connection closed)

Slide 12

Slide 12 text

1996 HTTP/1.0 The abridged history of HTTP

Slide 13

Slide 13 text

1996 HTTP/1.0 The abridged history of HTTP Adhoc Changes

Slide 14

Slide 14 text

“This HTTP thing is really taking off. We should catalog all the de facto standard protocol extensions that been adopted.”

Slide 15

Slide 15 text

HTTP/1.0 was not a standard but rather a compilation of best practices that had emerged.

Slide 16

Slide 16 text

1999 HTTP/1.1 The abridged history of HTTP

Slide 17

Slide 17 text

HTTP/1.1 was a massive success.

Slide 18

Slide 18 text

Connection: Keep-Alive provided the much needed ability to persist TCP connections across requests.

Slide 19

Slide 19 text

Pipelining never gained widespread support, largely due to implementation complexity.

Slide 20

Slide 20 text

We are now going to travel back through time to 1999 when the web was a simpler place.

Slide 21

Slide 21 text

http://web.archive.org/web/19990508070818/http://www3.yahoo.com:80/

Slide 22

Slide 22 text

http://web.archive.org/web/19990508070818/http://www3.yahoo.com:80/ This is the era when ruled page layouts

Slide 23

Slide 23 text

http://web.archive.org/web/19990117032727/http://www.google.com:80/

Slide 24

Slide 24 text

So what precipitated the need for a new version of HTTP?

Slide 25

Slide 25 text

1999 HTTP/1.1 The abridged history of HTTP

Slide 26

Slide 26 text

1999 HTTP/1.1 Rob’s first website The abridged history of HTTP

Slide 27

Slide 27 text

1999 HTTP/1.1 Rob’s first website The abridged history of HTTP 2004 “Web 2.0”

Slide 28

Slide 28 text

Web page weight gain 700 kB 80 3284 kB 108 # requests page size 2010 2017

Slide 29

Slide 29 text

TCP is optimized for long flows… …web pages typically have many short ones

Slide 30

Slide 30 text

“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

Slide 31

Slide 31 text

“You don't have to be an engineer to be a racing driver, but you do have to have mechanical sympathy.” - Jackie Stewart

Slide 32

Slide 32 text

Issues with HTTP/1.x Head-of-line Blocking Lack of Parallelism Protocol Overhead

Slide 33

Slide 33 text

Only one request can be outstanding on a connection at any point in time Image via https://www.flickr.com/photos/ivoposthumus/8385430378

Slide 34

Slide 34 text

Head of line blocking Slow Response

Slide 35

Slide 35 text

Poor bandwidth utilization Processing request Processing request Network idle Network idle

Slide 36

Slide 36 text

: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

Slide 37

Slide 37 text

: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.

Slide 38

Slide 38 text

We have hacked out HTTP1/x best practices https://www.flickr.com/photos/canadianveggie/6774413477

Slide 39

Slide 39 text

Domain Sharding

Slide 40

Slide 40 text

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….

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

…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

Slide 43

Slide 43 text

Image via https://www.flickr.com/photos/volvob12b/8096363022 Increases risk of network congestion and packet loss

Slide 44

Slide 44 text

Ensure page level optimizations align with any overarching Quality of Service (QoS) policy.

Slide 45

Slide 45 text

Image Sprites

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

Resource Concatenation Image via https://www.flickr.com/photos/samcatchesides/3326878608

Slide 48

Slide 48 text

JavaScript and CSS bundles { } { } { } { } {;} {;} {;} {;} bundle.css bundle.js

Slide 49

Slide 49 text

JavaScript and CSS bundles { } { } { } { } {;} {;} {;} {;} bundle.css bundle.js X

Slide 50

Slide 50 text

JavaScript and CSS bundles { } { } { } { } {;} {;} {;} {;} bundle.css bundle.js When just one resource changes the entire cached bundle is invalidated X X

Slide 51

Slide 51 text

Resource Inlining Image via https://www.flickr.com/photos/backpackphotography/2318062662

Slide 52

Slide 52 text

Above the fold CSS is a good candidate to be inlined.

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

These best practices create a tension... …between development and production

Slide 55

Slide 55 text

Build tools help address this impedance mismatch

Slide 56

Slide 56 text

The cost of such tooling is managing the added complexity

Slide 57

Slide 57 text

2009 SPDY The abridged history of HTTP

Slide 58

Slide 58 text

Latency is the new bottleneck https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

2015 HTTP/2 The abridged history of HTTP

Slide 61

Slide 61 text

HTTP/2 is a protocol designed for low-latency transport of content over the World Wide Web

Slide 62

Slide 62 text

Adoption is rising with 16.2% of websites now leveraging HTTP/2 * * source: https://w3techs.com (2017-09-15)

Slide 63

Slide 63 text

HTTP/2 respects existing HTTP semantics. Not breaking the web is a good idea.

Slide 64

Slide 64 text

With HTTP/2 all communication occurs over a single TCP connection per origin.

Slide 65

Slide 65 text

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” }

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Better bandwidth utilization As request streams can be multiplexed the client no longer needs to queue requests.

Slide 68

Slide 68 text

Only 25% of HTTP/2 connections carry a single transaction.

Slide 69

Slide 69 text

With the efficiency that streams bring we are finally in a position to maximise the benefit of HTTP caching.

Slide 70

Slide 70 text

With HTTP/2 the browser relies on the server to deliver data in an optimal way.

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

HTTPS/2 Image via https://www.flickr.com/photos/sugarhiccuphiccup/4617472996

Slide 73

Slide 73 text

The Internet is strewn with middle-box debris Image via https://www.flickr.com/photos/usfwspacific/33882304895

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

When served over HTTP/2 over TLS, version 1.2 or higher must be used along with perfect forward secrecy cypher suites.

Slide 76

Slide 76 text

HTTPS adoption more than doubled in 2016 and now accounts for more than 50% of traffic on the web.

Slide 77

Slide 77 text

For many sites, deploying HTTPS will be the most difficult part of migrating to HTTP/2.

Slide 78

Slide 78 text

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.

Slide 79

Slide 79 text

Header Compression via HPACK https://www.flickr.com/photos/23119666@N03/16159122789

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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.

Slide 82

Slide 82 text

Mitigating latency is fine but they should have fixed

Slide 83

Slide 83 text

“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

Slide 84

Slide 84 text

SERVER Image via https://www.flickr.com/photos/mryipyop/1673801831/

Slide 85

Slide 85 text

Server Push Processing request

Slide 86

Slide 86 text

Server Push Processing request Client can reject push promise via RST_STREAM

Slide 87

Slide 87 text

A client may choose to opt out of Server Push via SETTINGS frame.

Slide 88

Slide 88 text

HTTP/2 push is a low-level networking feature, its available to anything that uses the networking stack.

Slide 89

Slide 89 text

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.

Slide 90

Slide 90 text

If the connection is closed then it’s push cache is also lost.

Slide 91

Slide 91 text

Requests without credentials use a separate connection. Handling these scenarios are key. fetch(url, {credentials: 'include'});

Slide 92

Slide 92 text

Browser support is well…inconsistent

Slide 93

Slide 93 text

Use User-Agent sniffing to only push resources to particular browsers.

Slide 94

Slide 94 text

A bad server push strategy will perform worse than not supporting it at all. Caveat Emptor

Slide 95

Slide 95 text

“An interesting observation about network-based applications is that the best application performance is obtained by not using the network.” - Roy Fielding

Slide 96

Slide 96 text

Cache Digest will allow clients to inform the server of the resources they already have.

Slide 97

Slide 97 text

So now we have Server Push do we need or anymore?

Slide 98

Slide 98 text

Good ideas with both HTTP/1.x and HTTP/2 Image via https://www.flickr.com/photos/lloydcrew/3263012874

Slide 99

Slide 99 text

Minimize DNS lookups Requests are blocked by unresolved names

Slide 100

Slide 100 text

Reuse existing TCP connections Establishing a connection is expensive

Slide 101

Slide 101 text

Minimize number of HTTP redirects

Slide 102

Slide 102 text

Minimize data sent across the network through removing waste and effective caching

Slide 103

Slide 103 text

Use a CDN to reduce latency including uncached origin fetches

Slide 104

Slide 104 text

https://www.flickr.com/photos/rowenaoscura/8937849314 Tools to make your HTTP/2 life easier

Slide 105

Slide 105 text

chrome://net-internals

Slide 106

Slide 106 text

webpagetest

Slide 107

Slide 107 text

wireshark

Slide 108

Slide 108 text

QUIC The abridged history of HTTP

Slide 109

Slide 109 text

Serving HTTP/2 over TCP removes head-of-line blocking at the application layer but not the transport layer.

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

So now you know HTTP/2, go try it out.

Slide 112

Slide 112 text

Questions https://www.flickr.com/photos/abulic_monkey/1802610068