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

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.

Answer 3

If you just want to load them into the browser's cache, I suppose you could do that via a document in a hidden iframe.

Answer 4

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 5

You can prefetch arbitrary files (CSS, images, etc.) like this, the question is whether the small return and added bandwidth cost make it the right optimization to pursue now. The Yahoo performance rules are an excellent starting point. If this is your first performance optimization, then you're likely starting in the wrong place. This is definitely an optimization with a major tradeoff (the increased bandwidth), whereas other optimizations like "Minimize HTTP Requests" have smaller costs and likely a much bigger payoff.

To do this in a cross-browser compatible way, you'll basically add code to your page's onload event that creates an DOM object, like an , and sets its src to the URL you want to prefetch. Note that because a large fraction of all visitors probably only visit your front page, they would never have requested the files you've preloaded. I've seen doing preloading like this result in a several-times increase in requests and bandwidth for prefetched files.

Answer 6

I think you should analyze what time it takes user to get to another page after landing on your main page.

Then check which links on main pages are followed most frequently and at the main page/OnLoad event fire a timer function setTimeOut that will execute your auxilary function with pre-loading code for the most probable next links.

Answer 7

I agree with Gareth, I would created the iframe dynamically. You'll want to put this code as the very last thing on your landing page.

E.g:

....
  <script type="text/javascript">
    preloadContent();
  </script>
</body>
</html>

As for caching, that really depends on your setup. But the reference on the Yahoo! web site should be a good start: http://developer.yahoo.com/performance/rules.html#expires In brief, a good technique is to have your static files (CSS, images, potentially even scripts) with a 1 year expiry date. This way, anything your client has fetched will be kept in the browser cache without even checking for new versions.

If you do have to modify a file:

• Create a different file (i.e. different file name) for images
• CSS and scripts could be appended a version/date number at the end.

This ensures that a client never uses stale content.

Cheers!

Answer 8

Filament Group has a nice jQuery script that will preload images from a CSS file:

Filament Group article

In fact, there are a number of other jQuery based solutions if you google 'jquery preload'.

Answer 9

Loading everything in an hidden iframe is not the only way. There are two fantastic posts by Stoyan Stefanov on preloading/prefetching JS and CSS files for optimization.

Here are the links:

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://www.phpied.com/preload-cssjavascript-without-execution/

I personally like the AJAX approach a lot as well. Its nice and clean and works fine unless you want to fetch cross-domain stuff.

His latest technique in the second link also looks extremely promising ( though I haven't tried it yet.)