在类似的设备上显示视网膜和非视网膜:
<picture>
<source srcset="non-retina.jpg, retina.jpg 2x">
<img src="non-retina.jpg">
</picture>
作品。但是Google Pagespeed Insight告诉我们，在加载CSS之前，它无法呈现此图像，因此我们会为此受到惩罚。但是，仅在移动 View 中-这是Pagespeed Insights始终渲染视网膜图像的唯一情况。
我们完整的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
最佳答案
在Header中添加CSS，并在链接标记中使用defer属性。这将允许css首先在客户端下载，但在整个文档加载后读取。