1. https://www.flickr.com/photos/expressmonorail/3910036864
HTTP/2 - What’s it all about?
@AndyDavies
#RevolutionConf, Sept 2014

2. https://www.flickr.com/photos/benjreay/14713228051
Heard of HTTP/2 or SPDY?

3. What’s our greatest enemy?
https://www.flickr.com/photos/54459164@N00/5218183788

4. The browser that just won’t die?

5. The explosion in device diversity?
http://opensignal.com/reports/2014/android-fragmentation/

6. … or maybe latency is our greatest enemy
https://www.flickr.com/photos/jjvaca/728072059

7. Backbone Round Trip Times from London
http://www.vectortemplates.com
BT: http://ippm.bt.net/hour/europe/lo.shtml

8. Backbone Round Trip Times from London
http://www.vectortemplates.com
81ms
BT: http://ippm.bt.net/hour/europe/lo.shtml
201ms
156ms
266ms
232ms
28ms

9. There’s the last mile latency too
(and routers, other networking kit, mobile latencies too)
https://www.flickr.com/photos/kiwanja/3170292282

10. (TCP Segments)
TCP and the Lower Bound of Web Performance!
John Rauser
Will probably need more than one round-trip
285kB
214kB
143kB
71kB
1 2 3 4 5 6 7 8 9 10 11
Round Trips
Size
initcwnd = 3!
many sites use 10

11. Higher latency = slower load times
Page Load Time (s)
4
3
2
1
0 20 40 60 80 100 120 140 160 180 200 220 240
Round Trip Time (ms)
Mike Belshe - “More Bandwidth Doesn’t Matter (much)”

12. Headers are sent with every request
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/
webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Cookie:NTABS=B5; BBC-UID=
75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozi
lla%2f5%2e0%20%28Macintosh%3b%20Intel%20Mac%20OS%20X
%2010%5f9%5f1%29%20AppleWebKit%2f537%2e36%20%28KHTML%2c%20like%20Gecko
%29%20Chrome%2f31%2e0%2e1650%2e63%20Safari%2f537%2e36; ckns_policy=111;
BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40;
s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3;
ckpf_ww_mobile_js=on; ckpf_mandolin=
%22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end%22%3A
%221392834182609%22%7D; _chartbeat2=ol0j0uq4hkq6pumu.
1389101635322.1392285654268.0111111111111111; _chartbeat_uuniq=1;
ecos.dt=1392285758216
Host:www.bbc.co.uk
Pragma:no-cache
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/
537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

13. Headers are sent with every request
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/
webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Cookie:NTABS=B5; BBC-UID=
And they contain lots
75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozi
of repeated data
lla%2f5%2e0%20%28Macintosh%3b%20Intel%20Mac%20OS%20X
%2010%5f9%5f1%29%20AppleWebKit%2f537%2e36%20%28KHTML%2c%20like%20Gecko
%29%20Chrome%2f31%2e0%2e1650%2e63%20Safari%2f537%2e36; ckns_policy=111;
BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40;
s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3;
ckpf_ww_mobile_js=on; ckpf_mandolin=
%22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end%22%3A
%221392834182609%22%7D; _chartbeat2=ol0j0uq4hkq6pumu.
1389101635322.1392285654268.0111111111111111; _chartbeat_uuniq=1;
ecos.dt=1392285758216
Host:www.bbc.co.uk
Pragma:no-cache
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/
537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36

14. HTTP could use TCP more efficiently
http://www.flickr.com/photos/7671591@N08/1469828976

15. We’ve been hacking around the gaps
https://www.flickr.com/photos/rocketnumber9/13695281

16. Browsers support more parallel connections
Old browsers - 2 parallel connections
Today’s browsers - 4 plus connections

17. We split resources across domains
www.bbc.co.uk!
static.bbci.co.uk!
news.bbcimg.co.uk!
node1.bbcimg.co.uk

18. We follow recipes e.g. Reduce Requests
http://www.flickr.com/photos/mrsmagic/2247364228

