HTTP/2 is Web Performance Candy

Slide 1

Slide 1 text

HTTP2 is web performance candy Clay Smith, New Relic @smithclay Forward 4 Web Technology Summit - February 10, 2016

Slide 2

Slide 2 text

This talk covers Introduction to the HTTP/2 protocol for web people How HTTP/2 changes web performance best practices Practical HTTP/2 debugging

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

https://simple.wikipedia.org/wiki/Hypertext_Transfer_Protocol Hypertext Transfer Protocol (often abbreviated to HTTP) is a communications protocol. It is used to send and receive webpages and ﬁles on the internet.

Slide 5

Slide 5 text

HTTP 1.1 is nearly 20 years old It's the main application protocol of the information superhighway

Slide 6

Slide 6 text

HTTP 1.1 User-Agent: You telnet forwardjs.com 80 GET / HTTP/1.1

Slide 7

Slide 7 text

CyberTrend #1: We keep writing more JavaScript http://httparchive.org/trends.php?s=Top100&minlabel=Nov+15+2010&maxlabel=Jan+15+2016 10/2010 1/2016

Slide 8

Slide 8 text

CyberTrend #2: More bytes over the wire http://httparchive.org/trends.php?s=Top100&minlabel=Nov+15+2010&maxlabel=Jan+15+2016 10/2010 1/2016

Slide 9

Slide 9 text

We're in the "Website Obesity Crisis" http://idlewords.com/talks/website_obesity.htm CC SA A ﬂickr.com/photos/yukariryu/122530943

Slide 10

Slide 10 text

HTTP 1.1 is still partying like it's 1997 "It's king of the web" - Not from Titanic

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

SPDY became HTTP2 Ratiﬁed by the IETF in May 2015 caniuse.com: ~62% global browser support

Slide 13

Slide 13 text

HTTP2,explained with candy CC SA A ﬂickr.com/photos/74163184@N08/6813140711

Slide 14

Slide 14 text

+ TLS = HTTPS + TLS = HTTPS

Slide 15

Slide 15 text

Communication over a single TCP connection (sans TLS)

Slide 16

Slide 16 text

HTTP/2 has many streams Request Message A stream is bi-directional with one or more messages, an ID, and priority Response Message

Slide 17

Slide 17 text

Messages are composed of frames, the "fundamental unit" of HTTP/2 FRAME (DATA) Frames have different types and are blended. They are reassembled into messages using the stream ID. FRAME (DATA) FRAME (DATA)

Slide 18

Slide 18 text

THE FRAMES ARE FUNDAMENTAL AND BINARY

Slide 19

Slide 19 text

What changes in web perf best practices CC0 pixabay.com

Slide 20

Slide 20 text

Aside: Latency and physics Source Destination Great Circle Distance Speed in Fiber (mm 50µm) SFO London 5,375 mi 42 ms SFO Tokyo 5,124 mi 40 ms SFO Auckland 6,516 mi 51 ms SFO Capetown 10,124 mi 79 ms HTTP can't travel faster than the speed of light.

Slide 21

Slide 21 text

TCP Multiplexing is a big deal Multiple messages can share the same TCP connection without blocking each other or creating additional connections.

Slide 22

Slide 22 text

Goodbye old web performance hacks • Domain sharding • CSS Concatenation • JavaScript Concatenation • Inlining assets (including Base64 encoding)

Slide 23

Slide 23 text

Unbundle and cache the little files

Slide 24

Slide 24 text

Beware Compression performance may be impacted with hundreds of small ﬁles. http://engineering.khanacademy.org/posts/ js-packaging-http2.htm

Slide 25

Slide 25 text

Header Compression • Headers are compressed in HTTP/ 2. • Uses the HPACK algorithm (part of the HTTP/2 standard) • Reduced overall request size

Slide 26

Slide 26 text

Important: HTTPS is required

Slide 27

Slide 27 text

Determine HTTP2 support using TLS $ openssl s_client -servername google.com - connect google.com:443 -nextprotoneg '' CONNECTED(00000003) Protocols advertised by server: h2, spdy/3.1, http/1.1 TLS extension called Application Layer Protocol Negotiation (ALPN) that determine what application protocol to use. Must use OpenSSL > 1.0.2.

Slide 28

Slide 28 text

Free certificate advice Personal Business Might want to get an extended validation (EV) certificate? Check out letsencrypt.org CC flickr.com/photos/victorsounds/5639420638 CC flickr.com/photos/australianshepherds/2624094679

Slide 29

Slide 29 text

Not discussed • Streams: very cool (server-side push) • Request prioritization • Exotic HTTP/2 binary frame types (PING, RESET) • Further reading: http://daniel.haxx.se/http2/

Slide 30

Slide 30 text

Practical debugging with Wireshark 2 CC ﬂickr.com/photos/hwttdz/20632932769

Slide 31

Slide 31 text

Capture secret keys from Firefox or Chrome $ export SSLKEYLOGFILE=~/Desktop/tls_fun.log $ open -a Google\ Chrome https:// nghttp2.org/ Good tutorial on this: https://jimshaver.net/2015/02/11/decrypting-tls-browser- trafﬁc-with-wireshark-the-easy-way/ Step 1

Slide 32

Slide 32 text

Point Wireshark to the log file Step 2

Slide 33

Slide 33 text

Filter traffic on port 443 Step 3

Slide 34

Slide 34 text

Debug all the frames Step 4

Slide 35

Slide 35 text

Simpler option + rmurphey.com/ blog/2015/11/28/ chrome-http2-log- parser View frames directly in Chrome

Slide 36

Slide 36 text

What about old clients? Build for HTTP/2 browsers? Wait for broader support? Two versions of the site? Difﬁcult questions when implementing HTTP/2.

Slide 37

Slide 37 text

How do I eat this candy Backends must be updated (if possible)

Slide 38

Slide 38 text

I want to eat this candy faster CDNs can talk HTTP/2 to browsers that support it. Origin CDN Browser HTTP 1.1 HTTP/2

Slide 39

Slide 39 text

Adoption Trends Usage by site trafﬁc Total usage HTTP/2 isn't as popular as... ETag compression Source: http://w3techs.com/technologies/details/ce-http2/all/all

Slide 40

Slide 40 text

CC ﬂickr.com/photos/joiseyshowaa/2402764792 People just want the web to be fast and work HTTP/2 will likely help when correctly implemented.

Slide 41

Slide 41 text

HTTP2 is sweet (and thanks Slides posted in ~30 seconds on @smithclay + #forwardjs Blog post: http://bit.ly/http2candy