title: CSS delivery optimization: How to defer css loading?
body: <p>I am trying to <strong>optimize the CSS delivery</strong> following the google documentation for developers <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example" rel="noreferrer">https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example</a></p>
  
  <p>As you can see in the example of inlining a small CSS file the critical CSS in inlined in the head and <strong>the original small.css is loaded after onload of the page</strong>.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        .blue{color:blue;}
      &lt;/style&gt;
      &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="blue"&gt;
        Hello, world!
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  &lt;noscript&gt;&lt;link rel="stylesheet" href="small.css"&gt;&lt;/noscript&gt;
  </code></pre>
  
  <p>My question regarding this example:</p>
  
  <p>How to load a large css file after onload of the page?</p>