提高灯塔性能得分答案

【问题标题】：Improve lighthouse performance score提高灯塔性能得分
【发布时间】：2021-04-03 13:43:49
【问题描述】：

我在这里通过firebase-hosting 托管Ionic-React 网络应用程序：

https://drakapoor-65d6d.web.app/

我通过 chrome dev-tools 对页面进行了灯塔审核，但性能评分非常差...

我无法理解代码的哪一部分导致分数下降。

我已经评论了这个演示的所有路由和组件，甚至删除了字体，如果你尝试通过 chrome 开发工具运行 Lighthouse 并转到“查看原始跟踪”，它会显示详细分析网站，下面是出来的结果：

现在，如果您看到尝试加载特定块“https://drakapoor-65d6d.web.app/static/js/6.53bd499b.chunk.js”时丢失了大约 4 秒，我不知道里面有什么它，我已经赞扬了整个项目并进行了部署。我怎样才能摆脱这个？这是怎么回事，我什至无法向任何方向前进……

LightHouse 评分：这里如果你看到最大的 contentful 绘制和速度指数都很差，这是什么原因造成的？我什至几乎什么都没做..

如果我能提供任何可以帮助您帮助我的东西，请告诉我，谢谢。

【问题讨论】：

那基本上是说你的网速很慢？但是，我检查了your site，在灯塔上得到了 99 分。
真的吗？灯塔性能得分为 99？分数不会考虑网速吗？我也以 50 Mbps 的速度运行
我相信会考虑的。请注意屏幕截图中的那 8 个空白白框，我相信那是您仍在获取资源并且您的浏览器太慢而无法执行此操作的时候，并且 lighthouse 认为文件太大，而事实上我得到了 99 ，这也是我第一次注意到这一点。我可能错了，但请尝试在互联网速度更快的隐身浏览器上运行它（以避免使用插件）。
如果网速影响分数，如果我在2g上尝试这样做，任何网站都会有低分对，这让我想相信网速不应该影响分数，测试本身应该操纵速度来衡量性能..
这里有两件事在起作用，首先是 OP，我猜你将 Lighthouse 设置为“应用节流”（通过取消选中 Lighthouse 选项卡左上角的“模拟节流”）。这总是不如模拟节流那么宽容。其次，我猜你使用的设备要么不是很强大，要么有很多后台进程正在运行。您会看到 Lighthouse 应用了 4 倍的 CPU 减速，并且您的所有速度问题都与 CPU 处理时间有关。您是否尝试过 Page Speed Insights，因为在那里比较性能会更容易。

标签： javascript google-chrome-devtools lighthouse

【解决方案1】：

TL;DR;糟糕的灯塔分数可能是由您的网络、硬件或任何其他第三方插件造成的。

Largest Contentful Paint (LCP) 是 FCP + N 秒 到第一个 image or text block

的度量

首次内容绘制 (FCP) 是衡量感知加载速度的一个重要的、以用户为中心的指标，因为它标记了页面加载时间线中用户可以在屏幕上看到任何内容的第一个点 -快速的 FCP 有助于向用户保证正在发生的事情。

另外，引用Web Dev #In the Field;

网站的性能可能会因用户的不同而有很大差异设备功能及其网络状况。它也可以变化基于用户是否（或如何）与页面交互。

您的第一个有 7.3 秒的内容绘制 (FCP) 被认为是差，因为它超过了 3 秒。 FCP 在审计开始时首次测量。

这些是指标上的分类（基于Developer Insight）；

        Good            Needs Improvement       Poor
FCP     [0, 1000ms]     (1000ms, 3000ms]        over 3000ms
FID     [0, 100ms]      (100ms, 300ms]          over 300ms
LCP     [0, 2500ms]     (2500ms, 4000ms]        over 4000ms
CLS     [0, 0.1]        (0.1, 0.25]             over 0.25

可以在此处找到上述每个指标的更多详细信息；

根据Performance Scoring。您的分数也可能会因以下因素而波动；

A/B 测试或正在投放的广告的更改
互联网流量路由更改
在不同设备上进行测试，例如高性能台式机和低性能笔记本电脑
注入 JavaScript 和添加/修改网络请求的浏览器扩展
杀毒软件

为了提高您的网页性能，请考虑以下做法；

使用缓存策略提供静态资产并对其进行 CDN 化
尽可能考虑代码拆分和延迟加载组件
缩小 CSS 和 JS。并尽可能调整图像大小 + 使用无损压缩进行压缩
在您的链接中使用 preload 以获取最终将在您的页面首次加载时加载的资产。
尽量减少第三方使用
考虑为触摸和滚轮事件侦听器使用被动侦听器。阅读更多关于它的信息here

您还可以在Lighthouse Audit Documentation找到更多内容

最后但同样重要的是，如果您已经发布了您的网站 - 您还可以通过 here 让 Lighthouse 审核您的网站。所有测试均使用模拟移动设备运行，限制为快速 3G 网络和 4 倍 CPU 速度。

【讨论】：