Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP/2 is Web Performance Candy

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.

Clay Smith

February 10, 2016
Tweet

More Decks by Clay Smith

Other Decks in Programming

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. 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.
  4. HTTP 1.1 is nearly 20 years old It's the main

    application protocol of the information superhighway
  5. SPDY became HTTP2 Ratified by the IETF in May 2015

    caniuse.com: ~62% global browser support
  6. HTTP/2 has many streams Request Message A stream is bi-directional

    with one or more messages, an ID, and priority Response Message
  7. 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)
  8. 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.
  9. TCP Multiplexing is a big deal Multiple messages can share

    the same TCP connection without blocking each other or creating additional connections.
  10. Goodbye old web performance hacks • Domain sharding • CSS

    Concatenation • JavaScript Concatenation • Inlining assets (including Base64 encoding)
  11. Beware Compression performance may be impacted with hundreds of small

    files. http://engineering.khanacademy.org/posts/ js-packaging-http2.htm
  12. Header Compression • Headers are compressed in HTTP/ 2. •

    Uses the HPACK algorithm (part of the HTTP/2 standard) • Reduced overall request size
  13. 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.
  14. 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
  15. 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/
  16. 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
  17. What about old clients? Build for HTTP/2 browsers? Wait for

    broader support? Two versions of the site? Difficult questions when implementing HTTP/2.
  18. 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
  19. 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
  20. CC flickr.com/photos/joiseyshowaa/2402764792 People just want the web to be fast

    and work HTTP/2 will likely help when correctly implemented.
  21. HTTP2 is sweet (and thanks Slides posted in ~30 seconds

    on @smithclay + #forwardjs Blog post: http://bit.ly/http2candy