HTTP 2.0 makes the existing web faster, but there are things that web devs can do to make their sites and apps even better with very little work.

1. Web Performance in the
World of HTTP 2.0
Dave Methvin
Independent Consultant
President, jQuery Foundation
This talk: https://goo.gl/5XPz0H

2. As a front-end
developer, do you
ever get this feeling
about Internet
performance?

3. History of the HTTP Protocol
1991: HTTP 0.9
1996: HTTP 1.0
1997: HTTP 1.1
… an eternity passes ...

4. Website
Development
State of the
Art in 1997

5. They're Upgrading Our Protocol
HTTP 2.0 is coming
Change your client,
server, and build
process to make
things work even
better

6. A Wild SPDY Appears
January 2011: Google includes SPDY in
Chrome and supports the protocol in all their
services. Other browsers and servers follow
suit over the next year.

7. http://caniuse.com/#search=spdy

8. The Move to HTTP 2.0
2010: SPDY appears
2012: Group starts standardization
2015: HTTP 2.0 complete
2016: Chrome to remove SPDY

9. http://caniuse.com/#search=http2

10. Servers,
Switches,
Proxies
istlsfastyet.com/
#server-performance

11. CDN and
PAAS
Providers
istlsfastyet.com/
#cdn-paas

12. Services Already using HTTP/2
Wordpress.com
Blogger.com
(medium.com & tumblr.com use SPDY)

13. Why HTTP/2 is Needed
Connections today are dumb
Manual tweaks: minification, sharding, combining,
spriting, HTML resource order, XHR, up to six
simultaneous connections per server … blah blah
Latency (RTT) is a killer

15. HTTP 2.0 is a Binary Protocol
Can't use telnet for an HTTP/2 session
When was the last time you did that?
Plenty of tools can decode HTTP/2 sessions
already, including most browser tools

16. HTTP/1: Head-of-Line Blocking
The current resource must finish downloading before making
another request; each has a delay of one round-trip-time (RTT)
big-image.jpg
500kb
icon
.png
1kb
home
.css
1kb
info
.js
1kb
Multiple connections to the server are only a
partial solution to this problem, and can cause
their own problems (e.g., congestion)
RTT
delay
RTT
delay
RTT
delay

17. HTTP/2: Connections Use Streams
Streams are prioritized, cancellable, and preemptable!
Stream 1:
big-image.jpg
(first 200kb)
S4:
icon
.png
1kb
S2:
home
.css
1kb
S3:
info
.js
1kb
Stream 1 (cont'd):
big-image.jpg
(final 300kb)
Important resources
arrive faster, on a
"warm" connection
Send me: big-image.jpg … icon.png, home.css, info.js

18. HTTP/1: Bloated Headers
In HTTP/1, headers are not compressed
Cookies (often several hundred bytes!)
User-Agent (this one is 124 bytes)
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/44.0.2403.157 Safari/537.36

19. HTTP/2: HPACK Compression
https://commons.wikimedia.org/wiki/File:HTTP_2_Header_Compression_HPACK.svg

20. Web Developer Commandments
Minimize DNS lookups
Reuse HTTP connections
Use a Content Delivery Network (CDN)
Eliminate unnecessary request bytes
Compress assets during transfer
Cache resources on the client

21. A Sadly
Typical
Web Site
webpagetest.org

22. It's Actually
A Lot Worse
Than That
webpagetest.org

23. Like,
Really,
Really,
Really Bad!
240 requests
3.8 megabytes
webpagetest.org

24. Rethink: Domain Sharding
e.g. s.huffpost.com, i.huffpost.com ...
Each connection requires setup/warmup
Connections compete for resources
DNS lookups, TCP congestion, retries
Even on HTTP/1, performance can often be
harmed by more than 2 shards

25. Sharding Didn't Really Help
webpagetest.org

26. We Didn't Keep the Wire Busy!
webpagetest.org

27. Connection Coalescing
HTTP/2 can use the same connection for two
different hosts (e.g., s.huffpost.com and
i.huffpost.com) if they resolve to the same IP
address. (There will be different HOST headers
on different streams.)

28. Amazing Connection Coalescing
If you have a TLS certificate that is valid for
multiple DNS names (e.g., *.domain.com) and
the names resolve to the same IP address,
HTTP/2 can use the same connection for both
hosts!

29. Rethink: Cookieless Domains
E.g., set cookie for www.huffpost.com and
avoid cookie using i.huffpost.com
HPACK makes it (mostly) unnecessary
With HTTP/2 you can share cookies across
*.huffpost.com without overhead worries

30. Scripts/CSS Combined via PHP
<script type="text/javascript"
src="http://s.huffpost.com/assets/js.php?v=1441810385&f=huff.js%2Chp_config.js%2Cjs
onmin.js%2Ccookiesmin.js%2Chp_track.js%2Chp_util.js%2Chp_browser.js%2Cget_font.js%2
Cpreload_topnav_font.js%2C_tmp%2Fcommon.js%2C_tmp%2Fclick_tracker.js%2C_tmp%2Fcommo
n_paginator.js%2C_tmp%2Fhp_ads.js%2C_tmp%2Fquick_login.js%2Cfacebook.js%2Csnproject
.js%2Chuff_promo.js%2Chptwitter_anywhere.js%2Ctwitter%2Ffrontpage.js%2Csearch_focus
.js%2Csearch_autocomplete.js%2Cmod-
follow.js%2Cconversations%2Fbootstrap.js%2C_front%2Ftopnav_new.js%2Cap_scroll_fastn
ews.js">

31. Rethink: Combining files
Combining files reduces requests
BUT
You usually don't need the whole file right now
Large files take longer to download
Large files are slow for the browser to parse/run
Changes invalidate the cached combined file

32. Let HTTP/2 Fetch Smaller Files
HTTP/2 reuses & prioritizes the connection
Use a core, then more strategy
First files handle the initial view ("above the fold")
Other stuff can come in as needed (e.g. views)
Avoid inlining JS/CSS
Separate files can be cached independently

33. Server Push
Browser: "Send me /products.html"
Server: "OK, also sending abovethefold.css"
(Browser can cancel if it's already cached)
This can be done by predictive
algorithms on the server!

34. Whoa.

36. How a Browser Prioritizes
Streams in a connection have
weight (priority)
dependency (reference to another stream)
e.g., logo.jpg is useless without index.html
Server should deliver bytes based on the
requested weights and dependencies

37. http://bitsup.blogspot.com/2015/01/http2-dependency-priorities-in-firefox.html

38. How to Detect HTTP 2.0 Use?

39. Chrome

40. Firefox

41. Edge

42. Plugin

43. HTTP/1 and HTTP/2 Can Coexist

44. To-Do List for HTTP/2
Ensure that your servers or CDNs support
HTTP/2 -- bug your providers too!
Make HTTP/2 effective w/o breaking HTTP/1
Reduce or eliminate sharding
Avoid creating monolithic JS/CSS files
Test to be sure you're getting HTTP/2 goodness
(Expect future studies on HTTP/2 quality)

45. ?On Twitter: @davemethvin
This talk: https://goo.gl/5XPz0H

46. RESOURCES
Ilya Grigorik at Velocity
https://www.youtube.com/watch?v=yURLTwZ3ehk
http://www.slideshare.net/AndyDavies/http2-is-here
http://www.slideshare.net/AndyDavies/the-case-for-http2
http://www.http2demo.io/
http://daniel.haxx.se/blog/2015/09/07/http2-115-days-with-the-rfc/