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

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.

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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related