Dear all,

I have searched but not quite found what I'm looking for... All tips and opinions are welcome.

I'm looking for a small bit of Javascript which will load an external CSS file after the HTML page is fully loaded (load the CSS to the browser cache, but not necessarily add it to the page).

The main requirements would be:
  • The script should be proven in production on major websites.
  • The script should be small'ish so that it can be in-lined in the HTML (say less than 5kb uncompressed)


Does anyone here know of a script that meets these needs? Or am I barking up the wrong tree here?

Background:

I'm toying with in-lining the CSS into my HTML on the users' first page request. This is trivially simple for me to do (just a single PHP include() statement in the template). It reduces initial page load time by a good 0.2 second, due to one less HTTP request.

But ideally I would like to use an external CSS file for the following page views, if the users looks at more pages on my site. The external CSS can of course be cached by the users' browser, making it faster for multiple page views.

So I was thinking about in-lining the CSS for the first page view in a session, and then loading the CSS in the background via Javascript. It's not a necessity, it just seems like a nice, performant solution.

Since I couldn't find a solution like this, does that imply that it doesn't exist because it isn't worthwhile?