Exploring how our optimisations may have to change as protocols, browsers and standards change

1. Are Today’s Good Practices…
Tomorrow’s Performance Anti-Patterns?
@andydavies
#VelocityConf, London
http://www.flickr.com/photos/nzbuu/4093456029

2. What if …
… dataURIs are an anti-pattern?
http://www.flickr.com/photos/willypayne/3116395089

3. The ‘humble’ dataURI
url(data:image/
png;base64,iVBORw0KGgoAAAANSUh
EUgAAABkAAAAZCAMAAADzN3VRAAAAG
XRFWHRTb2Z0d2FyZQBBZG9iZSBJbWF
nZVJlYWR5ccllPAAAAAZQTFRF/
wAAAAAAQaMSAwAAABJJREFUeNpiYBg
Fo2AwAIAAAwACigABtnCV2AAAAABJR
U5ErkJggg==)
=

4. dataURIs for CSS images
Makes a blocking resource larger by including non-blocking resources
•
Browser can’t start rendering page until CSS has downloaded *
•
Images don’t block
Do they have the same caching lifetime?
* Some browsers defer download of CSS when media query doesn’t match

5. Test the theory
http://www.flickr.com/photos/marc-flores/8367323660

6. 1. Take 50 icons
2. Create 50 stylesheets, each with one more dataURI than
previous
3. Create matching HTML file for each stylesheet
4. Test them all!

7. Larger CSS download = longer time to RenderStart
RenderStart - TTFB (ms)
1000
875
750
625
500
1
3
5
7
9
11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49
Number of Sprites

8. This got me thinking!
http://www.flickr.com/photos/irishwildcat/3020466221

9. We have our rules…
http://www.flickr.com/photos/sowrey/2441134911

10. and we love recipes…
http://www.flickr.com/photos/mrsmagic/2247364228

11. But, what happens when things change?

12. Browsers already use the network differently

15. New network protocols are coming here
http://www.flickr.com/photos/jonlachance/3427660741

16. Differences in TCP Connection Use
HTTP 1.1
SPDY

17. New Standards - opportunities and challenges

18. How much do we rely on inline JavaScript?
http://www.flickr.com/photos/jfraissi/6352877711

19. 73% of visitors support async attribute
<script async src="myscript.js"><script>
http://caniuse.com/script-async

20. Yet, this is how we typically asynchronously load scripts
<script type="text/javascript">
function() {
var js = document.createElement('script');
js.async = true;
js.src = 'myscript.js';
var e = document.getElementsByTagName('script')[0];
e.parentNode.insertBefore(js, first);
})();
</script>

21. XSS

22. Content-Security-Policy
“Content Security Policy, a mechanism web applications
can use to mitigate a broad class of content injection
vulnerabilities, such as cross-site scripting (XSS)”
http://www.w3.org/TR/CSP/

23. Example
Only allow scripts to be executed if they come from a designated host,
disables inline scripts by default.
Content-Security-Policy: script-src http://www.site.com
Can re-enable inline scripts, but increases XSS risk
Content-Security-Policy script-src 'self'

24. What other performance enhancements do we rely on inline JS for?
Guardian split page into
- Content
- Enhancements
- Leftovers
Others rely on scroll handlers for lazyloading

25. Resource Priorities - adds lazyload and postpone attributes

26. So what about the network?
http://www.flickr.com/photos/uwwresnet/5881727219

27. Tested some scenarios, measured the outcomes
http://www.flickr.com/photos/chandramarsono/4324373384

28. Test Environment
- EC2 - Medium Instance - Dublin
- Apache 2.2
- GZIP
- Keep-Alive
- mod_pagespeed
- mod_spdy
- WepPageTest,
Dulles / Chrome / Cable

29. Off the shelf website template
http://www.html5xcss3.com/2012/05/html5-template-interio.html

30. Minimal Optimisations - HTTP 1.1 vs SPDY
0s
1s
2s
3s
4s
HTTP
SPDY
SPDY is faster
(GZIP / Keep-Alive / initcwnd 10)
5s
6s

31. Waterfall for HTTP Test

32. Waterfall for SPDY Test

33. So which rules are most likely to be at risk?
- Split dominant content domains
- Reduce requests
- Merging
- Sprites
- DataURIs

34. Sharding CSS background: url() images
0s
1s
2s
3s
4s
5s
Sharded
Not
Sharded
Sharded page is much slower
6s
7s
8s

35. Connection to shard opened later
New TCP connection
opened

36. New connection shouldn’t have been opened
“Both chrome and firefox will automatically unshard
transparently for you when using spdy and both of the
sharded hosts are at the same IP address and covered under
one SSL cert (e.g. *.example.com).”
Patrick McManus, Mozilla
http://www.stevesouders.com/blog/2013/09/05/domain-sharding-revisited/#comment-60146

37. Sharding <img src=
0s
1s
2s
3s
4s
5s
6s
Sharded
Not
Sharded
Sharded page is marginally faster???
7s
8s

38. Other tests carried out
-
Sharding JS / CSS
Horrible
-
Merging CSS
Slower
-
Server Push
No noticable difference
-
jQuery from Google CDN
Suprisingly quick

39. Hmm… How do we move forward?
http://www.flickr.com/photos/atoach/6014917153

40. It’s only going to get more complex
“Situational Performance Optimization, The Next Frontier”
Guy Podjarny
http://www.flickr.com/photos/freshwater2006/693945631

41. Will complexity lead to the end of hand crafted optimisations?
http://www.flickr.com/photos/simeon_barkas/2557059247

42. mod_pagespeed & mod_spdy == tools to experiment
# Disable concatenation for SPDY/HTTP 2.0 clients
<ModPagespeedIf spdy>
ModPagespeedDisableFilters combine_css,combine_javascript
</ModPagespeedIf>
# Shard assets for HTTP 1.x clients only
<ModPagespeedIf !spdy>
ModPagespeedShardDomain www.site.com s1.site.com,s2.site.com
</ModPagespeedIf>
High Performance Browser Networking, Ilya Grigorik

43. Start experimenting, share your experiences
http://www.flickr.com/photos/giosp/3933753363

44. We need to improve our toolkit
http://www.flickr.com/photos/alexander/1146677

45. SPDY waterfall in Firefox!
We need to help fix things like this
https://github.com/WPO-Foundation/webpagetest

46. Limits to what new protocols or automation can fix
Requests by Domain
Bytes by Domain

47. http://www.flickr.com/photos/rkramer62/4028530901

48. Thank You!
@andydavies
hello@andydavies.me
http://slideshare.net/andydavies
http://www.flickr.com/photos/nzbuu/4093456029