Trusted by market leaders · Client results
理解指标拆解面板
LCP 和 INP 等复合指标汇总了多个不同的时间事件。要优化总分，必须隔离这些底层组件。指标拆解面板将性能剖析为细粒度阶段，帮你找出具体瓶颈。
该工具用精确的工程目标取代了宽泛的优化。它将延迟归因于服务器、网络或客户端执行。
拆解面板解析
该面板提供三个同步视图，用于隔离延迟根因：
- 贡献度环形图：可视化每个子部分的相对权重。它回答了“最大影响因素是什么？”的问题。如果 `Time to First Byte` 占据了图表的 70%，你就知道问题出在后端。
- 历史时间线：展示每个组件绝对值随时间变化的趋势。用它将性能变化与部署等特定事件关联起来。
- 分段数据表：按维度（URL、设备等）拆解指标。每行包含一个分布条，揭示该分段的独特特征，帮你发现异常值。
LCP 组成部分 (Largest Contentful Paint)
LCP 测量加载性能。我们将该指标分为四个阶段：
- TTFB (Time to First Byte)：服务器响应时间。高 TTFB 表明数据库查询慢，或缺乏边缘缓存。
- 加载延迟：初始 HTML 响应与 LCP 资源开始下载之间的间隔。这测量的是资源发现延迟。
- 加载时间：通过网络下载 LCP 资源（图片或字体）所需的时间。这与文件大小和带宽有关。
- 渲染延迟：资源下载完成与绘制到屏幕之间的时间。高渲染延迟通常表明 main thread 被 JavaScript 阻塞。
TTFB 组成部分 (Time to First Byte)
TTFB 是服务器响应能力的指标。此拆解隔离了网络连接的各个阶段：
- 等待：浏览器等待服务器生成响应的时间（后端处理）。
- 缓存：检查本地或中间缓存所花的时间。
- DNS：域名系统查询的持续时间。
- 连接：建立 TCP 连接所需的时间。
- 请求：发送 HTTP 请求头所需的时间。
INP 组成部分 (Interaction to Next Paint)
INP 测量交互性。我们对交互生命周期进行分段，以精准定位 main thread 阻塞：
- 输入延迟：用户交互与事件处理程序执行之间的时间。高输入延迟意味着 main thread 繁忙。
- 处理时间：执行事件回调所需的时间。这代表了你的 JavaScript 逻辑的效率。
- 呈现延迟：浏览器计算布局并绘制下一帧所需的时间。
诊断工作流
遵循此顺序诊断性能衰退：
- 量化瓶颈：查看环形图找出主要的子部分。如果 `TTFB` 高，检查你的服务器。如果 `资源加载延迟` 高，检查你的资源优先级。
- 建立因果关系：查看时间线，将突增与特定部署或内容更新关联起来。
- 隔离上下文：使用数据表查看此模式是存在于所有页面，还是仅限于特定模板。找到模式是部署可扩展修复方案的关键。
优化 Core Web Vitals
使用这些拆解数据将工单路由给正确的工程团队。将 TTFB 问题分配给后端。将加载延迟和渲染延迟分配给前端。将 DNS/连接延迟分配给基础设施团队。这种精简的分流流程减少了调查时间，加速了问题解决。
