Array of stylesheets to optimize CSS delivery

Question

I'm currently using this code to optimize my css delivery, but this is for one stylesheet only. How can I edit this to accept an array of stylesheets?

This code has been taken from suggestions at Google PageSpeed Insights developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Also, if there's a simpler code snippet to use which will still get the job done, I'm 100% open to that as well! I've found several different answers for CSS delivery optimization, but none I've found account for delivering more than one stylesheet.

//add Font Awesome
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.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);

This code loads the CSS after page load. I want to load more than just this one stylesheet after page load, and that's what my question is regarding. — NotAnotherCliche, Mar 11 '15 at 07:46
@NotAnotherCliche its a valid question, but the user experience will be much worse if the page loads and the styles load potentially much later (your site will look broken). It might be better to optimise your CSS files so they load faster... — somethinghere, Mar 11 '15 at 08:01
@somethinghere, you're right, it's important to make sure styles necessary for content above the fold are loaded first. Some people suggest in-lining these, but I usually create a separate stylesheet and leave this loaded in my head. — NotAnotherCliche, Mar 11 '15 at 08:04
Judging by the name, these files contain only fonts? Then it might be acceptible to do this. Still I think that it's not good for user experience if the page changes after a while, even if just the fonts change. — GolezTrol, Mar 11 '15 at 08:04
Font Awesome is an icon font, and since I'm not using it above the fold on my page, what you're describing is not an issue for me. Plus I just used that file name as an example. "Optimizing CSS Delivery" to satisfy Google PageSpeed should never be made a priority over your user experience or design. — NotAnotherCliche, Mar 11 '15 at 08:11

score 4 · Accepted Answer · edited May 23 '17 at 11:45

You can make an array and loop through it.

var cb = function() {
  var sheets = [
    '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
    '//maxcdn.bootstrapcdn.com/font-awesome2/4.3.0/css/font-awesome.min.css',
    '//maxcdn.bootstrapcdn.com/font-awesome3/4.3.0/css/font-awesome.min.css' ];
  
  var h = document.getElementsByTagName('head')[0]; 

  for (var i = 0; i < sheets.length; i++) {
    var l = document.createElement('link'); 
    l.rel = 'stylesheet';
    l.href = sheets[i];
    //h.parentNode.insertBefore(l, h); // This would insert them before the head.
    h.appendChild(l); // Insert them inside the head.
  }  
};

var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

This worked perfectly. Thank you =) Google should add this to their page! — NotAnotherCliche, Mar 11 '15 at 08:07

Array of stylesheets to optimize CSS delivery

1 Answers1