How to defer multiple CSS files with Google Page Speed CSS load script

Question

I use Google Page Speed CSS load script to defer the my larger css file.

<script async>
    var cb = function() {
        var l = document.createElement('link');
        l.rel = 'stylesheet';
        l.href = '<?php echo $root; ?>css/custom.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>

How can I also defer these scripts?

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

What's the point? Any trick that loads CSS after page render will cause a flash of unstyled content. — Salman Arshad
– Salman Arshad, Commented Mar 14, 2015 at 14:20
@SalmanA Hi, you can read about it here developers.google.com/speed/docs/insights/OptimizeCSSDelivery. Do you know the answer to the question? — Joseph
– Joseph, Commented Mar 14, 2015 at 17:02
Based on the example, you can modify the cb function to load as many stylesheets as you want using a loop. But FOUC issue will remain there. — Salman Arshad
– Salman Arshad, Commented Mar 14, 2015 at 17:22
@SalmanA Yes sir the questions is about how the code will look. Do you mind answering? — Joseph
– Joseph, Commented Mar 14, 2015 at 20:04

Salman Arshad · Accepted Answer · 2015-03-14 20:37:00Z

1

Extending the code sample:

var loadCSSFiles = function() {
    var links = ["//example.com/css/custom.css", "//fonts.googleapis.com/css?family=PT+Sans", "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"],
        headElement = document.getElementsByTagName("head")[0],
        linkElement, i;
    for (i = 0; i < 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);
}

Note: I changed insertBefore to appendChild, the former seems incorrect as it would place the stylesheets outside the document head.

edited Mar 14, 2015 at 20:37

answered Mar 14, 2015 at 20:31

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sTx Over a year ago

Does this thing actually works? because I've done the same an in "PageSpeed Suggestions " section I have the same number of suggestion - more, when i open "PageSpeed Insights" I have even more problems then before doing that. Only way that actually worked for me was to append a single style with this method above the other that I declare speciffic in head section

Collectives™ on Stack Overflow

How to defer multiple CSS files with Google Page Speed CSS load script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related