Tweet
Tweet

Slide 1

Slide 1 text

Demystifying SPDY and HTTP/2 Jonathan Klein @jonathanklein April 21, 2015

Slide 2

Slide 2 text

Slides, Links jkle.in/http2

Slide 3

Slide 3 text

H/2 == HTTP/2

Slide 4

Slide 4 text

Figures from this book

Slide 5

Slide 5 text

About Me @jonathanklein jkle.in/http2

Slide 6

Slide 6 text

About Me !Formerly a performance engineer at Etsy @jonathanklein jkle.in/http2

Slide 7

Slide 7 text

About Me !Formerly a performance engineer at Etsy !Started the Boston Web Perf Meetup Group @jonathanklein jkle.in/http2

Slide 8

Slide 8 text

About Me !Formerly a performance engineer at Etsy !Started the Boston Web Perf Meetup Group !Former CTO at a pre-product startup in Boston @jonathanklein jkle.in/http2

Slide 9

Slide 9 text

About Me !Formerly a performance engineer at Etsy !Started the Boston Web Perf Meetup Group !Former CTO at a pre-product startup in Boston !Planned on launching with HTTPS everywhere and H/2 support @jonathanklein jkle.in/http2

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

SPDY Experimental protocol developed at Google

Slide 12

Slide 12 text

SPDY Experimental protocol developed at Google H/2 Official second major version of HTTP, based on SPDY

Slide 13

Slide 13 text

SPDY’s Future, H/2 Status @jonathanklein jkle.in/http2

Slide 14

Slide 14 text

SPDY’s Future, H/2 Status !H/2 approved by the IETF for publication as standards-track RFCs @jonathanklein jkle.in/http2

Slide 15

Slide 15 text

SPDY’s Future, H/2 Status !H/2 approved by the IETF for publication as standards-track RFCs !Chrome removing SPDY support in 2016 @jonathanklein jkle.in/http2

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

TCP/IP Network Model

Slide 22

Slide 22 text

TCP/IP Network Model

Slide 23

Slide 23 text

TCP/IP Network Model

Slide 24

Slide 24 text

TCP Three Way Handshake Time From HPBN

Slide 25

Slide 25 text

TCP Three Way Handshake Time From HPBN

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

2,696 miles one way

Slide 29

Slide 29 text

2,696 miles one way Speed of Light = 186,000 miles / sec

Slide 30

Slide 30 text

2,696 miles one way Speed of Light = 186,000 miles / sec Assumed RTT = 28ms

Slide 31

Slide 31 text

Actual RTT ~ 75ms

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

From HPBN

Slide 34

Slide 34 text

Congestion Collapse “This condition is stable. Once the saturation point has been reached, if the algorithm for selecting packets to be dropped is fair, the network will continue to operate in a degraded condition.” - RFC 896 @jonathanklein jkle.in/http2

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

From HPBN

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

6 connections

Slide 41

Slide 41 text

HTTP Head-of-line Blocking A single slow response blocks all requests behind it.

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

TCP/IP Network Model

Slide 44

Slide 44 text

From HPBN HTTP Head-of-line Blocking

Slide 45

Slide 45 text

What About HTTP Pipelining? “…if the web browser is the primary delivery vehicle for your web application, then we can’t count on HTTP pipelining to help with performance.” - High Performance Browser Networking @jonathanklein jkle.in/http2

Slide 46

Slide 46 text

6 connections

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Workarounds and Downsides @jonathanklein jkle.in/http2

Slide 49

Slide 49 text

Workarounds and Downsides !Multiple TCP Connections @jonathanklein jkle.in/http2

Slide 50

Slide 50 text

Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization @jonathanklein jkle.in/http2

Slide 51

Slide 51 text

Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition @jonathanklein jkle.in/http2

Slide 52

Slide 52 text

Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding @jonathanklein jkle.in/http2

Slide 53

Slide 53 text

Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) @jonathanklein jkle.in/http2

Slide 54

Slide 54 text

Workarounds and Downsides !Multiple TCP Connections ! Extra resource utilization ! Bandwidth competition !Domain Sharding ! Extra DNS Lookup(s) ! Implementation complexity @jonathanklein jkle.in/http2

Slide 55

Slide 55 text

H/2 Multiplexing

Slide 56

Slide 56 text

H/2 Multiplexing @jonathanklein jkle.in/http2 From HPBN

Slide 57

Slide 57 text

H/2 Multiplexing !Interleave multiple requests/responses on the same connection @jonathanklein jkle.in/http2 From HPBN

Slide 58

Slide 58 text

H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No more head-of-line blocking! @jonathanklein jkle.in/http2 From HPBN

Slide 59

Slide 59 text

H/2 Multiplexing !Interleave multiple requests/responses on the same connection !No more head-of-line blocking! @jonathanklein jkle.in/http2 From HPBN

Slide 60

Slide 60 text

Forget about… @jonathanklein jkle.in/http2

Slide 61

Slide 61 text

Forget about… !Combining CSS and JS files @jonathanklein jkle.in/http2

Slide 62

Slide 62 text

Forget about… !Combining CSS and JS files !Inlining small CSS/JS @jonathanklein jkle.in/http2

Slide 63

Slide 63 text

Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites @jonathanklein jkle.in/http2

Slide 64

Slide 64 text

Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites !Using DataURIs @jonathanklein jkle.in/http2

