Trigger prefetching after page is fully loaded

You might use Cache Storage to prefetch (precache) assets. I work on an open-source project which uses this approach. Although, to serve precached assets you need a service worker. The logic of finding assets in my project looks like this.

The demo of this project is here. Also, I wrote an article which explains technical details of the project.

Assets get prefetched once the lib is loaded, so I don't wait for the entire page load. Maybe I should use requestIdleCallback to wait until the browser is idle.

Hopefully, it gives you some inspiration.

Just to note that you could add aditional stylesheet after the page load completly or whenever you want with somethig like this:

document.addEventListener("DOMContentLoaded", function(event) { 
      var script = document.createElement("link");
      script.rel = "stylesheet";
      script.href= "stylesOfAnotherPage2.css";

      document.getElementsByTagName("body")[0].appendChild(script);//or head
});

When you load page1, stylesOfAnotherPage2.css is cached, so when page2 is called, stylesOfAnotherPage2.css is already cached if page2 call the same file.