Preload javascript and css components in landing page

Question

Hello,

I want to preload a JS file and a CSS file from the landing page to optimize the main site load, after de 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?

Thanks in advance, Jonathan.

Answer 1

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.