Why HTTP/2

HTTP/2 is now supported by 60% of the current browser market share. We should start questioning our best practices and understand a protocol that is designed to reduce our Page Load Time by 50%.

Transcript

1. HTTP/2 Nacho Coloma — CTO at Extrema Sistemas Google Developer Expert @nachocoloma
2. About me · +15 years doing this software thing · Organizer at Codemotion Madrid · Google Developer Expert for Cloud Platform
3. About me As GDE, I use to speak about Google Cloud Platform A LOT
4. About me As GDE, I happen to speak about Google Cloud Platform A LOT
5. But I’m also a nerd I like to code, and I speak about the things I like. HTTP/2 is something that we don’t speak too much about. Like, of 330 entries in Codemotion Madrid, only one is about this.
6. HTTP/2 Drop what you were doing and learn something interesting
7. Minification It’s like flossing, if flossing was awesome
8. The difference between minification and gzipping bootstrap.css https://css-tricks.com/the-difference-between-minification-and-gzipping/
9. https://css-tricks.com/the-difference-between-minification-and-gzipping/ Noticed that? We will do wonders for an extra 1% The difference between minification and gzipping bootstrap.css
10. Demo time! (caveat: SPDY, not HTTP/2) Alternative test
11. We are not talking about 1% here
12. Supported by Chrome, Firefox, Internet Explorer 11 for Windows 10, Microsoft Edge, Opera, Safari 9 (60% of the browser market share) http://caniuse.com/#feat=http2
13. Version number 1.1.x BUGFIXES
14. Version number 1.1.x BUGFIXES NEW FEATURES
15. Version number 1.1.x BUGFIXES NEW FEATURES LET’S FIX THIS CLUSTERFUCK
16. HTTP/2 Bombing unicorns edition
17. New features introduced with HTTP/2 METHODS STATUS CODES HEADERS https://http2.github.io/http2-spec/
18. New features introduced with HTTP/2 0 METHODS STATUS CODES HEADERS https://http2.github.io/http2-spec/
19. New features introduced with HTTP/2 0 0 METHODS STATUS CODES HEADERS https://http2.github.io/http2-spec/
20. New features introduced with HTTP/2 0 0 METHODS STATUS CODES HEADERS 1 https://http2.github.io/http2-spec/
21. New features introduced with HTTP/2 0 0 METHODS STATUS CODES HEADERS 1 https://http2.github.io/http2-spec/
22. Version number 1.1.x BUGFIXES NEW FEATURES LET’S FIX THIS CLUSTERFUCK PERFORMANCE FOR THE WEB
23. Key differences to HTTP/1.x · Binary, instead of textual · Fully multiplexed, instead of ordered and blocking · Can use one connection for parallelism · Uses header compression to reduce overhead · Allows servers to “push” responses proactively into client caches
24. Binary, instead of textual Cannot do HTTP/2 using telnet Not really a problem: curl, Chrome devtools, Wireshark. Not backwards-compatible: requires HTTPS to avoid breaking any intermediate proxies.
25. Does HTTP/2 require encryption? · As a standard, no. · But currently no browser supports HTTP/2 unencrypted. · As a binary protocol, this is important for backwards compatibility. · Also, it’s the right thing to do. · Only full, end-to-end encryption! · Using e.g. CloudFlare intermediate proxy with HTTP 1.1 behind will not work.
26. Fully multiplexed Latency is drastically reduced
27. Latency as a performance killer http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#LATENCY_BOTTLENECK
28. Research done at Google shows that an increase from 5Mbps to 10Mbps results in a disappointing 5% improvement in page load times. Ilya Grigorik, Google https://www.igvita.com/2011/10/20/faster-web-vs-tcp-slow-start/
29. TCP slow start https://commons.wikimedia.org/wiki/File:TCP_Slow-Start_and_Congestion_Avoidance.svg
30. Upgrade your kernel now! Initial congestion window (cwnd) increased from 3-4 to 10 packets (2- 3x) Switch from Multiplicative Decrease and Additive Increase (AIMD) to Proportional Rate Reduction (PRR) for an extra 3-10% reduction in latency.
31. Fully multiplexed and server PUSH http://broabandtrafficmanagement.blogspot.de/2015/07/radware-accelerates-http2-web-traffic.html
32. One connection HTTP 1.1: Between 4 and 8 connections even more with multiple DNS names HTTP/2: One connection
33. Compress HTTP headers With HTTP 1.1, headers are always sent in plain text also with gzipped responses With HTTP/2, headers headers are compressed using HPACK SPDY was using gzip, but there were security implications (CRIME)
34. Key differences to HTTP/1.x · Binary, instead of textual · Fully multiplexed, instead of ordered and blocking · Allows servers to “push” responses proactively into client caches · Can use one connection for parallelism · Uses header compression to reduce overhead
35. Is this the same thing as SPDY? · SPDY was an experimental protocol developed at Google in 2009 · Target: a 50% reduction in page load time by reducing latency · Gather real performance data to (in)validate the experimental protocol · It was the starting point for the HTTP/2 standard, and is now deprecated
36. Server and library support Most servers are already on board Apache (mod_h2), NGINX alpha, Netty, Jetty, IIS 10 Others are getting there Squid Cool client libraries like OkHttp or gRPC Though probably they can only benefit from header compression
37. It’s time to reconsider our best practices Sharding using different DNS names Concatenation of resources (and cache invalidation) data: URIs inlining CSS assets Sprites Delayed image loading Inlined resources in HTML But remember: only 60% of browser market share! bit.ly/http2-opt
38. Time for some Q & A Nacho Coloma — CTO at Extrema Sistemas Google Developer Expert @nachocoloma BTW Codemotion is awesome. You should come. Just saying.