Pagespeed-penalty 使用 srcset答案

【问题标题】：Pagespeed-penalty for using srcsetPagespeed-penalty 使用 srcset
【发布时间】：2016-09-09 12:22:08
【问题描述】：

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

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

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

测试用例：

【问题讨论】：

您是否使用 polyfill 来支持旧浏览器中的图片标签？
没有。只是做时也会发生同样的情况
根据scottjehl.github.io/picturefill/#support 似乎有些浏览器不完全支持图片/srcset 规范，http 请求存在一些问题。不过，我不知道这个问题是否也会影响 pagespeed 结果
我得到了 100/100 移动分数，其标记与您的示例中的相同，并且在页脚中加载了一个 CSS 文件：developers.google.com/speed/pagespeed/insights/… 您能否提供受影响网页的链接，或简化的测试用例显示页面速度问题？
你没有错过任何东西； Pagespeed 错误地假设您的图像可以通过将渲染图像的尺寸与文件分辨率进行比较来优化。我不建议关注分数本身，而是关注实际指标：关键渲染路径、交互时间以及对慢速连接和低端设备的测试，在 3G 上是否会在前 3 秒内发生有意义的绘制？有 FOIT 吗？ Pagespeed 分数也不应该对您的搜索结果产生任何重大影响，所以我不会认为它是一种惩罚。

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

TL;DR：注意通常列在报告末尾的 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】：

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

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

相当于这个：

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

也许这有帮助？

【讨论】：