How to preload JavaScript and CSS files in the background, to have them ready in the browser cache when the user goes to the main page?

Question

I want to preload a JS file and a CSS file from the landing page to optimize the main site load, after the conversion in the landing. I was looking for information about this and finally tried to get this done using:

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'jsUrl');
    xhr.send('');
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'cssUrl');
    xhr.send('');

With Firefox this great, but with Chrome it seems that the XHR calls are cached in a different cache than the css and js files. We don´t use JQuery, the landing page must be lightweight (less load, more conversion rate).

Do you have any recommendation of another way to solve the original problem? (preload components)

Do you know how to make Chrome cache these requests?

score 3 · Accepted Answer · answered Jan 29 '12 at 13:52

This is a tested solution in a high volume site that works.

First, to avoid a competition between the landing page resources and the preloaded resources for the bandwith you could delay the load with javascript:

var prevOnLoad=window.onload;
function onLoadPreloadComponents() {
    if(prevOnLoad) {
        try{
           prevOnLoad();
        }catch(err){
        }
    }
    preloadSiteComponents();
}

window.onload=onLoadPreloadComponents;

This is not the way I solved this because in my use case a flash event (using the Flash to JS brigde) signals when the landing was finally loaded. But the previous code must works as well. When the load page event is fired by the browser this function will execute previous onLoad code and the preloading.

I put an empty div cointainer where the iframe will be loaded.

<div id="mainSiteComponentsContainer" style="display: none;">
</div>

And the function code is:

function preloadSiteComponents() {
    try{
        document.getElementById('mainSiteComponentsContainer')
            .innerHTML=
                "<iframe src=\"http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html\" frameborder=\"no\" height=\"0px\" width=\"0px\"></iframe>";
    }catch(err) {
    }
}

As you could see, the link url to iframe is dynamic, it changes between differents plataform versions (different deployments) to avoid unwanted browser cache with a new deployments.

The HTML that will be in the iframe could be something like this (for example):

<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="noindex,nofollow" name="robots">
        <script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
        <link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
    </head>
    <body> </body>
</html>

Here you could see the links to the components that I want to preload. Finally, the div cointainer will have the iframe. After the onLoad event:

<div id="mainSiteComponentsContainer" style="display: none;">
    <iframe width="0px" height="0px" frameborder="no" src="http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html">
        <html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta content="noindex,nofollow" name="robots">
                <script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
                <link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
            </head>
            <body> </body>
        </html>
    </iframe>
</div>

You could see the working solution here.

Use Firebug to see the delayed load of this components.

The problem with this approach is that the site can really prevent the loading from certain urls. That way, as soon as the page is loaded you cannot use AJAX to those urls. — Konstantin, Apr 26 '17 at 21:29

score 2 · Answer 2 · answered Sep 02 '10 at 14:42

2

Random thought:

Maybe you could include a hidden IFrame in your landing page which loads a page that does nothing but include your javascript and CSS files. If you trigger the loading of that IFrame in your javascript then it shouldn't block the landing page's loading or rendering, yet the script and css files would be loaded by the browser in the same way that it would for any other page.

answered Sep 02 '10 at 14:42

Herms

37,540
12
78
101

It's a good idea, but at first I didn't want to add dynamically the iframe because it looks more complicated than a two XHR calls. I need to do this dynamically so the components does not compete in bandwith with the banner donwload of the landing page. Thanks. – Jonathan Barbero Sep 02 '10 at 14:56
You don't have to dynamically add the IFrame. It can be in the source for the page, just don't have it point to anything initially. Just set its src (or whatever the attribute is) via javascript to launch the cache page. – Herms Sep 02 '10 at 14:57
Javascript / DHTML is not required to hide an iframe. Simply use `style="visibility:hidden;height:0px;width:0px"` on a static iframe and place it last in the page. The fixed dimensions will prevent it blocking rendering and its position in the page should ensure its resources load after other page elements. – SpliFF Jan 28 '12 at 10:44

score 0 · Answer 3 · answered Jan 28 '12 at 10:53

0

Haven't tried this but adding this to the BOTTOM of your landing HTML should work:

<!-- Preload -->
<img src="/path/to/preload.js" style="display:none">
<img src="/path/to/preload.css" style="display:none">

The browser doesn't actually care that the resources aren't images it should fetch and cache them anyway. Browser typically load resources in page order so you wont delay other elements and with display:none you probably won't block rendering either.

Downside is you won't preload images defined in the CSS or @imports unless you preload them manually.

answered Jan 28 '12 at 10:53

SpliFF

38,186
16
91
120

I guess I'll test this, though I've seen a resource that suggested "display:none" don't get loaded in some browsers, and that sounds like a very reasonable thing to do. – Roman Starkov Jan 28 '12 at 20:33
I have read that some browsers have different cache zones for different kind of resources. So for example the browser could have a cache zone for images and another one for JS. So, the idea is good but probably will not work in all the main browsers. – Jonathan Barbero Jan 29 '12 at 13:07
@romkyms: `style="visibility:hidden;width:0;height:0"` should actually download. @Jonathan: I consider that pretty unlikely, there's no good technical reason I can think of to compartmentalise cache resources like that. – SpliFF Jan 31 '12 at 04:17

How to preload JavaScript and CSS files in the background, to have them ready in the browser cache when the user goes to the main page?

3 Answers3