Orbit
Kapsule Orbit Web Vitals
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 タブは、合成テストではなく、プロジェクトの実際のビジターから収集した Core Web Vitals を報告します。つまり、ユーザーが自分のデバイスと接続環境で実際に体験している内容が表示されます。
Web Vitals の場所
Orbit を開き、プロジェクトをクリックして、プロジェクトタブストリップの Observability グループから Web Vitals を選択します。このページのタイトルは Web Vitals で、見出しの数値について説明しています: p75 は Page Experience に使用されるスコアです。
サイトにコレクタを追加するまで、このページには何も表示されません。下部のセットアップカードから始めてください。
コレクタの追加
セットアップカードには、サイトの <head> に追加する 1 行のスクリプトタグが表示されます:
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
プロジェクトのスラッグが既に入力された正確な行がページに表示されています。入力する代わりに、そこからコピーしてください。
このスクリプトは、ビジターが各ページを離れる際に 5 つのメトリクスを収集し、1 つのバッチで報告します。個人を特定できる情報は取得されず、Cookie も設定されないため、独自の同意要件は追加されません。
最初の実際のページビューから約 30 秒以内にデータが表示されます。その後何も表示されない場合は、スクリプトが読み込まれていません: ライブサイトのブラウザーのネットワークタブを確認してください。
同じコレクタの 2 番目のコピーが Settings の Web Analytics カードの下にあり、パネルドメインから読み込まれて、閉じタグ </body> の前に配置されます。どちらでも機能し、両方とも同じデータを提供します。1 つだけ使用し、両方は使用しないでください。そうしないと、すべてのページビューが 2 回カウントされます。
5 つのメトリクス
| メトリクス | 測定内容 |
|---|---|
| LCP | Largest Contentful Paint: メインコンテンツが表示されるまでの時間 |
| INP | Interaction to Next Paint: ページが入力にどのくらい速く応答するか |
| CLS | Cumulative Layout Shift: 読み込み中にレイアウトがどの程度ジャンプするか |
| FCP | First Contentful Paint: 何かが描画されるまでの時間 |
| TTFB | Time to First Byte: サーバーが応答を開始するまでの時間 |
最初の 3 つは適切な Core Web Vitals です。FCP と TTFB は診断的なもので、LCP が遅い理由がサーバーの遅さなのか、ページの遅さなのかを判断します。
p75 の読み方
このページのすべての数値は平均ではなく、選択されたウィンドウ内のサンプルの p75 です。ビジターの 4 分の 3 は少なくともこの程度の体験を得ました。4 分の 1 はそれより悪い体験をしました。
この選択は重要です。平均値は、良好な接続上の多くの高速訪問に支配されており、テールを隠しています。p75 はそうではありません: p75 LCP が 4 秒の場合、4 人に 1 人のビジターがそれより長く待機しています。
各メトリクスカードには、Good、Needs improvement、または Poor という評価が表示され、それが計算されたサンプル数も表示されます。LCP の場合、ページは直接境界を述べています: good は 2500ms 以下、poor は 4000ms 以上です。
サンプル数が少ないカードはすべて疑わしいものとして扱ってください。1 ダースのサンプルの p75 はノイズです。ページ上部のセレクタでウィンドウを広げるか、より多くのトラフィックが来るまで待ってから、それに基づいて行動してください。
トレンドチャート
トレンドチャートは、選択されたウィンドウ全体で LCP と CLS の日次 p75 をプロットし、good と poor のしきい値をマークします。サブタイトルは何を探しているかを示しています: フラットラインは健全です。
特定の日のステップ変化は有用な信号です。ほぼすべての場合、デプロイと一致するためです。日付を Deployments タブと相互参照するか、プロジェクトタイムラインにイベントをマークして、次回に注釈が付くようにします: Orbit Timeline Annotations を参照してください。
数週間にわたる遅い上向きの漂流は異なる問題で、通常は単一の変更ではなく、蓄積されたページの重さです。
トップ国
Top countries は、エッジヘッダーから派生した国ごとのサンプルボリュームを表示します。これは分析ではなく、コンテキストのためにあります: 全体的に悪く見える p75 は、しばしばメインマーケットでは良好で、より小さく、より遠い視聴者に支配されていることが判明しています。
トラフィックの大部分がオリジンから遠い場合、これはコードをさらに最適化するのではなく、エッジで積極的にキャッシュすることの議論です。
注意が必要なページ
Pages needing attention テーブルは、各メトリクスの good しきい値より p75 がどの程度上にあるかでパスをランク付けし、各行のサンプル数を表示します。
サイト全体を改善しようとするのではなく、このテーブルを下る方向に作業してください。通常、2 つまたは 3 つのテンプレートが問題の大部分を占めており、テンプレートを修正すると、そのテンプレートを使用するすべてのページが修正されます。
確認する価値がある順序での一般的な原因:
- サイズが設定されていないか、プリロードされていないヒーロー画像。 これは圧倒的に最も頻繁な LCP の問題です。
- メインスレッドをブロックするサードパーティスクリプト。 チャットウィジェット、タグマネージャー、分析スタックが通常の容疑者で、INP に最も悪い影響を与えます。
- 寸法のない画像と埋め込み。 これらは読み込みの際にレイアウトをジャンプさせます。これはまさに CLS が測定するものです。
- 遅いオリジン応答。 TTFB が悪い場合、上記のいずれも役に立ちません。修正はフロントエンド作業ではなく、キャッシュまたはより高速な応答です。
このウィンドウにサンプルがない場合
ページにサンプルがないと表示される場合は、次の 3 つのいずれかが真です:
- コレクタが追加されていないか、ユーザーが訪問するページに読み込まれていません。
- 最近追加されたばかりで、まだ誰も訪問していません。
- 選択されたウィンドウが、最後のトラフィック以降のギャップより短いです。
まずウィンドウを広げてください。これは無料です。その後、ソースのみではなく、ライブサイトのサーバーされた HTML に スクリプトが存在することを確認してください。
データが保持される期間
個別のサンプルは、30 日が経過すると夜間ジョブで自動的に削除されます。ウィンドウセレクタを使用すると、保持された履歴全体を見ることができます。それを超えるアーカイブはありません。
長期的な記録が必要な場合は、特定の時点 (例えば、パフォーマンスプロジェクトの前後) で p75 値をスクリーンショットまたはメモして、後で引用できる前後を用意してください。
公開ステータスページ上の Vitals
プロジェクトの公開ステータスページを発行している場合は、同じ Core Web Vitals サマリーをビジターに表示でき、アップタイムと最近のデプロイと一緒に表示できます。Orbit Status Page を参照してください。
次に行くところ
- Orbit Project Analytics: ビルド側の数値と凝縮された Vitals サマリーを取得します。
- Orbit Timeline Annotations: ステップ変化の背後にあるデプロイとインシデントをマークします。
- Website Speed: 一般的なパフォーマンスアドバイスを取得します。