Slide 65

Slide 65 text

Forget about… !Combining CSS and JS files !Inlining small CSS/JS !Using image sprites !Using DataURIs !Domain sharding @jonathanklein jkle.in/http2

Slide 66

Slide 66 text

What About HTTP Headers?

Slide 67

Slide 67 text

Request Headers GET /ajax/libs/jquery/1.7.2/jquery.min.js HTTP/1.1 Host: cdn.oreillystatic.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/ 537.36 Referer: http://fluentconf.com/javascript-html-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/http2

Slide 68

Slide 68 text

Response Headers HTTP/1.1 200 OK Server: Apache Vary: Accept-Encoding Last-Modified: Thu, 02 Aug 2012 22:41:31 GMT Accept-Ranges: bytes Content-Encoding: gzip Content-Length: 33622 Content-Type: application/javascript Cache-Control: max-age=2236992 Expires: Thu, 30 Apr 2015 17:21:11 GMT Date: Sat, 04 Apr 2015 19:57:59 GMT Connection: keep-alive @jonathanklein jkle.in/http2

Slide 69

Slide 69 text

Request Headers GET /en/assets/1/eventprovider/1/lazyload_min_v3.js HTTP/1.1 Host: cdn.oreillystatic.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/ 537.36 Referer: http://fluentconf.com/javascript-html-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/http2

Slide 70

Slide 70 text

Request Headers GET /en/assets/1/eventprovider/1/lazyload_min_v3.js HTTP/1.1 Host: cdn.oreillystatic.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/ 537.36 Referer: http://fluentconf.com/javascript-html-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/http2

Slide 71

Slide 71 text

From HPBN HPACK

Slide 72

Slide 72 text

Why HPACK and not zlib? !CRIME attack ! zlib + encryption = session hijacking !HPACK: New, header specific compression algorithm @jonathanklein jkle.in/http2

Slide 73

Slide 73 text

requests https://www.mnot.net/talks/http2-expectations/#/tsv

Slide 74

Slide 74 text

Request Prioritization and Server Push

Slide 75

Slide 75 text

Server Push @jonathanklein jkle.in/http2

Slide 76

Slide 76 text

Server Push !Resources can be… @jonathanklein jkle.in/http2

Slide 77

Slide 77 text

Server Push !Resources can be… ! Cached by client @jonathanklein jkle.in/http2

Slide 78

Slide 78 text

Server Push !Resources can be… ! Cached by client ! Declined by client @jonathanklein jkle.in/http2

Slide 79

Slide 79 text

Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed @jonathanklein jkle.in/http2

Slide 80

Slide 80 text

Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed ! Prioritized by server @jonathanklein jkle.in/http2

Slide 81

Slide 81 text

Server Push !Resources can be… ! Cached by client ! Declined by client ! Multiplexed ! Prioritized by server !Must obey same-origin policy @jonathanklein jkle.in/http2

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

Data From Google @jonathanklein jkle.in/http2 time from first request byte to the onload event

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

H/1

Slide 86

Slide 86 text

H/2

Slide 87

Slide 87 text

Key Stats @jonathanklein jkle.in/http2 H/1 H/2 Difference Bytes 387KB 387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14%

Slide 88

Slide 88 text

What About HTTPS? Not required by spec, but Firefox and Chrome will require it

Slide 89

Slide 89 text

istlsfastyet.com

Slide 90

Slide 90 text

Criticism

Slide 91

Slide 91 text

Criticism @jonathanklein jkle.in/http2

Slide 92

Slide 92 text

Criticism “It was rushed, we wanted more” @jonathanklein jkle.in/http2

Slide 93

Slide 93 text

Criticism “It was rushed, we wanted more” - Something good now > something perfect in 5 years @jonathanklein jkle.in/http2

Slide 94

Slide 94 text

Criticism “It was rushed, we wanted more” - Something good now > something perfect in 5 years “Why does it require TLS?” @jonathanklein jkle.in/http2

Slide 95

Slide 95 text

Criticism “It was rushed, we wanted more” - Something good now > something perfect in 5 years “Why does it require TLS?” - The spec doesn’t, some browsers do @jonathanklein jkle.in/http2

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

Implementation

Slide 98

Slide 98 text

Webservers @jonathanklein jkle.in/http2 https://istlsfastyet.com/

Slide 99

Slide 99 text

CDN Support @jonathanklein jkle.in/http2 https://istlsfastyet.com/

Slide 100

Slide 100 text

Handling Both H/1 and H/2 Clients @jonathanklein jkle.in/http2 Okay to Keep Stop Combining CSS/JS Domain Sharding Spriting Inlining Content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Wrapping Up @jonathanklein jkle.in/http2

Slide 103

Slide 103 text

Wrapping Up !H/2 is here @jonathanklein jkle.in/http2

Slide 104

Slide 104 text

Wrapping Up !H/2 is here !H/2 is fast @jonathanklein jkle.in/http2

Slide 105

Slide 105 text

Wrapping Up !H/2 is here !H/2 is fast !H/2 is supported @jonathanklein jkle.in/http2

Slide 106

Slide 106 text

Wrapping Up !H/2 is here !H/2 is fast !H/2 is supported … go implement it! @jonathanklein jkle.in/http2

Slide 107

Slide 107 text

Thanks! http://jkle.in/http2 @jonathanklein @jonathanklein jkle.in/http2