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.

Transcript

1. How HTTP/2 Fits Into Your Workflow Byron Delpinal @ByronDelpinal
2. BARE METAL: Programming with no abstractions
3. dead weight 160kb bounce rate 12%
4. KEY TAKEAWAYS ‣ What is the HTTP protocol ‣ HTTP/2 and its features ‣ How to upgrade your site
6. Tim Berners Lee
7. HTTP/0.9 1991 HTTP/0.9
8. R EQ U EST Assets Loaded: 1 HTTP/0.9 TIME H TM L
9. 1991 1996 HTTP/0.9 HTTP/1.0 HTTP/1.0
10. Assets Loaded: 3 HTTP/1.0 TIME REQUEST HTML REQUEST IMAGE REQUEST IMAGE
11. HTTP/1.1 1991 1996 1999 HTTP/0.9 HTTP/1.0 HTTP/1.1
12. HTTP/1.1 TIME REQUEST HTML REQUEST CSS REQUEST CSS REQUEST IMAGE REQUEST IMAGE Assets Loaded: 5
13. HTTP/2.0 1991 1996 1999 2015 HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2.0
14. CSS HTTP/2.0 - Multiplexing TIME REQUEST IMAGE REQUEST
15. HTTP/2.0 - Server Push HTTP 1.1 HTTP 2.0 REQUEST RESPONSE REQUEST RESPONSE REQUEST RESPONSE RESPONSE RESPONSE
16. (1) CSS (4) CSS (3) JAVASCRIPT (8) JAVASCRIPT HTTP/2.0 - File Prioritization TIME REQUEST (2) IMAGE (7) IMAGE (5) IMAGE (6) IMAGE
17. HTTP/2.0 - SSL (HTTPS)
18. Multiplexing Server Push File Prioritization
19. app.css sprite.png navigation.css homepage.css app.js drop-down.js slideshow.js facebook.png twitter.png HACK - File Concatenation
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
21. HACK - Inline Styles
22. PERCEIVED PERFORMANCE: How fast a user thinks your site loads.
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
24. STEP ONE Modularize your content
25. STEP TWO Un-Shard your domains
26. Push STEP THREE files to your client
27. STEP FOUR Prioritize from top to bottom
28. STEP FIVE Push your next page
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
30. Can I Use This Today?
32. NodeJS / Express
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
36. Questions?
37. Say hi! coffeeandcode.com