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 资源（图片或字体）所需的时间。这与文件大小和网络带宽相关。
- 渲染延迟：资源下载完成至渲染在屏幕上之间的耗时。高渲染延迟通常表明 JavaScript 阻塞了 main thread。
TTFB 组成部分 (Time to First Byte)
TTFB 可以作为服务器响应速度 of 指标。此拆解隔离了网络连接的各个阶段：
- 等待时间：浏览器等待服务器生成响应的时间（后端处理）。
- 缓存：检查本地或中间缓存所花费的时间。
- DNS：DNS 查询的耗时。
- 连接时间：建立 TCP 连接的耗时。
- 请求时间：发送 HTTP 请求头的耗时。
INP 组成部分 (Interaction to Next Paint)
INP 测量交互性。我们将交互生命周期进行拆解，以精准定位 main thread 阻塞：
- 输入延迟：用户交互与事件处理程序开始执行之间的间隔时间。高输入延迟意味着 main thread 处于繁忙状态。
- 处理时间：执行事件回调的耗时。这代表了你的 JavaScript 逻辑效率。
- 呈现时间：浏览器计算布局并绘制下一帧的耗时。
诊断工作流
按照以下顺序来诊断性能回退：
- 量化瓶颈：观察饼图，找出主要的子部分。如果 `TTFB` 偏高，检查你的服务器。如果 `Resource Load Delay` 偏高，检查你的资源优先级。
- 确立因果关系：检查时间线，将性能飙升与特定的部署或内容更新联系起来。
- 隔离上下文：使用数据表查看此规律是适用于所有页面，还是仅针对特定模板。找出规律是实施可扩展修复方案的关键。
优化 Core Web Vitals
使用这些拆解数据将工单分发给正确的工程团队。将 TTFB 问题分配给后端。将 Load Delay 和 Render Delay 分配给前端。将 DNS/Connection 延迟分配给基础设施。这种精简的排查流程可以缩短排查时间，加速问题解决。
