title: Optimize CSS Delivery with head.js for Google Page Speed fail
body: <p>My page templates have a <code>assets</code> javascript array with assets list of css, js to use in that page, eg.:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  ..........
  ..........
  &lt;script type="text/javascript"&gt;
  var assets= ["/css/my.css", "/js/my.js", "/js/other.js"];
  &lt;/script&gt;
  &lt;script type="text/javascript" src="/js/head.js" async="async"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>with <a href="http://headjs.com/" rel="nofollow">head.js</a> (loaded asynchronously), load assets list of page:</p>
  
  <pre><code>// head.core code - v1.0.2 
  // head.css3 code - v1.0.0 
  // head.load code - v1.0.3
  head.load(assets);
  </code></pre>
  
  <p>now, Google Page Speed on mobile tab (not on desktop) says <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery" rel="nofollow">Optimize CSS Delivery</a> of <code>my.css</code></p>
  
  <p>but <code>my.css</code> is loaded asynchronously from head.js loaded asynchronously.</p>
  
  <p>What am I doing wrong?</p>