SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Are Today's Good Practices… Tomorrow's Performance Anti-Patterns
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
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