提高灯塔性能得分

如何解决提高灯塔性能得分

我通过此处的 Ionic-React 托管一个 firebase-hosting 网络应用程序：

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

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

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

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

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

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

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

解决方法

TL;博士;您的网络、硬件或任何其他第 3 方插件都可能导致 Lighthouse 得分不佳。

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

的度量

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

而且，引用自 Web Dev #In the Field;

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

您的第一个 Contentful Paint (FCP) 有 7.3 秒，因为它超过 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

找到更多内容

最后但并非最不重要的一点是，如果您已发布您的网站 - 您还可以让 Lighthouse 在 here 审核您的网站。所有测试均使用模拟移动设备运行，限制为快速 3G 网络和 4 倍 CPU 速度降低。

提高灯塔性能得分

如何解决提高灯塔性能得分

解决方法

相关推荐