How to preload an ENTIRE web page

Question

Hi

How can you preload an entire web page using JavaScript so that I can get that page cached in the users browser?

I know how to preload images with JS but what I would like to do is preload the entire page.

Use case: On my website, I have a google maps page with a lot of other content (images, css, JS) and it takes a long time (about 10 seconds) to load from a non-cached browser.

It's a subpage to my home page and users typically visit this page. So what I want to do is preload the entire page with all of the loaded content (images, JS) as much as possible so that it's cached in the users browser so that when they come to that page - it loads up much quicker. Loading the page from a cached browser cuts the time from around 10 second to 2 second.

Thanks in advance for any help.

Answer 1

Create an invisible or very small <iframe src="second_page.html"> on the main page.

Answer 2

Maybe there are some wrong concepts. Seperating real contents from fancy stuffs may help reducing the loading cost a lot. You may choose solutions that delay the immediately loading things on document load. (For example, I have a concept demo called PlayMaps, that displays only a static Google Maps image until the user clicks on it, and only loads the interactive version of it after then.)

CSS and JS files should be compressed and minified, and try to serve all content statically.

Furthermore, you can analyze your website's performance with Firebug and YSlow to get the bottlenecks.