Question

120

Loading CDN files via Javascript

rated 0 times [ 122] [ 2] / answers: 1 / hits: 7448 / 10 Years ago, wed, august 13, 2014, 12:00:00

I've been working hard to achieve 100/100 on Google Pagespeed (https://developers.google.com/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.com/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.com/bootstrap/3.2.0/css/bootstrap.min.css rel=stylesheet>

Google complains 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.com/bootstrap/3.2.0/css/bootstrap.min.css';

headID.appendChild(cssNode);

Anyone have any suggestions?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keric

Add To Favorites

Follow

Total Points: 572

Total Questions: 93

Total Answers: 97

Location: Cyprus

Member since Mon, Oct 24, 2022

2 Years ago

keric questions

1 Event.target.dataset returning undefined javascript

Thu, Dec 2, 21, 00:00, 3 Years ago

1 How to make a horizontal line without using < hr> tag?

Mon, Jul 19, 21, 00:00, 3 Years ago

1 Input with type=number that allows only numbers to be typed

Thu, Jul 15, 21, 00:00, 3 Years ago

1 Does declaring a React.memo inside another functional component provide the memoization performance as it is intended?

Sat, Jan 30, 21, 00:00, 3 Years ago

1 ReactJS useEffect() is running every time on page load

Thu, Nov 5, 20, 00:00, 4 Years ago

View All

answered 10 Years ago adrienb · Accepted Answer

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.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>