This question crosses Javascript and CSS but is really a question about caching, so I put it in General instead... hope that's OK!
I've been moving non-essential below-the-fold content to load via Ajax (jQuery) so that I can control the order in which everything loads. This is allowing important content to load much faster, which is great :-)
Several of these Ajax scripts have CSS that's only used for the data within that script; combined, about 10kb worth of CSS. Since they load after everything else, I was creating a second stylesheet just for them so that the main stylesheet can load a smidge faster.
It's my understanding that the value to using a separate stylesheet is that it is loaded once and cached, so the second page load is faster.
So the question is, since these are Ajax scripts are already being cached, is there an advantage to putting their CSS in a separate stylesheet? Or is the Ajax script already cached on its first load, which would mean that a separate stylesheet would just be an additional HTTP connection for no advantage? I'm thinking it's the second one (not using a separate stylesheet), but I'm hoping for some sort of verification.
To explain via code:
<!-- MAIN PAGE -->
<!-- load main stylesheet -->
<link rel="stylesheet" href="//foo.com/main_styles.css">
<!-- load jQuery -->
<script src='//link-to/jquery.js'></script>
<script>
// Ajax script
$.fn.ajax = function(url) {
if (url)
this.load(url);
else
this.hide();
}
$(function() {
// run this after everything else, push the results inside of <footer></footer>
$('footer').ajax('//foo.com/ajax_script.php');
});
</script>
<body>
<footer></footer>
</body>
<!-- AJAX SCRIPT -->
<?php
echo <<<EOF
<!-- the question is, should this be here? Or in a separate ajax_styles.css? -->
<!-- imagine 10kb worth of CSS -->
<style>
p.class {
background: #800;
}
</style>
<p>
This is the footer
</p>
EOF;
?>
