Pre-loading external files (CSS, JavaScript) for other pages

Question

I'm curious if there is an efficient way to wait for the front page of a site to load, and then pre-load CSS and script files that I know will likely be needed for the other pages on the site.

I want the front page of the site to be as fast as possible (lean and mean). It's likely that the user will not immediately click on a link. Since there will likely be some idle time, this seems like an opportune time to pre-load some of the external assets. Pre-loading should cause them to become cached. When the user does click on another page, the only request needed will be for the content and possibly some images, etc.

Has anyone done this? Is it a bad idea? Is there an elegant way to implement it?

Answer 1

That's an interesting idea, I'm not sure if it could be done via Javascript (at least the CSS part).

You might place an IFRAME on the page with the other resources you want to load, but put some CSS on it to hide it...

.preload {
    position : absolute;
    top      : -9999px;
    height   : 1px;
    width    : 1px;
    overflow : hidden;
}

If you put this at the end of the page then I would think it would load after the rest of the page. If not then you could use some Javascript and setTimeout to actually create the IFRAME after the page loads.

Answer 2

The hidden iFrame idea that people are advocating will work just fine.

If page load time of the landing page is a priority too though, the thing to to do would be to create the iFrame dynamically in javascript once the page has finished loading.

Answer 3

It's up to you to make the bandwidth decision.

If you pre-load everything, you get a better user-experience but a very high bandwidth consumption, since the user might not even ever use that stuff that has been loaded, making it very inefficient.

If you don't pre-load anything, bandwidth is used at its minimum, and the user loads only what it needs.