css - 使用 srcset 的 Pagespeed 惩罚

Question

像这样在相应的设备上显示视网膜和非视网膜:

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

有效。但是 Google Pagespeed Insight 告诉我们在加载 CSS 之前它无法呈现它，我们因此受到惩罚。但是，仅在移动设备 View 中 - 这是 Pagespeed Insights 渲染 Retina 图像的唯一情况。

我们完整的 CSS 文件位于页脚，因为我们在头部有首屏的关键 CSS 内联。

然而，这段代码可以正常工作，没有来自 Pagespeed Insights 的任何投诉

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

我们缺少什么？浏览器在知道要采用哪个源/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

在 Header 中添加您的 css，并在 link 标签中使用 defer 属性。这将允许先在客户端下载 css，但在加载整个文档后读取。