I've been working hard to achieve 100/100 on Google Pagespeed (/) but I keep getting hungup when trying to use Javascript to download CDN based files. I get 'CAUTION: Provisional headers are shown.' and I assume it's blocking this kind of call for security reasons but I'm stuck.

I can call script files asycn like this, which Google likes:

<script src="//maxcdn.bootstrapcdn/bootstrap/3.2.0/js/bootstrap.min.js" async></script>

But what am I to do about the CSS files? If I call it the normal way:

<link href="//maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

Google plains and says I have a 'blocking CSS resources'.

Here's a copy of the code I've been trying to use so far:

var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '//maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css';
headID.appendChild(cssNode);

Anyone have any suggestions?

I've been working hard to achieve 100/100 on Google Pagespeed (https://developers.google./speed/pagespeed/insights/) but I keep getting hungup when trying to use Javascript to download CDN based files. I get 'CAUTION: Provisional headers are shown.' and I assume it's blocking this kind of call for security reasons but I'm stuck.

I can call script files asycn like this, which Google likes:

<script src="//maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js" async></script>

But what am I to do about the CSS files? If I call it the normal way:

<link href="//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

Google plains and says I have a 'blocking CSS resources'.

Here's a copy of the code I've been trying to use so far:

var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css';
headID.appendChild(cssNode);

Anyone have any suggestions?

• javascript
• css
• asynchronous
• cdn

Share Improve this question Follow asked Aug 13, 2014 at 22:35 VinceVince 98022 gold badges1313 silver badges3333 bronze badges 7

• What exactly is the problem with your last block of code? It isn't clear what the problem is you need help with. That code looks to me like it should work as long as your page is OK with async loading of the CSS stylesheet (your user may see a non-styled version of the page before the stylesheet loads). – jfriend00 Commented Aug 13, 2014 at 23:26
• @jfriend00 I'm not sure you read through my problem above. The question is 'how do you use Javascript to load a CDN CSS file' because none of my browsers seem to work using the code above and in order to get the max rating possible from Google you must not call your CSS resources before the main page is fully downloaded. – Vince Commented Aug 14, 2014 at 8:00
• I read everything you wrote a couple times. It wasn't entirely clear what you were asking. So is your question: "Why doesn't my code for dynamically inserting style sheets work?". I don't see anything wrong with your code for adding a stylesheet so I think there must be something else wrong with your logic/code that you aren't showing us. – jfriend00 Commented Aug 14, 2014 at 8:05
• @jfriend00 Try using it and you'll get a browser error message, 'CAUTION: Provisional headers are shown.' and the resource does not download. I think its related to security built right into the browser but I don't know for sure. If I use the above code to download anything from my own domain it works just fine but that's not what I'm trying to do here. – Vince Commented Aug 14, 2014 at 8:23
• No errors for me here: jsfiddle/jfriend00/s80q5f53 using your code in both Chrome and Firefox and the .css file seems to load just fine. I still think there's something else going on. – jfriend00 Commented Aug 14, 2014 at 8:29

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

Here is the code I ended up creating to handle loading both css and js files async at the same time. Just put this at the bottom of your HTML before you closing tag and edit the loadjscssfile() calls as necessary.

<script>
    /* Beginning of async download code. */
    window.onload = function(){
        function loadjscssfile(filename, filetype) {
            if(filetype == "js") {
                var cssNode = document.createElement('script');
                cssNode.setAttribute("type", "text/javascript");
                cssNode.setAttribute("src", filename);
            } else if(filetype == "css") {
                var cssNode = document.createElement("link");
                cssNode.setAttribute("rel", "stylesheet");
                cssNode.setAttribute("type", "text/css");
                cssNode.setAttribute("href", filename);
            }
            if(typeof cssNode != "undefined")
                document.getElementsByTagName("head")[0].appendChild(cssNode);
        }
        loadjscssfile("//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css", "css");
        loadjscssfile("//fonts.googleapis./css?family=Open+Sans:300&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
        loadjscssfile("/css/style.css", "css");
        loadjscssfile("//ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js", "js");
        loadjscssfile("//maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js", "js");
    };
    /* End of async download code. */
</script>

Google provides a good explanation of this here: https://developers.google./speed/docs/insights/OptimizeCSSDelivery

It seems like they want you to inline CSS that is crucial to the page's initial display. Then load secondary CSS after. Since the bootstrap CSS is one large mix, I think it'll be non-trivial to separate crucial/non-crucial for your page.

Perhaps you can inline some duplicate CSS that exists in bootstrap.css

I'd suggest you to inline the styles for the critical path (above the fold): https://github./addyosmani/above-the-fold-css-tools
https://github./addyosmani/critical

Then load the other css async:
https://github./filamentgroup/loadCSS/