CODEWITHSUNDEEP
javascriptjqueryhtmlcsspreload
Jason Young
Jason Young

Reputation: 3743

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

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?

Upvotes: 11

Views: 8707

Answers (7)

aem
aem

Reputation: 3916

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.

Upvotes: 0

Oli
Oli

Reputation: 1031

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!

Upvotes: 1

AlexA
AlexA

Reputation: 4118

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.

Upvotes: 0

Gareth Simpson
Gareth Simpson

Reputation: 37663

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.

Upvotes: 4

Peter Bailey
Peter Bailey

Reputation: 105868

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.

Upvotes: 1

Luca Matteis
Luca Matteis

Reputation: 29267

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.

Upvotes: 2

hugoware
hugoware

Reputation: 36397

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.

Upvotes: 7

Related Questions