使用srcset会导致页面速度惩罚

Question

像这样将视网膜屏幕和非视网膜屏幕分别显示在相应的设备上：

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

功能正常。但Google Pagespeed Insight提示在CSS加载之前无法呈现它，因此我们会受到惩罚。然而，这仅适用于移动视图，在该情况下，Pagespeed Insights无论如何都会呈现Retina图像。

我们的完整CSS文件在页脚中，因为我们将关键的above-the-fold CSS内联在头部。

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

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

我们漏掉了什么？浏览器是否需要读取样式规则才能知道使用哪个源/ srcset 图像？

测试用例：

这是一个测试页面：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

- Raphael Jeger

---

根据 https://scottjehl.github.io/picturefill/#support，似乎一些浏览器并不完全支持picture/srcset规范，并且存在一些与http请求相关的问题。虽然我不知道这个问题是否也会影响页面速度结果。 - kaosmos

请再看一下，PageSpeed 抱怨您的页面存在渲染阻塞的 CSS/JS。我们的页面上没有这个问题（得分为100/100），如果我们删除 srcset 的话。 - Raphael Jeger

我使用与您示例中相同的标记和在页脚加载的CSS文件，获得了100/100的移动分数： https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmadeyourday.net%2Fpagespeed-test-1
您能否提供受影响的网页链接或显示页面速度问题的简化测试用例？ - ausi

@ausi 我们受影响的页面是 www.desirio.com ... 有时可以访问，有时无法访问。 - Raphael Jeger

你没有错过任何东西，Pagespeed 错误地认为可以通过比较呈现图像的尺寸与文件分辨率来优化你的图像。我建议你不要把重点放在得分上，而是关注实际的指标：关键渲染路径、交互时间以及在慢速连接和低端设备上的测试，是否在3G网络下的前3秒内出现有意义的绘制？是否存在 FOIT（闪烁文字）？Pagespeed 得分也不应显著影响你的搜索结果，所以我不会考虑它对你的处罚。 - Tigran Petrossian

Answer 1

在头部添加您的CSS，并在链接标记中使用defer属性。这将允许CSS首先在客户端上下载，但在整个文档加载后再读取。

- Nikhil Kumar

Answer 2

免责声明：这可能无法解决原问题，因为它是在2016年发布的。

简而言之：请注意Lighthouse版本，通常会在报告末尾列出！根据您用于测量性能得分的工具不同，您的结果可能会有很大差异！

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

device	7.2.0	7.3.0	7.5.0
desktop	94	94	95
mobile	92	72	95

为了简单起见：

• 我仅显示性能分数（这是您的总体值）
• 我运行了3次测试并取平均值以考虑轻微波动

撰写本文时：

• 在MacOS Google Chrome上发布了Lighthouse 7.2.0
• PageSpeed Insights使用Lighthouse 7.3.0
• Lighthouse 7.5.0将在2周内发布到PageSpeed Insights和Google Chrome 92中

- Alexander Kucheryuk

Answer 3

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

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

等同于这个：

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

也许这可以帮助你？

- Mattijs

---

我不相信那是完全等价的。 - Stephen M Irving

为什么不呢？在低dpi环境和不支持“picture”或“srcset”的浏览器中，两者都应该显示非Retina版本，在高dpi环境和兼容浏览器中应该显示Retina版本。 - Imanuel

不是等价的，<picture> 生成一个备用图像而 <img src srcset> 不会。 - RichardMiracles