Core/Dash 深入理解指标细分仪表板

深入理解指标细分仪表板

像 LCP 和 INP 这样的复合指标聚合了多个不同的计时事件。优化总分需要隔离这些底层组件。指标细分仪表板将性能剖析为细粒度阶段，以识别特定瓶颈。

该工具用精确的工程目标取代了粗放式优化。它将延迟归因于服务器、网络或客户端执行。

细分仪表板剖析

该仪表板提供三个同步视图来隔离延迟的根本原因：

• 贡献环形图：可视化每个子部分的相对权重。它回答了“最大因素是什么？”这个问题。如果 `Time to First Byte` 占据图表的 70%，你就知道问题与后端有关。
• 历史时间轴：随时间推移展示每个组件绝对值的趋势。利用它将性能变化与特定事件（如部署）相关联。
• 分段数据表：按维度（URL、设备等）细分指标。每行包含一个分布条，揭示该细分市场的独特概况，帮助你发现异常值。

LCP 组件 (Largest Contentful Paint)

LCP 衡量加载性能。我们将此指标分为四个阶段：

• TTFB (Time to First Byte)：服务器响应时间。高 TTFB 表明数据库查询缓慢或缺乏边缘缓存。
• 加载延迟 (Load Delay)：初始 HTML 响应与 LCP 资源下载开始之间的间隔。这衡量资源发现延迟。
• 加载时间 (Load Time)：通过网络下载 LCP 资源（图像或字体）所需的持续时间。这与文件大小和带宽相关。
• 渲染延迟 (Render Delay)：资源完成下载到绘制到屏幕之间的时间。高渲染延迟通常表明主线程被 JavaScript 阻塞。

TTFB 组件 (Time to First Byte)

TTFB 作为服务器响应能力的代理。此细分隔离了网络连接阶段：

• 等待 (Waiting)：浏览器等待服务器生成响应的时间（后端处理）。
• 缓存 (Cache)：检查本地或中间缓存所花费的时间。
• DNS：域名系统查找的持续时间。
• 连接 (Connection)：建立 TCP 连接所需的时间。
• 请求 (Request)：发送 HTTP 请求标头所需的时间。

INP 组件 (Interaction to Next Paint)

INP 衡量交互性。我们细分交互生命周期以查明主线程阻塞：

• 输入延迟 (Input Delay)：用户交互与事件处理程序执行之间的时间。高输入延迟意味着主线程繁忙。
• 处理 (Processing)：执行事件回调所需的时间。这代表了你的 JavaScript 逻辑的效率。
• 呈现 (Presentation)：浏览器计算布局并绘制下一帧所需的时间。

诊断工作流

遵循此顺序来诊断回归：

• 量化瓶颈：查看环形图以找到主要子部分。如果 `TTFB` 很高，检查你的服务器。如果资源加载延迟很高，检查你的资源优先级。
• 建立因果关系：检查时间轴，将峰值与特定部署或内容更新相关联。
• 隔离上下文：使用数据表查看此模式是否适用于所有页面，或者是否特定于某个模板。找到模式是部署可扩展修复的关键。

优化 Core Web Vitals

使用这些细分将工单路由到正确的工程团队。将 TTFB 问题分配给后端。将加载延迟和渲染延迟分配给前端。将 DNS/连接延迟分配给基础设施。这种简化的分类流程减少了调查时间并加速了解决。