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. Theres 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 Doesnt 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. Weve been hacking around the gaps
https://www.flickr.com/photos/rocketnumber9/13695281
16. Browsers support more parallel connections Old browsers - 2
parallel connections Todays 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
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. Theres a tension between development and delivery
https://www.flickr.com/photos/domiriel/7376397968
28. Build tools and optimisation services help plug gaps and
wont be going away
29. But couldnt we be more efficient?
https://www.flickr.com/photos/belsymington/4102783610
30. HTTP/2 (Evolved from Googles 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 Request other page resources
45. Loading a web page Browser Server Server builds page GET
index.html Network Idle Request other page resources
46. Browser Server Server builds page GET index.html Push
critical resource e.g. CSS Server Push Request other page
resources
47. Browser Server Server builds page GET index.html Push
critical resource e.g. CSS Request other page resources Server
Push
48. Browser Server Server builds page GET index.html Push
critical resource e.g. CSS 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!