使用srcset的Pagespeed惩罚

Question

将视网膜和非视网膜显示到相应的设备，如下所示：

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

作品。但Google Pagespeed Insight告诉它在加载CSS之前无法呈现这一点，我们会受到惩罚。但是，仅在移动视图中 - 这是Pagespeed Insights无论如何渲染Retina图像的唯一情况。

我们完整的CSS文件位于页脚中，因为我们在头部有一个重要的，重要的CSS内联。

但是，此代码无需任何来自Pagespeed Insights的投诉

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

我们缺少什么？在知道要采用哪个source / srcset-image之前，浏览器是否有必要阅读样式规则？

测试用例：

这是一个测试页面：http://pagespeed-srcset-nopicturefill.slople.com/ ......这里是它的结果：https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&tab=mobile

Answer 1

我不确定这是否能解决你的问题，但是这个：

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

相当于：

<img src="non-retina.jpg" srcset="retina.jpg 2x">

也许这有帮助吗？