HTTP/2 is Web Performance Candy

2ad55a66b8325eb097612c069ab76231?s=47 Clay Smith
February 10, 2016

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.

2ad55a66b8325eb097612c069ab76231?s=128

Clay Smith

February 10, 2016
Tweet

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
  3. None
  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
  11. None
  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