2024 年及以后的性能工具

Elizabeth Sweeny
Elizabeth Sweeny

Chrome 开发者工具中的“性能”面板已在 15 年的时间里以各种形式帮助开发者衡量和优化运行时性能。该面板最初名为“时间轴”,后来演变为您现在所熟悉的“效果”面板。

在此期间,Chrome 还推出了其他强大的性能产品和功能。值得注意的是,我们在 2016 年推出了 Lighthouse,以便更轻松地发现优化机会。我们于 2022 年发布了实验性“效果数据分析”面板,以测试显示效果数据分析的新方式。

“性能”面板包含丰富的数据和功能,可帮助开发者深入了解网页加载和运行时性能问题。不过,我们也要坦诚地说,该工具可能使用起来很有挑战,并且很难找出最有价值的改进机会来提升网页性能。此外,其他有助于排除干扰因素并快速找出优化机会的强大工具(例如 Lighthouse)与“效果”面板分离。

为了让开发者更轻松地发现和重现性能问题,我们将引入 Lighthouse 和“性能数据分析”面板中的功能和经验,并将其集成到现有的“性能”面板中。我们还将重点放在用户体验和易用性上,以提高“效果”面板作为 Web 性能优化工具的效果。

结果如何?一个信息中心,汇集所有效果数据和数据洞见,比以往更简单、更强大。

更轻松地针对网站性能采取行动

您的反馈证实,信息密度过高会加大易用性挑战。我们正在积极开发修复程序和功能,以便为您提供帮助。我们会优先处理关键优化流程,例如改进 Core Web Vitals。我们计划推出注释等功能,以便您标记发现并与同事分享所学。显示数据中的相关性有助于提高理解复杂系统的能力,您可以通过更多方式揭示数据的连接方式,例如网络请求与主线程 activity 之间的连接方式。

我们会在开发新功能后立即发布,并每隔几个月分享一次控制台提供的新功能的最新动态。请耐心等待!您很快就会看到新功能!

“性能”面板中的 Lighthouse 强大功能

我们了解了开发者如何同时使用 Lighthouse 和“性能”面板,并且在两者之间切换上下文是一项挑战。此外,若要根据 Lighthouse 发现的问题采取行动,您可能需要进入“效果”面板,获取更多背景信息。这会造成不便,因为网页效果的规定性概览与详细效果数据不一致。

我们将通过“性能”面板深度集成 Lighthouse 的性能分析。通过此次集成,Lighthouse 将在“性能”面板中突出显示可提升页面性能的重大机会,并附上采取行动所需的所有详细信息。

将所有性能功能移至“性能”面板后,DevTools 中的独立 Lighthouse 面板将变得多余,并将被弃用。此面板将于 2025 年下半年弃用。请务必明确指出,Lighthouse 不会停用

显示 Lighthouse 徽标的“Performance”面板的屏幕截图

Lighthouse 将持续存在

Lighthouse npm 模块和 PageSpeed Insights 中的 Lighthouse 报告(包括 PSI API)不会被弃用。我们将继续致力于确保 Lighthouse 作为一款可在开发者的首选环境中用于评估网页性能的开源工具的可用性和质量。

通过此次集成,我们可以提升“性能”面板和 Lighthouse 的功能,帮助开发者推理加载速度、响应能力和内容稳定性。

实验性“性能数据分析”面板将被弃用

我们在发布效果数据分析面板时,是希望通过实验来了解如何更好地解决三个关键问题:减少“效果”面板的信息密度、支持以用例为导向的分析,以及缩短使用“效果”面板的学习曲线。

我们通过开发者反馈从实验中学到了很多。我们验证了以使用场景为导向的分析(例如,“我想优化 LCP”或“我想优化网页以提高响应速度”)非常有价值,并且布局偏移轨道等功能可让您更轻松地诊断和改进指标。

开发者还发现,“效果分析”面板比“效果”面板更易于上手,这也验证了信息密度降低的吸引力。不过,在许多情况下,这种密度降低会带来代价,开发者需要前往“效果”面板,才能获取采取行动所需的详细数据。

我们将把实验性“性能数据分析”面板中获得的经验和许多功能集成到“效果”面板中。借助以用例为导向的分析、信息密度改进等功能以及 Lighthouse 集成,我们将能够提供更具实用价值的网页性能分析洞见。

“性能数据分析”实验将于 2024 年晚些时候移除。

在哪里提供反馈

我们会不断推出新功能,欢迎您提供反馈。如果您有关于如何改进新功能的想法,或者您在使用控制台的现有流程时遇到不便,欢迎与我们联系。我们希望了解哪些方面做得好,哪些方面做得不好,以及您认为哪些方面可以做得更好。谢谢!