Google在PWA应用程序中的Lighthouse得分存在重大差异

问题描述

这似乎不是技术问题,但我会尽力做到这一点。

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

  1. 移动得分几乎总是比桌面得分差。不仅是对于我的应用程序,还是我测试过的所有电子商务网站(Amazon,Flipkart,eBay,Myntra等)的100%。这是为什么?据我了解,分数在First Contentful PaintLargest Contentful Paint上最为重要。如果真是这样,那么从技术上讲手机会不会因为涂漆面积变小而导致得分更高?

  2. 分数波动。并波动很多。我注意到,这仅适用于单页应用程序。这并不是因为微小的TTFB差异,因为我看到分数一次波动20+。如果是这样,那么我们如何信任分数?

在您说出“检查诊断报告,您将了解问题所在” 之前,我的问题不是“如何增加灯塔得分”,而是针对所问的两个问题以上。他们与实际分数无关。

解决方法

移动得分几乎总是比桌面得分差

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

除非您为两个完全不同的网站(而不是响应型网站)提供服务,否则移动评分将始终比台式评分差

据我了解,在“第一满意涂料”和“最大满意涂料”上,分数最重要。如果真是这样,那么从技术上讲手机会不会因为涂漆面积变小而导致得分更高?

“第一个内容丰富的油漆”和“最大的内容丰富的油漆”是基于时间的-大小无关紧要,重要的是它们何时发生。显然,如果连接和CPU的速度变慢,那么在移动测试中,这总是会变慢。

分数波动。

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

服务器或服务器容量已满,有时响应速度会变慢。

计分重要

据我了解,分数在“第一满意涂料”和“最大满意涂料”中最重要。

关于得分this answer I gave explains the new scoring的重要意义。您会看到“最大的满意涂料”和“总遮挡时间”是最重要的项目。第二部分是单页应用程序的线索,如果JavaScript很重,则TBT会更高,并且可能会随着加载脚本的时间而波动很大。

您也说不要要求您检查诊断,但我鼓励您但要详细。如果您发现它在一次运行中抱怨某个特定项目,但随后又将其传递给下一阶段,则对于调查分数之间的差异并查明问题是有用的信息。