改进灯塔绩效评分

Question

我正在通过Ionic-React通过firebase-hosting托管一个web应用程序：

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

我通过chrome开发工具在页面上进行了一次灯塔审计，得到了非常糟糕的性能评级.

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

我已经对这个演示的所有路线和组件进行了评论，甚至删除了字体，如果您尝试通过chrome dev工具运行灯塔并转到“查看原始跟踪”，它将显示对该网站的详细分析，下面是结果：

​

​

现在，如果您看到在加载一个特定的块时丢失了大约4秒"https://drakapoor-65d6d.web.app/static/js/6.53bd499b.chunk.js"，我不知道其中包含了什么，我已经赞扬了整个项目并进行了部署。我如何摆脱这个问题?发生了什么事，我甚至不知道向任何方向前进……

LightHouse评分:在这里，如果你看到最大的油漆含量和速度指数都很差，是什么原因造成的？我几乎什么都没做..。

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

​

Answer 1

糟糕的灯塔得分可能是由你的网络，硬件或任何其他第三方加载项造成的。

最大含量油漆(LCP)是FCP +N秒到第一个图像或文本块的度量。

第一个内容油漆( FCP )是衡量感知负载速度的一个重要的、以用户为中心的度量标准，因为它标记了页面加载时间线中的第一个点，用户可以看到屏幕上的任何内容--快速的FCP可以帮助用户放心某些事情正在发生。

同时，引用Web #在实地；

根据用户的设备能力和网络条件，站点的性能可能会发生巨大的变化。它还可以根据用户是否(或如何)与页面交互而有所不同。

您的第一个内容油漆(FCP)，其中有7.3 s被认为是差，因为它是超过3s。当审计开始时，第一次对FCP进行测量。

这些是关于指标的分类(基于开发人员洞察)；

        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

以上每一个度量的更多细节都可以在这里找到；

• FCP - 第一次油漆
• FID - 第一输入延迟
• LCP - 最大含量涂料
• CLS- 累积布局移位

根据性能评分。你的分数可能也会波动的基础上；

• A/B测试或正在提供的广告更改
• 因特网流量路由变化
• 在不同的设备上进行测试，例如高性能台式计算机和低性能膝上型计算机。
• 注入JavaScript和添加/修改网络请求的浏览器扩展
• 防病毒软件

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

1. 使用缓存策略服务静态资产并对其进行CDNize
2. 如果可能的话，考虑一下代码分裂和延迟加载组件。
3. 缩小CSS和JS。如果可能的话，调整图像的大小+用无损压缩进行压缩
4. 在链接中使用preload查找最终将在页面加载时第一次加载的资产。
5. 尽量减少第三方的使用
6. 考虑使用被动侦听器进行触摸和轮转事件侦听器。了解更多关于it的信息，这里

还有更多，你也可以在灯塔审计文件上找到

最后，但同样重要的是，如果你已经发布了你的网站-你也可以有灯塔，以审计你的网站在这里。所有的测试都是使用模拟移动设备运行的，控制在一个快速的3G网络和4倍的CPU减速。

​

​