title: Pagespeed-penalty for using srcset
body: <p>Displaying retina &amp; non-retina to corresponding devices like this:</p>
  
  <pre><code>&lt;picture&gt;
     &lt;source srcset="non-retina.jpg, retina.jpg 2x"&gt;
     &lt;img src="non-retina.jpg"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>Works. But Google Pagespeed Insight is telling that it cannot render this until the CSS is loaded, and we get a penalty for it. Only in mobile-view, however - which is the only case where Pagespeed Insights is rendering Retina-images anyway.</p>
  
  <p>Our complete CSS-file is in the footer, as we have the above-the-fold, critical CSS inline in the head.</p>
  
  <p>This code, however, works without any complaints from Pagespeed Insights</p>
  
  <pre><code>&lt;picture&gt;
    &lt;img src="non-retina.jpg"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>What are we missing? Is there some dependency that the browser has to read the style-rules before knowing which source/srcset-image to take?</p>
  
  <p><strong>Testcase:</strong></p>
  
  <p>Here's a test page for it: <a href="http://pagespeed-srcset-nopicturefill.slople.com/" rel="noreferrer">http://pagespeed-srcset-nopicturefill.slople.com/</a>
  ...
  and here's its results: <a href="https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&amp;tab=mobile" rel="noreferrer">https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&amp;tab=mobile</a></p>