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
Post a Comment