Pagespeed-penalty for using srcset

Question

Displaying retina & non-retina to corresponding devices like this:

<picture>
   <source srcset="non-retina.jpg, retina.jpg 2x">
   <img src="non-retina.jpg">
</picture>

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.

Our complete CSS-file is in the footer, as we have the above-the-fold, critical CSS inline in the head.

This code, however, works without any complaints from Pagespeed Insights

<picture>
  <img src="non-retina.jpg">
</picture>

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?

Testcase:

Here's a test page for it: http://pagespeed-srcset-nopicturefill.slople.com/ ... and here's its results: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&tab=mobile

Answer 1

Add Your css in Header and use defer attribute in link tag. This will allow css to be downloaded on client side first but read after the whole document is loaded.