HTTP/2 is Web Performance Candy

For anyone who writes code for the web, transitioning to HTTP/2 isn't straightforward and a speed boost isn’t automatically guaranteed. The new protocol challenges common wisdom when building performant web applications and many existing tools like debugging proxies don't support it yet. This talk is an introduction to the new HTTP/2 protocol and how it changes web performance best practices.

Transcript

1. HTTP2 is web performance candy Clay Smith, New Relic @smithclay Forward 4 Web Technology Summit - February 10, 2016
2. This talk covers Introduction to the HTTP/2 protocol for web people How HTTP/2 changes web performance best practices Practical HTTP/2 debugging
4. 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 files on the internet.
5. HTTP 1.1 is nearly 20 years old It's the main application protocol of the information superhighway
6. HTTP 1.1 User-Agent: You telnet forwardjs.com 80 GET / HTTP/1.1
7. 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
8. 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
9. We're in the "Website Obesity Crisis" http://idlewords.com/talks/website_obesity.htm CC SA A flickr.com/photos/yukariryu/122530943
10. HTTP 1.1 is still partying like it's 1997 "It's king of the web" - Not from Titanic
12. SPDY became HTTP2 Ratified by the IETF in May 2015 caniuse.com: ~62% global browser support
13. HTTP2,explained with candy CC SA A flickr.com/photos/74163184@N08/6813140711
14. + TLS = HTTPS + TLS = HTTPS
15. Communication over a single TCP connection (sans TLS)
16. HTTP/2 has many streams Request Message A stream is bi-directional with one or more messages, an ID, and priority Response Message
17. 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)
18. THE FRAMES ARE FUNDAMENTAL AND BINARY
19. What changes in web perf best practices CC0 pixabay.com
20. 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.
21. TCP Multiplexing is a big deal Multiple messages can share the same TCP connection without blocking each other or creating additional connections.
22. Goodbye old web performance hacks • Domain sharding • CSS Concatenation • JavaScript Concatenation • Inlining assets (including Base64 encoding)
23. Unbundle and cache the little files
24. Beware Compression performance may be impacted with hundreds of small files. http://engineering.khanacademy.org/posts/ js-packaging-http2.htm
25. Header Compression • Headers are compressed in HTTP/ 2. • Uses the HPACK algorithm (part of the HTTP/2 standard) • Reduced overall request size
26. Important: HTTPS is required
27. 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.
28. 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
29. 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/
30. Practical debugging with Wireshark 2 CC flickr.com/photos/hwttdz/20632932769
31. 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- traffic-with-wireshark-the-easy-way/ Step 1
32. Point Wireshark to the log file Step 2
33. Filter traffic on port 443 Step 3
34. Debug all the frames Step 4
35. Simpler option + rmurphey.com/ blog/2015/11/28/ chrome-http2-log- parser View frames directly in Chrome
36. What about old clients? Build for HTTP/2 browsers? Wait for broader support? Two versions of the site? Difficult questions when implementing HTTP/2.
37. How do I eat this candy Backends must be updated (if possible)
38. 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
39. Adoption Trends Usage by site traffic Total usage HTTP/2 isn't as popular as... ETag compression Source: http://w3techs.com/technologies/details/ce-http2/all/all
40. CC flickr.com/photos/joiseyshowaa/2402764792 People just want the web to be fast and work HTTP/2 will likely help when correctly implemented.
41. HTTP2 is sweet (and thanks Slides posted in ~30 seconds on @smithclay + #forwardjs Blog post: http://bit.ly/http2candy