Start loading next page while browser is idle

Question

I have product website. On one page I show thumbnails and a brief description of all the products. When you click on the photos, you get to a detailed product page.

Is there a way to get the browser to start loading and caching the javascript and CSS for the "detailed product" page while the user is just looking at the "all the products" page and trying to make a choice?

I want this preloading and caching to start only once the page has fully loaded as to not slow it down.

Any suggestions on how to implement this?

Answer 1

If you're using a JavaScript framework (like jQuery, protype, etc) then you can use a simple method to do an AJAX call. If not you'll have to write one which might be a bit confusing for someone that isn't familiar with JavaScript. A basic example is here.

You can use JavaScript to add script tags to your html page and it will include JS. Remember that if the JS is set to auto execute any code it will happen. For CSS, your only option is probably using JavaScript to send a request to grab the file (see above). You could include the CSS but it will override any styles from your original CSS file.

Websites that precache:
Websites including sites as big as Google and Yahoo use preaching to help performance. Google for instances loads a CSS sprite http://www.google.com/images/nav%5Flogo7.png on their main page along with other CSS and JS files that are not completely used on the main page alone. Most people already do something similar to this by just combining their CSS and JS files into one file in production. HTTP requests take more time than downloading the actual content. An example of Yahoo preaching is here

Yahoo talks about this on YSlow's help here.

Taken from one part of the guidelines here:
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Organization in development, speed in production:
What I usually try to do is in development I will split up my JS files if needed (hardly ever my CSS though). When its time to push this data to production servers, I run a compiler (simple script that combines all the files, and minifies them) and then put them online.

Minifying/compressing:
Remember HTTP requests are evil. A compressed JavaScript file and a compressed CSS file are so small, that I'm almost 100% sure there is an image on your main page that is smaller than it. Therefor it's pointless to worry about splitting them up per page. It's actually more of a performance hog to split them up across multiple pages.

CSS Sprites
The point in CSS sprites is a website probably has 40+ images on their page using CSS. Well thats 40+ HTTP requests on a users page load, thats A LOT of requests. Not only is that bad for the user, but thats also a lot of requests your web server is having to handle. If you aren't using a static content server and are just using Apache that is on your main host, you're poor Apache server is getting loaded with requests it could be serving for your web application. You can reduce this by combing your images into one file, or at least into fewer files. Using CSS's background-position property, you can do wonders.

I highly recommend reading the YSlow guidelines by Yahoo here: http://developer.yahoo.com/yslow/help/#guidelines

Answer 2

use setTimeout in the load event of the page, and set a timeout of a few seconds, after that, insert a script tag and a css tag into page (those ones from the next page)

something like this: (where url is the url of the thing you want to cache)

    //cache a script
    var scriptTag = document.createElement("script");
    scriptTag.setAttribute("type", "text/javascript");
    scriptTag.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(scriptTag);

    //cache an image:
    var img = new Image(); img.src = url;

    //cache a css
    var css= document.createElement("style");
    css.setAttribute("type", "text/css");
    css.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(css);

Answer 3

Theoretically you can start accessing resources from subsequent pages so that they are later available in the cache.

However, this is not good practice - especially if you are loading resources for all detail pages they may select. In doing so, you make the assumption that you should determine how the user's bandwidth is used, not them. If they are browsing multiple things at the same time, or doing other things with their bandwidth besides viewing your website, you are using their bandwidth in a manner they do not intend.

If their connection is slow enough that the load time for your detail pages needs to be optimized, chances are their connection is slow enough that they will feel the loss if they are doing other things at the same time.