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
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!
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>
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
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
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