Web Vitalsリファレンス
Core Web Vitalsのインタラクティブガイド。スコアチェック、最適化ティップス、診断チェックリスト。
このツールについて
Web Vitalsリファレンスは、GoogleのCore Web Vitalsと補助パフォーマンス メトリクスの包括的なインタラクティブガイドです。3つのCore Web Vitals — Largest Contentful Paint (LCP)、Interaction to Next Paint (INP)、Cumulative Layout Shift (CLS) — および補助メトリクスである First Contentful Paint (FCP)、Time to First Byte (TTFB)、Total Blocking Time (TBT)をカバーしています。
各メトリクスカードには、公式の良好/要改善/不良のスコア閾値が 色分けされて表示されます。内蔵のチェッカーに自分の値を入力すると、 サイトのパフォーマンスが緑、黄色、赤のどのゾーンに当てはまるか を即座に確認できます。ビジュアルゲージは閾値に対する値の位置を 正確に示します。
詳細な最適化ティップス、スコア不良の一般的な原因の診断チェックリスト、 およびページ読み込み中に各メトリクスがいつ発生するかを示す インタラクティブなページ読み込みタイムラインが含まれています。 メトリクス間の関係を理解すること — 例えば、遅いTTFBがLCPに直接 影響すること — は、効果的なパフォーマンス改善の鍵です。
すべての処理はブラウザ内で完全に行われます。パフォーマンスデータが サーバーに送信されることはありません。本番環境のパフォーマンス監査中にも 安全に参照できます。
使い方
- メトリクスカードを閲覧して、各Web Vitalの名前、説明、公式閾値を理解します。
- フィルターボタン(全て / Core Web Vitals / 補助)を使用して、関心のあるメトリクスに絞り込みます。
- 各メトリクスカードの**「値をチェック」**入力フィールドに数値を入力して、良好・要改善・不良のどの範囲に当てはまるか確認します。
- ゲージビジュアライゼーションが更新され、閾値に対する値の位置が表示されます。
- **「詳細&最適化ティップス」**をクリックして、各メトリクスの詳細な説明、改善戦略、診断チェックリストを展開します。
- ページ読み込みタイムラインを確認して、読み込みプロセス中に各メトリクスがいつ発生するかを理解します。
- 検索バーを使用して、名前、説明、カテゴリで特定のメトリクスをすばやく見つけます。
人気のWeb Vitalsトピック
よくある質問
データは安全ですか?
はい。このツールはブラウザ内で完全に実行される静的なリファレンスです。データの収集、送信、保存は一切行われません。本番環境のパフォーマンス監査中にも安全に使用できます。
Core Web Vitalsとは何ですか?
Core Web Vitalsは、Googleが定義した実際のユーザー体験を測定する3つのメトリクスのセットです:LCP(Largest Contentful Paint)は読み込みパフォーマンス、INP(Interaction to Next Paint)はインタラクティビティ、CLS(Cumulative Layout Shift)は視覚的安定性を測定します。これらはGoogle検索のランキングシグナルとして使用されます。
FID(First Input Delay)はどうなりましたか?
FIDは2024年3月にINP(Interaction to Next Paint)にCore Web Vitalとして置き換えられました。FIDは最初のインタラクションの遅延のみを測定していましたが、INPはページライフサイクル全体を通じてすべてのインタラクションのレイテンシを測定し、最も悪いものを報告するため、応答性のより完全な全体像を提供します。
Web Vitalsの値はどこで取得できますか?
実際のユーザー(フィールド)データは、Google Search Console、PageSpeed Insights、またはChrome User Experience Report (CrUX)から取得できます。ラボデータには、Chrome DevToolsのPerformanceパネル、Lighthouse、WebPageTestを使用します。web-vitals JavaScriptライブラリで独自のユーザーからフィールドデータを収集することもできます。
良好なLCPスコアはどのくらいですか?
2.5秒以下のLCPが良好と見なされます。2.5秒から4.0秒は要改善。4.0秒以上は不良です。LCPは、ビューポート内の最大のコンテンツ要素(通常はヒーロー画像や見出し)がレンダリングを完了するときを測定します。
CLSのスコアリングはどのように機能しますか?
CLSは、インパクトフラクション(ビューポートのどの程度がシフトしたか)と距離フラクション(要素がどのくらい移動したか)を掛け合わせて計算される単位なしのスコアです。0.1以下が良好です。セッションウィンドウアプローチを使用し、シフトをウィンドウにグループ化し、最大のウィンドウのスコアが報告されます。
このツールでサイトのパフォーマンスを監視できますか?
このツールはリファレンスと閾値チェッカーであり、監視ツールではありません。継続的な監視には、Google Search Console、PageSpeed Insights、またはリアルユーザーモニタリング(RUM)ソリューションを使用してください。このリファレンスを使用して、メトリクスの意味と改善方法を理解してください。
関連ツール
パフォーマンスバジェット計算機
接続速度、目標読み込み時間、アセットカテゴリに基づいてWebパフォーマンスバジェットを計算・可視化します。
Preload / Prefetchジェネレーター
HTML preload、prefetch、preconnect、dns-prefetchリンクタグをベストプラクティス検証付きで生成します。
Cache-Controlビルダー
Cache-Controlヘッダーをトグルスイッチで視覚的に構築。各ディレクティブの設定、期間プリセット、サーバー設定スニペット付き。
Gzipサイズ計算機
テキスト、コード、ファイルのgzipおよびdeflate圧縮サイズを即座に計算。圧縮率とサイズ比較を表示。
メタタグ生成ツール
HTMLメタタグ、Open Graph、Twitter Cardタグをライブプレビュー付きで生成します。
HTTP/2 vs HTTP/3比較
HTTP/1.1、HTTP/2、HTTP/3プロトコルの機能詳細、パフォーマンス特性、移行ガイドを並べて比較。
ブラウザ機能検出
ブラウザのAPI対応状況を50以上のWebプラットフォーム機能(WebGL、WebGPU、Service Workerなど)で検出・表示。