1. http://www.flickr.com/photos/nzbuu/4093456029
Are Today’s Good Practices…
Tomorrow’s Performance Anti-Patterns?
@andydavies
#WebPerfDays, Amsterdam
Saturday, 18 May 13

2. People like recipes
http://www.flickr.com/photos/sowrey/2441134911
Saturday, 18 May 13

3. Browsers already use the network differently
Saturday, 18 May 13

4. Saturday, 18 May 13

5. New network protocols are coming here
http://www.flickr.com/photos/jonlachance/3427660741
Saturday, 18 May 13

6. HTTP 1.1
SPDY
SPDY testing stops tracking at onload - some requests missing after onload
Differences in TCP Connection Use
Saturday, 18 May 13

7. Test Environment
Image Credit
-Amazon EC2 - Small Instance - Dublin
-Apache 2.2
- GZIP
- Keep-Alive
- mod_pagespeed
- mod_spdy
-‘Off the shelf’ web site template
-WepPageTest, Dulles / Chrome / Cable
Saturday, 18 May 13

8. Minimal Optimisations - HTTP 1.1 vs SPDY
(GZIP / Keep-Alive / initcwnd 10)
Saturday, 18 May 13

9. Minimal Optimisations - HTTP 1.1 vs SPDY
SPDY is faster
(GZIP / Keep-Alive / initcwnd 10)
Saturday, 18 May 13

10. Waterfall for HTTP Test
Saturday, 18 May 13

11. Waterfall for SPDY Test
Remember requests after onload not tracked in test
Saturday, 18 May 13

12. So which rules are most likely to be at risk?
- Split dominant content domains
- Reduce requests
- Merging
- Sprites
- DataURIs
Saturday, 18 May 13

13. Sharding CSS background: url() images
Saturday, 18 May 13

14. Sharding CSS background: url() images
Sharded page is much slower
Saturday, 18 May 13

15. Connection to shard opened later
New TCP connection
opened
Saturday, 18 May 13

16. Sharding <img src=
Saturday, 18 May 13

17. Sharding <img src=
Sharded page is marginally (0.5s) faster!
Saturday, 18 May 13

18. Other tests carried out
- Sharding JS
- Merging CSS
- Merging JS
- Server Push
(Fonts, third-party JS not yet tested)
Saturday, 18 May 13

19. What about the traditional CDN?
http://www.flickr.com/photos/jvk/166337955
Saturday, 18 May 13

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

21. 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/
Saturday, 18 May 13

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

23. Typical async script loader
<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>
Relies on inline JS
Saturday, 18 May 13

24. 69% of visitors support async attribute
<script async src="myscript.js"><script>
http://caniuse.com/script-async
What other techniques rely on inline JS?
Saturday, 18 May 13

25. “Situational Performance Optimization,
The Next Frontier”
http://calendar.perfplanet.com/2012/situational-performance-optimization-the-next-frontier/
Guy Podjarny
Saturday, 18 May 13

26. # 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>
mod_pagespeed & mod_spdy = tools to experiment
High Performance Browser Networking, Ilya Grigorik
Saturday, 18 May 13

27. http://www.flickr.com/photos/simeon_barkas/2557059247
The end for hand crafted optimisations?
Saturday, 18 May 13

28. Limits to what protocols or automation can fix
Requests by Domain Bytes by Domain
Saturday, 18 May 13

29. - Some good practices will become obselete
-Testing tools have a few issues
- Browsers may need better loading hints
- Start experimenting now
Saturday, 18 May 13

30. Thank You!
@andydavies
hello@andydavies.me
http://slideshare.net/andydavies
http://www.flickr.com/photos/nzbuu/4093456029
Saturday, 18 May 13