Orbit
Kapsule Orbit 网页关键指标
The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…
Orbit Web Vitals
Web Vitals 选项卡报告从您项目的真实访问者收集的核心 Web Vitals，而不是从综合测试中收集，所以您看到的是人们在自己的设备和连接上实际体验到的内容。
Web Vitals 位置
打开 Orbit，点击项目，然后在项目选项卡条中的 Observability 组下选择 Web Vitals。该页面标题为 Web Vitals，并解释其自身的头号数字：p75 是用于页面体验的分数。
在您将收集器添加到网站之前，该页面无法显示任何内容，因此请从底部的设置卡片开始。
添加收集器
设置卡片为您提供了一行脚本标签，以添加到您网站的 <head>：
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
包含您项目的 slug 的确切行在页面上。从那里复制它，而不是手动输入。
该脚本在访问者离开每个页面时收集五个指标，并在单个批次中报告它们。不捕获任何个人可识别信息，也不设置 cookie，因此它本身不会增加同意要求。
数据会在第一次真实页面浏览后的约 30 秒内开始显示。如果之后没有显示任何内容，说明脚本未加载：检查您在实时网站上的浏览器网络选项卡。
在 Settings 下的 Web Analytics 卡片中提供了相同收集器的第二份副本，它从面板域加载，放在关闭 </body> 标签之前。两者都可以使用，都提供相同的数据。使用其中一个，而不是两个，否则每个页面浏览都会被计数两次。
五个指标
| 指标 | 测量内容 |
|---|---|
| LCP | 最大内容绘制：主要内容可见需要多长时间 |
| INP | 交互到下一次绘制：页面响应输入的速度有多快 |
| CLS | 累积布局偏移：加载时布局跳动多少 |
| FCP | 首次内容绘制：绘制任何内容需要多长时间 |
| TTFB | 首字节时间：服务器开始响应需要多长时间 |
前三个是真正的核心 Web Vitals。FCP 和 TTFB 是诊断性的：它们告诉您不良的 LCP 是由于服务器速度慢还是页面速度慢。
理解 p75
此页面上的每个数字都是所选窗口中样本的 p75，而不是平均值。四分之三的访问者的体验至少这么好；四分之一的体验更差。
这个选择很重要。平均值由许多良好连接上的快速访问主导，隐藏了尾部。p75 不会：如果您的 p75 LCP 是 4 秒，四分之一的访问者等待时间会更长。
每个指标卡都带有 Good、Needs improvement 或 Poor 的评级，加上计算所依据的样本计数。对于 LCP，页面直接说明了边界：good 是 2500ms 或更少，poor 是超过 4000ms。
对任何样本计数较小的卡片持怀疑态度。十几个样本上的 p75 是噪声。在采取行动之前，用页面顶部的选择器扩大窗口，或等待更多流量。
趋势图
趋势图绘制所选窗口中 LCP 和 CLS 的每日 p75，标记了 good 和 poor 阈值。副标题告诉您要查找的内容：平坦的线条表示健康。
特定日期上的阶跃变化是有用的信号，因为它几乎总是与部署相符。将日期与 Deployments 选项卡交叉参考，或在项目时间线上标记事件，以便下次进行注释：请参阅 Orbit Timeline Annotations。
几周内缓慢的上升漂移是一个不同的问题，通常是累积的页面权重，而不是单一的变化。
排名靠前的国家
Top countries 按国家显示样本量，来自于边缘头。它是出于上下文考虑，而不是用于分析：看起来整体较差的 p75 通常对您的主要市场来说很好，但被来自较远的较小受众主导。
如果您的大部分流量远离您的源，那就是在边缘更积极地进行缓存，而不是进一步优化代码的理由。
需要关注的页面
Pages needing attention 表按其 p75 超过每个指标的 good 阈值的程度对路径进行排名，每行显示样本计数。
逐行处理此表，而不是尝试改进整个网站。通常只有两三个模板占了大部分问题，修复一个模板可以修复使用它的所有页面。
常见原因，按值得检查的顺序：
- 未调整大小或预加载的英雄图像。 这是迄今为止最频繁的 LCP 问题。
- 阻止主线程的第三方脚本。 聊天小部件、标签管理器和分析堆栈是常见的罪魁祸首，它们最伤害 INP。
- 没有尺寸的图像和嵌入。 这些在加载时会导致布局跳动，这正是 CLS 测量的内容。
- 源响应缓慢。 如果 TTFB 较差，上述任何方法都无法拯救您；修复是缓存或更快的响应，而不是前端工作。
此窗口中没有样本
如果页面说没有样本，以下三种情况之一为真：
- 收集器未被添加，或未在人们访问的页面上加载。
- 它最近被添加，还没有人访问过。
- 所选窗口短于自上次流量以来的间隔。
首先扩大窗口，因为这是免费的，然后检查脚本是否存在于实时网站的提供的 HTML 中，而不仅仅是在您的源代码中。
数据保留时间
个别样本在 30 天后会自动修剪，由一个每晚的任务进行。窗口选择器让您可以查看整个保留历史记录；其范围之外没有存档。
如果您需要长期记录，请在特定时间点（例如在性能项目之前和之后）截图或记下 p75 值，以便您有可以稍后引用的前后对比。
公开状态页面上的 Vitals
如果您为该项目发布状态页面，它可以向您的访问者显示相同的核心 Web Vitals 摘要，以及正常运行时间和最近的部署。请参阅 Orbit Status Page。
后续步骤
- Orbit Project Analytics 获取构建端的数字和简化的 vitals 摘要。
- Orbit Timeline Annotations 标记阶跃变化背后的部署和事件。
- Website Speed 获取一般性能建议。