Insights sidebar in the DevTools Performance panel  |  Blog  |  Chrome for Developers

Chrome DevTools 的性能面板新增了 Insights 侧边栏，旨在帮助开发者更高效地分析和优化网页性能。该功能于 Chrome 131 版本引入，并在后续版本中不断扩展和改进。

功能概述

Insights 侧边栏将 Lighthouse 的性能分析功能直接集成到性能面板中，使开发者能够在查看性能追踪时直接获得优化建议。这些建议不仅以列表形式呈现，还能通过高亮显示和时间轴上的标注，帮助开发者快速定位问题所在。例如，当鼠标悬停在某个建议上时，相关的时间轴部分会自动放大并高亮显示，便于开发者查看问题的上下文。

使用方法

要使用 Insights 侧边栏，开发者只需在性能面板中点击 Record 按钮，加载页面或进行交互，然后停止录制。侧边栏会自动列出针对当前录制的性能问题的分析建议。如果录制了多个页面的导航，每个页面都会有自己的建议列表，开发者可以通过点击页面 URL 旁边的图标来切换查看不同页面的分析结果。

主要功能模块

页面加载性能

• LCP（Largest Contentful Paint）分析：通过将 LCP 时间分解为四个阶段（请求、解析、渲染等），帮助开发者针对性地优化页面加载速度。如果启用了字段数据，还会显示 75% 分位值的对比数据。
• 第三方资源分析：识别页面中第三方资源的性能影响，包括资源加载和 CPU 活动，并通过高亮显示帮助开发者定位问题。
• 字体加载优化：检查页面中是否有字体加载阻塞了文本的显示，并建议使用 font-display: swap 或 optional 属性来优化。

响应性性能

• INP（Interaction to Next Paint）分析：通过分解 INP 的各个阶段，帮助开发者理解交互延迟的成因，并在时间轴上标注相关事件。
• DOM 优化：报告页面的 DOM 大小，并高亮显示可能因 DOM 过大而导致性能问题的事件。
• 强制重排检测：识别可能导致页面重排的操作，例如在 DOM 中插入元素后立即查询元素尺寸，从而触发不必要的布局计算。

布局稳定性

• CLS（Cumulative Layout Shift）分析：在时间轴上显示布局偏移的轨迹，并通过高亮显示和动画覆盖层帮助开发者可视化布局偏移的具体情况。

优势与未来展望

Insights 侧边栏的引入，使得开发者能够在性能面板中直接获得针对性的优化建议，而无需在不同工具之间切换。这不仅提高了开发效率，还帮助开发者更直观地理解性能问题的上下文。目前，Chrome 团队正在持续改进现有的 Insights 功能，并计划在未来版本中增加更多分析建议，以进一步提升开发者体验。