使用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

在Header中添加CSS，并在链接标记中使用defer属性。这样一来，css可以首先在客户端下载，而在整个文档加载后才能读取。

Answer 2

免责声明：这可能无法解决 2016 年发布的原始问题

TL;DR：请注意通常在报告末尾列出的 Lighthouse 版本！根据您用来衡量绩效分数的工具，您的结果可能会有所不同，而且相差很大！

显然，不同版本的 Google Lighthouse 算法差别很大。例如，截至 2021 年 5 月 19 日，我已经编写了一个网站并对其进行了不同的测试，以查看 Lighthouse 的性能得分。这是供您进行比较的表格：

<头>

设备	7.2.0	7.3.0	7.5.0
桌面	94	94	95
手机	92	72	95

为了简单起见：

• 我显示的是仅性能得分（这是您的总体价值）
• 我已经运行了 3 次测试，并对其进行了平均以解决细微的波动

在撰写本文时：

• Lighthouse 7.2.0 在 MacOS Google Chrome 上发布
• Lighthouse 7.3.0 被 PageSpeed Insights 使用
• Lighthouse 7.5.0 将在 within 2 weeks PageSpeed Insights 和 Google Chrome 92 上发布