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
73% of visitors support async attribute
<script async src="myscript.js"><script>
Yet, this is how we typically asynchronously load scripts
var js = document.createElement('script');
js.async = true;
js.src = 'myscript.js';
var e = document.getElementsByTagName('script');
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'
What other performance enhancements do we rely on inline JS for?
Guardian split page into
Others rely on scroll handlers for lazyloading
New connection shouldn’t have been opened
“Both chrome and ﬁrefox 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