Geek Answers Handbook

Download CDN files via Javascript

I work hard to reach 100/100 on Google PageSpeed ​​( https://developers.google.com/speed/pagespeed/insights/ ), but I get hungup when trying to use Javascript to load CDN based files. I get "CAUTION: provisional headers are displayed." and I guess this blocks such a call for security reasons, but I'm stuck.

I can name asycn script files like google that you like:

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

But what should I do with CSS files? If I call it the usual way:

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

Google complains and says that I have a CSS Resource Lock.

Here is a copy of the code I tried 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.com/bootstrap/3.2.0/css/bootstrap.min.css';
headID.appendChild(cssNode);

Anyone have any suggestions?

+4
3

, , sss, js async. HTML loadjscssfile() .

<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.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
        loadjscssfile("//fonts.googleapis.com/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.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
        loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
    };
    /* End of async download code. */
</script>
0

Google : https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

, , CSS, . CSS . bootstrap CSS - , , / .

, CSS, bootstrap.css

0

I suggest you embed styles for the critical path (above the crease): https://github.com/addyosmani/above-the-fold-css-tools
https://github.com/addyosmani/critical

Then download another css async:
https://github.com/filamentgroup/loadCSS/

0
source

More articles:


All Articles