19. DataURIs
url(data:image/
png;base64,iVBORw0KGgoAA
AANSUhEUgAAABkAAAAZCAMAA
ADzN3VRAAAAGXRFWHRTb2Z0d
2FyZQBBZG9iZSBJbWFnZVJlY
WR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUe
NpiYBgFo2AwAIAAAwACigABt
nCV2AAAAABJRU5ErkJggg==)
=

20. DataURIs
Larger downloads (needs gzip)!
Overrides browser priorities
url(data:image/
png;base64,iVBORw0KGgoAA
AANSUhEUgAAABkAAAAZCAMAA
ADzN3VRAAAAGXRFWHRTb2Z0d
2FyZQBBZG9iZSBJbWFnZVJlY
WR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUe
NpiYBgFo2AwAIAAAwACigABt
nCV2AAAAABJRU5ErkJggg==)
=

21. Create CSS and JavaScript bundles
+ + + +
= =

22. Create CSS and JavaScript bundles
+ + + +
= = More to download
and parse

23. Create CSS and JavaScript bundles
+ + + +
= = More to download
and parse +! x
!
Whole bundle is
invalidated if a
single file changes

24. CSS Sprites

25. CSS Sprites
To get just one sprite …

26. CSS Sprites
To get just one sprite …
Browser must download and
decode the whole image

27. There’s a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968

28. Build tools and optimisation services help plug gaps
and won’t be going away…

29. But couldn’t we be more efficient?
https://www.flickr.com/photos/belsymington/4102783610

30. HTTP/2
(Evolved from Google’s SPDY)

31. Single multiplexed connection to host
HTTP/2
HTTP/1.1

32. Multiplexing offers interesting possibilities

33. How much of an image do we need to make it usable - 5%?
Experiment by John Mellor at Google

34. How much of an image do we need to make it usable - 15%?

35. How much of an image do we need to make it usable - 25%?

36. How much of an image do we need to make it usable - 80%?

37. How much of an image do we need to make it usable - 80%?
There are some questions over the user
experience with progressive images

38. HTTP/1.1 - browser sets priorities

39. HTTP/2 - browser hints priorities
server can override them

40. Adds header compression too

41. Google and Mozilla will only support over HTTPS
http://www.flickr.com/photos/forsytht/4553656244

42. Browsers pull resources from the server but …
https://www.flickr.com/photos/steveweaver/2915792034

43. What if the server could push them?
https://www.flickr.com/photos/christian_bachellier/582457911

44. Loading a web page
Browser Server
Server
builds
page
GET index.html
<html><head>…
Request other page resources

45. Loading a web page
Browser Server
Server
builds
page
GET index.html
<html><head>…
Network
Idle
Request other page resources

46. Browser Server
Server
builds
page
GET index.html
Push critical resource e.g. CSS
<html><head>…
Server Push
Request other page resources

47. Browser Server
Server
builds
page
GET index.html
Push critical resource e.g. CSS
<html><head>…
Request other page resources
Server Push

48. Browser Server
Server
builds
page
GET index.html
Push critical resource e.g. CSS
<html><head>…
Request other page resources
Server Push
Browser can reject push

49. Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint

50. Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!
Tree
Fonts and background
images discovered
when render tree
builds
JavaScript Layout Paint

51. Other opportunities for server push?
HTML
CSS
DOM
CSSOM
Render!
Tree
Fonts and background
images discovered
when render tree
builds
JavaScript Layout Paint
Could we push them?

52. http://www.flickr.com/photos/atoach/6014917153

53. Challenges
We need to get better at HTTPS!
Bulletproof SSL and TLS, Ivan Rustic!
https://www.ssllabs.com/ssltest/!
https://istlsfastyet.com/!
!
Need support in mainstream servers!
!
Differing optimisations for HTTP/1.1 and HTTP/2
(and indeed other contexts e.g. mobile)

54. HTTP/2 is coming!
It uses the network more efficiently!
Enables server to push resources!
!
It will change the way build and deliver sites!
!
Go Play!

55. http://http2.github.io/

56. http://www.flickr.com/photos/auntiep/5024494612
!
@andydavies!
!
andy.davies@nccgroup.com !
!
http://slideshare.net/andydavies!