哪些参数会影响 Lighthouse 在桌面和移动应用程序中的性能？

Question

我正在使用 Hugo 构建个人博客并将其部署到 Netlify，出于好奇，我通过 Chrome Lighthouse 运行它。令我惊讶的是，桌面和移动设备的结果差异很大。

该博客尚未针对移动设备进行优化，但它主要使用相对大小，因此移动设备上的外观就是您在移动 Chrome 上选择“查看桌面版本”时看到的内容。

有三个结果影响特别大：首次内容绘制 (FCP)、最大内容绘制 (LCP) 和交互时间 (TI)。 结果如下（以秒为单位），Desktop或Mobile后面的数字是性能指数。总结一下：

• localhost

  和部署站点的结果可以忽略不计（因此这不是延迟、服务性能等问题）
• LCP 和 TI 都对移动设备不利，处于相同的“坏”程度（这强化了上述观点）。

---

http://localhost:1313

桌面 → 99

• 首次内容绘制（FCP）：0.2 → 确定
• 最大内容油漆（LCP）：1.0 → OK
• 交互时间 (TI)：0.9 → 确定

手机 → 77

• 首次内容绘制（FCP）：1.7 → OK
• 最大内容油漆（LCP）：5.5→不好
• 交互时间 (TI)：5.0 → 不好

https://mysite.example.com

桌面 → 99

• 首次内容绘制（FCP）：0.4 → OK
• 最大内容油漆（LCP）：1.0 → OK
• 交互时间 (TI)：0.9 → 确定

手机 → 77

• 首次内容绘制（FCP）：2.0 → ~OK
• 最大内容油漆（LCP）：5.3→不好
• 交互时间 (TI)：5.0 → 不好

---

这种行为的原因是什么？

Answer 1

Chrome Lighthouse 在移动设备和桌面设备上的测试不仅仅是在不同屏幕尺寸下进行渲染。 Lighthouse 使用的移动测试配置文件尝试通过限制加载页面的浏览器的网络速度和 CPU 功率来近似平均移动设备用户。这是在 Lighthouse 文档

中引用的

Lighthouse 报告的性能指标与典型移动用户在 4G 连接和中端约 200 美元手机上的体验相同。即使它在您的设备和网络上加载速度很快，其他环境中的用户也会对网站有非常不同的体验。

请阅读我们的节流指南了解更多信息。

用于移动配置文件的确切数字已从节流文档链接，但足以说明它肯定比台式机慢。

桌面 Lighthouse 设置不包括网络或 CPU 限制，因此与桌面相比，使用移动配置文件运行时您会看到性能测量结果更慢。