谷歌 PWA 应用的 Lighthouse 分数存在重大差异

Question

这似乎不是一个技术问题，但我会尽量做到这一点。

我最近制作了一个基于 ReactJS 的 PWA 电子商务应用程序。在检查灯塔的性能时，我注意到了一些差异，并希望有人向我解释这些

1. 移动端的分数几乎总是比桌面端的分数差。不仅适用于我的应用程序，而且适用于我测试过的所有电子商务网站（亚马逊、Flipkart、eBay、Myntra 等）的 100%。这是为什么？据我了解，First Contentful Paint 和 Largest Contentful Paint 的分数最重要。如果是这样的话，那么从技术上讲，手机的可绘制区域不会更小，从而得分更高吗？

2. 分数波动。并且波动很大。我注意到这仅发生在单页应用程序中。这不可能是因为微小的 TTFB 差异，因为我看到分数一次波动 20+ 分。如果是这样，那么我们如何相信分数？

在你说“检查诊断报告，你就会明白出了什么问题”之前，我的问题不是“如何提高灯塔分数”，而是针对所提出的两个问题更具体更多。而且它们与实际分数无关。

Answer 1

移动端的分数几乎总是比桌面端的分数差

移动测试模拟 4G 连接和 4 倍 CPU 减速，以更准确地反映手机功率降低以及可能未连接到 WiFi 的事实。

除非您为两个完全不同的网站而不是响应式网站提供服务，否则移动端的得分将总是低于桌面端的得分。

据我了解，First Contentful Paint 和 Largest Contentful Paint 的分数最重要。如果是这样的话，那么从技术上讲，手机的可绘制区域不会更小，从而得分更高吗？

“首次内容绘制”和“最大内容绘制”基于时间 - 大小无关紧要，重要的是它们何时发生。显然，在连接速度和 CPU 速度较慢的情况下，这在移动测试中总是会变慢。

分数波动。

如果您的分数波动很大，那么您可能会发生某种形式的比赛情况。如果您正在异步加载所有内容，但加载顺序会影响页面的显示方式，这是可以预料的。我建议在应用了网络限制的页面上运行性能跟踪，看看那里是否会得到不同的结果。

或者你的服务器已经满负荷，有时响应速度较慢。

评分的重要性

据我了解，First Contentful Paint 和 Largest Contentful Paint 的分数最重要。

至于评分this answer I gave explains the new scoring 的重要性。您会看到“最大内容绘制”和“总阻塞时间”是最重要的项目。第二部分是单页应用程序的线索，如果 JavaScript 很重，TBT 会更高，并且会根据脚本加载的时间而波动很大。

您还说不要求您检查诊断，但我鼓励您这样做但要详细。如果您发现它在一次运行中抱怨某个特定项目，但在下一次运行时又将其传递，那么这是调查分数之间的差异并查明问题的有用信息。