javascript - Google PageSpeed Insights with Multiple CSS Files -


i'm optimizing site based on google's pagespeed insights. recommends "optimize css delivery" several files (names simplified example's sake):

<link rel="stylesheet" href="css/app.css" type="text/css"> <link rel="stylesheet" href="css/responsive.css" type="text/css"> <link rel="stylesheet" href="css/styles.css" type="text/css"> 

...by moving them <link> tags in <head> being called through javascript before closing tag:

<script>   var cb = function() {     var l = document.createelement('link'); l.rel = 'stylesheet';     l.href = 'css/app.css';     var h = document.getelementsbytagname('head')[0]; h.parentnode.insertbefore(l, h);   };   var raf = requestanimationframe || mozrequestanimationframe ||       webkitrequestanimationframe || msrequestanimationframe;   if (raf) raf(cb);   else window.addeventlistener('load', cb); </script> 

</body>

as can see, app.css being called.

my question is, there way add 3 css files in script?

you need extend google's script can add multiple files this:

var loadcssfiles = function() {     var links = ["style1.css", "style2.css", "style3.css"],         headelement = document.getelementsbytagname("head")[0],         linkelement, i;     (i = 0; < links.length; i++) {         linkelement = document.createelement("link");         linkelement.rel = "stylesheet";         linkelement.href = links[i];         headelement.appendchild(linkelement);     } };  var raf = requestanimationframe || mozrequestanimationframe || webkitrequestanimationframe || msrequestanimationframe; if (raf) {     raf(loadcssfiles); } else {     window.addeventlistener("load", loadcssfiles); } 

Comments

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -