Core/Dash 了解指标细分仪表板

了解指标细分仪表板

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

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

细分仪表板剖析

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

• 贡献圆环图 (Contribution Donut)：可视化每个子部分的相对权重。它回答了“最大因素是什么？”这个问题。如果 `Time to First Byte` 占据了图表的 70%，您就知道问题与后端相关。
• 历史时间线 (Historical Timeline)：跟踪每个组件绝对值随时间的趋势。使用它将性能变化与特定事件（如部署）相关联。
• 分段数据表 (Segmented Data Table)：按维度（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` 很高，请检查您的服务器。如果 `Resource Load Delay` 很高，请检查您的资产优先级。
• 建立因果关系：检查时间线，将峰值与特定的部署或内容更新相关联。
• 隔离上下文：使用数据表查看此模式是否适用于所有页面，或者是否特定于某个模板。找到模式是部署可扩展修复的关键。

优化 Core Web Vitals

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