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
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?
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!
