title: CSS Optimisation and PageSpeed Insights
body: <p>I was running Google PageSpeed Insights on my website - <a href="http://www.gpsheatmap.com">www.gpsheatmap.com</a>, and it suggested changing the loading of my stylesheets(<a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example">https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example</a>) from - </p>
  
  <pre><code>&lt;link href="/static/css/landing-page.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>To - </p>
  
  <pre><code>&lt;script&gt;
    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);
  &lt;/script&gt;
  </code></pre>
  
  <p>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</p>
  
  <p>Should I disregard this approach, or can this be fixed?</p>