How to preload an ENTIRE web page

Question

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.

Worley

This browser feature (not supported by all) developer.mozilla.org/en/Link_prefetching_FAQ is relevant. Personally I see it as an advantage that it takes no JS at all to implement, but it does not match the question exactly. – Exoskeleton

Answer 1

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

Newson

Hacky and dirty, but effective; +1 – Bienne

So you put the second's page loading cost to the first page, too? I don't think that's a wise solution. Users visited the first page easily will get bounced because of the radically increased loading cost of their landing page. – Bijugate

@TörökGábor You could set the iframe src attribute with javascript in onload. That would make the second one not interfere with the first page. – Horned

Answer 2

Hidden <iframe/>'s are avoidable with either of two available javascript APIs: fetch or new XMLHttpRequest() .

Fetch is the most modern API at the moment and can be used like so:

<script>
  const url = './second_page.html';
  fetch(url, {credentials: `include`});
</script>

The alternative is to use XMLHttpRequest:

<script>
  const url = './second_page.html';
  req = new XMLHttpRequest();
  req.open(`GET`, url);
  req.send();
</script>

Either API returns the provided HTML file as a string. Going one step further, the returned HTML document can be traversed to precache images, videos, scripts, stylesheets, etc. too.

---

The source code for the javascript libraries instantclick and quicklink might be worth reviewing for ideas on how to optimize precaching html files:

• https://github.com/dieulot/instantclick
• https://github.com/GoogleChromeLabs/quicklink/

Hypnotic