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?

css and js files get stored in cache after 1st load so i dont think running a script to load it makes any difference. if all, it will be faster if you stored the css file in local storage -- smashingmagazine.com/2014/09/… — Tasos
I think this is a realy shit recommended by google. Load the CSS when DOM is ready by a javascript function is really annoying. And it creates the problem that farrellmr describes: you'll see applying the styles later. Why google recommends this kind of craps? It's not the first thing that google recommends when it's a crap (use -webkit- prefixes for all functionalities that you need, for example) — Marcos Pérez Gude

Fabrizio Calderan Fabrizio Calderan · Accepted Answer · 2016-03-15T09:11:57

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>.

CSS Optimisation and PageSpeed Insights

1 Answers