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
Test the theory
1. Take 50 icons
2. Create 50 stylesheets, each with one more dataURI than
3. Create matching HTML file for each stylesheet
4. Test them all!
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');
“Content Security Policy, a mechanism web applications
can use to mitigate a broad class of content injection
vulnerabilities, such as cross-site scripting (XSS)”
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
Resource Priorities - adds lazyload and postpone attributes
So what about the network?
Tested some scenarios, measured the outcomes
So which rules are most likely to be at risk?
- Split dominant content domains
- Reduce requests
Sharding CSS background: url() images
Sharded page is much slower
Connection to shard opened later
New TCP connection
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