How HTTP/2 Fits Into Your Workflow

How HTTP/2 Fits Into Your Workflow

The HTTP/2 spec has been out for almost two years now, yet adoption has been (predictably) slow. With more and more companies putting a high priority on performance, it’s time to take a serious stand against high load times and rid ourselves of jank once and for all. We’ll start with a brief history of the HTTP protocol, fall into the HTTP/2 spec itself to figure out what’s new, and finally learn how to enable this protocol on our own websites. This talk will cover browser support, server support, and CDN support, as well as how to cleanly overcome HTTP/1.x performance hacks like sprite sheets and file concatenation.

F9318ed70e77c5a5985652407973b723?s=128

ByronDelpinal

January 13, 2017
Tweet

Transcript

  1. 4.

    KEY TAKEAWAYS ‣ What is the HTTP protocol ‣ HTTP/2

    and its features ‣ How to upgrade your site
  2. 5.
  3. 15.

    HTTP/2.0 - Server Push HTTP 1.1 HTTP 2.0 REQUEST RESPONSE

    REQUEST RESPONSE REQUEST RESPONSE RESPONSE RESPONSE
  4. 16.

    (1) CSS (4) CSS (3) JAVASCRIPT (8) JAVASCRIPT HTTP/2.0 -

    File Prioritization TIME REQUEST (2) IMAGE (7) IMAGE (5) IMAGE (6) IMAGE
  5. 20.

    facebook.png twitter.png instagram.png logo.png facebook.png instagram.png x.yoursite.com y.yoursite.com HACK -

    Domain Sharding } facebook.png twitter.png instagram.png logo.png facebook.png instagram.png
  6. 23.

    EXAMPLE: Perceived Performance Performance Metrics Client X GQ W Magazine

    Document Complete Time Document Complete Weight Fully Loaded Time Fully Loaded Weight Start Render Visually Complete DOM Elements
  7. 29.

    I got your back, PMs 1. Enable HTTP/2 on your

    CDN 2. Break your files into modular pieces 3. Un-shard your domains 4. Push your assets to your server 5. Prioritize your assets top to bottom 6. Push your next page
  8. 31.
  9. 33.
  10. 34.
  11. 35.

    Sources ‣ HTTP/2 Spec: https://http2.github.io/http2-spec/ ‣ Website performance: https://blog.kissmetrics.com/loading-time/ ‣

    Average Users on Etsy: https://www.statista.com/statistics/271450/monthly-unique-visitors-to-us-retail-websites/ ‣ Can I Use (Browser): http://caniuse.com/#feat=http2 ‣ Designing For Performance (Lara Hogan): http://designingforperformance.com/ ‣ Sample HTTP/2 App: https://github.com/ByronDDelpinal/http2-demo Recommendations ‣ Designing For Performance (Lara Hogan): http://designingforperformance.com/ ‣ Path To Performance Podcast: https://pathtoperf.com/ ‣ Web Page Test: http://www.webpagetest.org/ ‣ Let’s Encrypt: https://www.letsencrypt.org ‣ Chrome Net Internals: chrome://net-internals/#http2 ‣ nghttp: https://nghttp2.org/documentation/package_README.html