CSS Optimisation and PageSpeed Insights

Question

I was running Google PageSpeed Insights on my website - www.gpsheatmap.com, and it suggested changing the loading of my stylesheets(https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example) from -

<link href="/static/css/landing-page.css" rel="stylesheet">

To -

<script>
  var cb = function() {
    var l = document.createElement('link'); 
    l.rel = 'stylesheet';
    l.href = '/static/css/landing-page.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>

I tried this for my stylesheets and it visibly changed the loading so you would see the pre-css view, then a second later you would see the stylesheet applied. This was in firefox

Should I disregard this approach, or can this be fixed?

Answer 1

You should consider the critical path and also put all the necessary style in your head section so as to avoid the FOUC (just the style for contents above the fold). This can be done either extracting the style by hand or — for larger sites — with an automatic task like critical-path-css-demo for gulp

Anyway if you choose to load all the stylesheets with javascript consider to still include them inside a <noscript> block, so they can be loaded also when JS is not available.

<noscript>
    <link rel="stylesheet" ...>
</noscript>

---

As a further optimization for near-future browser (at this time it works only on Chrome Canary) it will be possible to early preload stylesheets using

<link rel="preload" href="..." as="style">

and to create an async loader in a simpler way

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">

---

Another interesting and recent approach is described by Jake Archibald and it's called "Multi-stage CSS loading": it requires to load a small piece of CSS just before the markup that has to be styled and thus avoid the need for critical CSS, e.g.

<link rel="stylesheet" href="/site-header.css">
<header>…</header>

<link rel="stylesheet" href="/article.css">
<main>…</main>

<link rel="stylesheet" href="/comment.css">
<section class="comments">…</section>

The plan is for each to block rendering of subsequent content while the stylesheet loads, but allow the rendering of content before it. The stylesheets load in parallel, but they apply in series. This makes behave similar to <script src="…"></script>.