Yes, what you are doing is perfectly valid and common
CSS is perhaps a bad example, but the same principle ( load the last one in via ajax btw )
Like say, images.
We are on page 1 of our website and we know 99.999% of the time our visitors are going to click to page 2, and we know that on page 2 we have some large images to serve, yes, then we may load them silently AFTER page 1 has loaded - getting ready, then the site 'feels' fast as they navigate. A common trick in mobile web applications/sites/
So yes:
It is the same principle for ANY type of file that you may want to 'pre cache' for subsequent requests.
- Load the page
- while the visitor is 'reading' the loaded page, pre fetch files/data that you expect they may request next. ( images, page 2 of result data, javascript, and css ). These are loaded via ajax as to not hold up the page 'onload' event firing - a key difference from your example
However, To answer your goal - allow for the loading of the pages to be as fast as possible
Doing this, or any kind of 'pre emptive loading' technique, is minimal to 'speed of delivery' if we are not serving static files from a static server, a cookieless domain , and ultimately a Content Delivery Network.
Achieving the goal of allowing for the loading of the pages to be as fast as possible, is the serving of static files differently from your dynamic content ( php rendered et all )
1) Create a subdomain for these resources ( css, js, images/media ) - static.yourdomain.com
2) Turn off cookies, headers and tune cache headers specifically for this sub domain.
3) Look into using a service like http://cdnify.com/ or www.akamai.com.
These are the performance and speed steps for serving static content. ( hope no suck eggs, just directly related the question and if anyone is unfamiliar with this )
The 'pre emptive loading' techniques are still great, but they are now more related to pre loading data for usability than they are for speed.
Edit/Update:
To clarify 'speed' and 'usability speed'.
Speed is judged by software often as when the page 'onload' event fires ( that is why it is important to load these 'pre emptive resources' via ajax.
Perceived speed ( usability ) is the how quickly a user can see and interact with the content ( even though the page load event may not have fired ).
Edit/update
In a few areas of the post and in the comments was mentioned the loading of these additional 'pre emptive' resources via javascript/ajax.
The reason is to not delay the page 'onload' event firing.
Many website test speed tools ( yslow, google .. ) use this 'onload' event to judge page speed.
Here we delay the page 'onload' event.
<body>
... page content
<link rel="stylesheet" href="/nextpage.css" />
</body>
Here we Load via javascript /some cases Ajax ( page data ) and do not preventing the page load event
<body>
.. page content
<script>
window.onload = function () {
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = '/nextpage.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
};
</script>
( this, as a bonus, also gets around the compatibility problems with having a <link>
tag within the <body>
as discussed in your other threads )