Can JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?

Question

I am in the process of optimising a website, with the main aim of improving the overall download times of web pages. I have been applying as many of the techniques recommended by the Yahoo Developer Network's "Best Practices for Speeding Up Your Web Site".

Now, the stats show that we have a lot of visitors that first access the website via:

the stand-alone search engine page HTTP error handlers - i.e. our custom "404 Not Found” page other miscellaneous stand-alone pages

Please note that these so-called "stand-alone pages” exist independently from the template system which is responsible for the layout and structure of the pages from the website proper. They have their own style sheet(s) and scripts (and therefore exist independently of the template system's CSS and JS files also).

Now, these page types are more intermediary pages than content pages. A good example of their general purpose would be that of a reference landing page. I thought that it would be a good idea to use a technique like post-onload to “prime” the user's cache ready for their next move (which will nearly always be part of the main template system).

The script by Steve Sounders is:

post-onload.php:

<script>
function doOnload() {
    // Do the downloading awhile AFTER the onload.
    setTimeout("downloadComponents()", 1000);
}

window.onload = doOnload;

// Download external components dynamically using JavaScript.
function downloadComponents() {
    downloadCSS("http://stevesouders.com/hpws/testsm.css?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsma.js?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsmb.js?t=1388138263");
    downloadJS("http://stevesouders.com/hpws/testsmc.js?t=1388138263");
}

// Download a stylesheet dynamically.
function downloadCSS(url) {
    var elem = document.createElement("link");
    elem.rel = "stylesheet";
    elem.type = "text/css";
    elem.href = url;
    document.body.appendChild(elem);
}

// Download a script dynamically.
function downloadJS(url) {
    var elem = document.createElement("script");
    elem.src = url;
    document.body.appendChild(elem);
}
</script>

What I would like to know is this:

Is it possible to re-write the two functions that perform basically the same thing as downloadCSS(url) and downloadJS(url), __without__ it actually being applied to the containing web page?

In effect, I am looking for downloadCSS(url) / downloadJS(url) functions that acts as a pre-load for the next web page's external CSS/JS files, which will behave much like the way the HTML5 spec intends the @prefetch attribute to be implemented). I basically want the files downloaded via post-onload to be in the cache ready.

If not, any other suggestions on how to perform the same task would be amazing!

Thanks in advance!

Suppose, On a single page you have 20 links of another pages. Now ,how would you come to know which link is going to be your next page? — Hitesh Gaur
– Hitesh Gaur, Commented Dec 27, 2013 at 11:19
So basically, load a lot more css that isn't needed on the current page at all, just so it's cached on the next page, makes sense? — adeneo
– adeneo, Commented Dec 27, 2013 at 11:19
A good question, HI2 – because the other 20 pages will invariably use the same template system, and therefore require the same CSS/JavaScript files and presentational images. I just though that, seeing as the site-search page is light-weight anyway, then may be a good time to get them into the cache “in the background,” as the other pages are a bit heavier than the one mentioned. — Jordan Clark
– Jordan Clark, Commented Dec 28, 2013 at 18:18
PS: I thought that the practice was quite common in broader a sense, e.g. I’ve heard of web apps that have a really lightweight login page as their default home page for new or logged-out users, and “prime” the cache at this point. This will help spread the weight and the wait, i.e. make the initial loading time of the start page (and all other pages within) more faster overall? — Jordan Clark
– Jordan Clark, Commented Dec 30, 2013 at 14:53

nzn · Accepted Answer · 2013-12-27 12:16:31Z

2

if you using ?t=1388138263 you cannot preload at all, because every time you will load a new version..

with jquery you can do something like:

$.ajax('script.js',{cache: true, dataType:'script'});
//or
$.getScript('script.js')
$.ajax('styles.css',{cache: true});

or you can create invisible iframe and load in to it html page which load all js and css files

hope this help

edited Dec 27, 2013 at 12:16

answered Dec 27, 2013 at 11:51

nzn

8385 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can JavaScript be used to prefetch external CSS and JS files, ready for the next page on same website?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related