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
   

   View Slide

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
   

   View Slide

3. View Slide

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.
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

11. View Slide

12. SPDY became HTTP2
    Ratified by the IETF in May 2015
    caniuse.com: ~62% global browser support
    

    View Slide

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

    View Slide

14. + TLS = HTTPS
    + TLS = HTTPS
    

    View Slide

15. Communication over
    a single TCP connection (sans TLS)
    

    View Slide

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

    View Slide

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)
    

    View Slide

18. THE FRAMES ARE
    FUNDAMENTAL
    AND BINARY
    

    View Slide

19. What changes in
    web perf best
    practices
    CC0 pixabay.com
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

23. Unbundle and cache
    the little files
    

    View Slide

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

    View Slide

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

    View Slide

26. Important: HTTPS is
    required
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

30. Practical debugging
    with Wireshark 2
    CC flickr.com/photos/hwttdz/20632932769
    

    View Slide

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
    

    View Slide

32. Point Wireshark to the
    log file
    Step 2
    

    View Slide

33. Filter traffic on port
    443
    Step 3
    

    View Slide

34. Debug all the frames
    Step 4
    

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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

    View Slide