2024 年及以后的性能工具

过去 15 年中,Chrome 开发者工具中的“性能”面板一直在帮助开发者以一种方式衡量和优化运行时性能。该工具从名为“时间轴”的面板开始,现已演变为您现在熟悉的“性能”面板。

在此期间,Chrome 发布了其他性能强大且性能强大的产品和功能。值得注意的是,Lighthouse 于 2016 年推出,旨在帮助用户更轻松地发现优化机会。实验性 Performance Insights 面板已于 2022 年发布,以测试显示效果数据分析的新方法。

“性能”面板包含丰富的数据和功能,可帮助开发者深入了解网页加载和运行时性能问题。但接下来我们说说实话,认识一下它使用起来可能很困难,而且很难找到提高网页性能的最大优化机会。此外,Lighthouse 等其他工具(例如 Lighthouse)会整理出噪声并快速隔离机会,其功能也与“性能”面板脱节。

为了让开发者能够更轻松地发现和重现性能问题,我们将引入 Lighthouse 和“性能数据分析”面板的功能和经验,并将它们集成到现有的“性能”面板中。此外,我们还注重用户体验和易用性,以提升“性能”面板作为网站性能优化工具的效用。

结果如何?一个面板,比以往任何时候都更轻松、更强大,适用于所有效果数据和分析洞见。

更轻松地根据网络性能采取行动

大家的反馈证实,高信息密度增加了易用性挑战。我们正在积极开发修复程序和功能来助其一臂之力。关键的优化历程(例如改进核心网页指标)得到了一流的处理。我们计划推出注释等功能,方便您标记发现结果并与同事分享经验。通过在数据中呈现相关性,您可以通过更多方式了解数据的关联方式,例如向主线程活动发出网络请求,从而提高理解复杂系统的能力。

我们会在开发新功能的过程中发布新功能,并且会每隔几个月分享一次该面板提供的新功能的更新。请稍候!您很快就会开始看到新功能!

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

我们已经了解了开发者如何使用 Lighthouse 和 Performance 面板,而在这两者之间进行上下文切换是一项挑战。此外,若要根据 Lighthouse 的发现结果采取措施,您可能需要进入“性能”面板获取更多背景信息。这会造成阻力,因为网页性能的规范性概览与详细的性能数据脱节。

我们将通过“性能”面板深度集成 Lighthouse 的性能分析。进行此集成后,Lighthouse 会在“效果”面板中揭示有助于改善网页性能的重要机会,并提供针对该机会采取措施所需的所有详细信息。

将所有性能功能移至“性能”面板后,开发者工具中独立的 Lighthouse 面板将变得冗余,并且将被弃用。此面板的弃用直到 2025 年下半年才会停用。请务必强调 Lighthouse 不会停用

带有 Lighthouse 徽标的“性能”面板的屏幕截图

Lighthouse 酒店再度前来

Lighthouse npm 模块和 PageSpeed Insights 中的 Lighthouse 报告(包括 PSI API)将不再被弃用。作为一款开源工具,可在开发者首选的环境中使用它来评估网页性能,我们会一如既往地致力于提供 Lighthouse 这款开源工具的可用性和质量。

这种集成可让我们改进性能面板和 Lighthouse 的功能,以供开发者尝试推断加载速度、响应速度和内容稳定性。

实验性效果数据分析面板将被弃用

性能数据分析面板以实验的形式提供,旨在了解我们如何才能更好地解决三个关键痛点:降低“效果”面板的信息密度、支持以用例为导向的分析,以及缩短“效果”面板带来的学习曲线。

我们从开发者的反馈中学到很多实验内容。我们证实,用例驱动型分析(例如“我想优化 LCP”或“我想优化网页,使其响应更快速”)非常有价值,并且布局偏移跟踪等功能使指标的诊断和改进变得更加简单。

开发者还发现,效果数据分析面板比“效果”面板更易于访问,这证明降低的信息密度很有吸引力。不过,在许多情况下,这种密度降低的代价是需要付出代价,因此开发者需要前往“效果”面板获取采取行动所需的详细数据。

我们的学习成果以及实验性效果数据分析面板中的许多功能都将整合到“效果”面板中。例如,以用例为导向的分析、信息密度改进、Lighthouse 集成等功能将有助于我们以前所未有的方式,获取有关网页性能的分析洞见。

效果数据分析实验将于 2024 年晚些时候移除。

在哪里提供反馈

在我们推出新功能时,欢迎提供反馈。如果您对如何改进添加的功能有想法,或者您在面板中的现有流程受到不当干扰,我们希望能收到您的反馈。我们非常希望了解哪些方面效果不错,哪些方面需要改进,以及您认为哪些方面有待改进。谢谢!