Tweet
Tweet

Slide 1

Slide 1 text

Demystifying SPDY and HTTP/2 Jonathan Klein @jonathanklein October 29th, 2015

Slide 2

Slide 2 text

Slides, Links jkle.in/amsterdam

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/amsterdam

Slide 6

Slide 6 text

About Me !Director of Engineering at Attend @jonathanklein jkle.in/amsterdam

Slide 7

Slide 7 text

About Me !Director of Engineering at Attend !Formerly a performance engineer at Etsy @jonathanklein jkle.in/amsterdam

Slide 8

Slide 8 text

About Me !Director of Engineering at Attend !Formerly a performance engineer at Etsy !Started the Boston Web Perf Meetup Group @jonathanklein jkle.in/amsterdam

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

SPDY Experimental protocol developed at Google

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

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

No content

Slide 22

Slide 22 text

TCP/IP Network Model

Slide 23

Slide 23 text

TCP/IP Network Model

Slide 24

Slide 24 text

TCP/IP Network Model

Slide 25

Slide 25 text

TCP Three Way Handshake Time From HPBN

Slide 26

Slide 26 text

TCP Three Way Handshake Time From HPBN

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

5,555 km one way

Slide 30

Slide 30 text

5,555 km one way Speed of Light = 300,000 km / sec

Slide 31

Slide 31 text

5,555 km one way Speed of Light = 300,000 km / sec Assumed RTT = 37ms

Slide 32

Slide 32 text

Actual RTT ~ 76ms

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

From HPBN

Slide 35

Slide 35 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/amsterdam

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

From HPBN

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

6 connections

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

TCP/IP Network Model

Slide 45

Slide 45 text

From HPBN HTTP Head-of-line Blocking

Slide 46

Slide 46 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/amsterdam

Slide 47

Slide 47 text

6 connections

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Workarounds and Downsides @jonathanklein jkle.in/amsterdam

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

H/2 Multiplexing

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

H/2 Multiplexing !Interleave multiple requests/responses on the same connection @jonathanklein jkle.in/amsterdam 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/amsterdam From HPBN

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Forget about… @jonathanklein jkle.in/amsterdam

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

What About HTTP Headers?

Slide 68

Slide 68 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://velocityconf.com/devops-web-performance-eu-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/amsterdam

Slide 69

Slide 69 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/amsterdam

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://velocityconf.com/devops-web-performance-eu-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/amsterdam

Slide 71

Slide 71 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://velocityconf.com/devops-web-performance-eu-2015 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 @jonathanklein jkle.in/amsterdam

Slide 72

Slide 72 text

From HPBN HPACK

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Request Prioritization and Server Push

Slide 76

Slide 76 text

Server Push @jonathanklein jkle.in/amsterdam

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

H/1

Slide 87

Slide 87 text

H/2

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

istlsfastyet.com

Slide 91

Slide 91 text

Criticism

Slide 92

Slide 92 text

Criticism @jonathanklein jkle.in/amsterdam

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

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?” @jonathanklein jkle.in/amsterdam

Slide 96

Slide 96 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/amsterdam

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Implementation

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

Combining CSS/JS Tradeoffs !Gzip compression ratio @jonathanklein jkle.in/amsterdam

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

Combining CSS/JS Tradeoffs !Gzip compression ratio !File I/O @jonathanklein jkle.in/amsterdam

Slide 110

Slide 110 text

Combining CSS/JS Tradeoffs !Gzip compression ratio !File I/O !Header overhead @jonathanklein jkle.in/amsterdam

Slide 111

Slide 111 text

Combining CSS/JS Tradeoffs !Gzip compression ratio !File I/O !Header overhead !Caching @jonathanklein jkle.in/amsterdam

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

1. Domains ==> Same IP

Slide 114

Slide 114 text

2. Wildcard TLS Certificate

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

Wrapping Up @jonathanklein jkle.in/amsterdam

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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