提高我的 React 项目的性能和可访问性

Question

a 做了一个反应项目，其中性能和可访问性都不好，我如何提高项目的性能，它显示了核心 Web 生命评估： 失败

最大内容绘制元素 7,970 毫秒 减少 JavaScript 执行时间 1.4 秒 最小化主线程工作 3.2 秒 减少第三方代码的影响第三方代码阻塞主线程400毫秒 消除渲染阻塞资源 潜在节省 900 毫秒 推迟屏幕外图像 潜在节省 280 KiB 避免 DOM 大小过多（856 个元素） 减少未使用的 JavaScript 潜在节省 114 KiB 减少未使用的 CSS 潜在节省 32 KiB

我该如何改善这个问题

我使用webp格式缩小图像的大小

Answer 1

我知道这很推销，但你需要有一个工具来为你监控这一切，既使用 Lighthouse（就像你刚才所做的那样），也使用 RUM 和 CrUX 数据。一旦你做到了这一点，你就可以建立当前绩效的基线，然后逐步改进它。

Lighthouse 是一个实验室工具，因此您不能依赖它来获得实际性能。让我推荐 PageVitals (https://pagevitals.com) - 我是创始人 - 它为您提供持续的 Lighthouse、RUM 和 CrUX 监控和警报。