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に直接 影響すること — は、効果的なパフォーマンス改善の鍵です。

すべての処理はブラウザ内で完全に行われます。パフォーマンスデータが サーバーに送信されることはありません。本番環境のパフォーマンス監査中にも 安全に参照できます。

使い方

  1. メトリクスカードを閲覧して、各Web Vitalの名前、説明、公式閾値を理解します。
  2. フィルターボタン(全て / Core Web Vitals / 補助)を使用して、関心のあるメトリクスに絞り込みます。
  3. 各メトリクスカードの**「値をチェック」**入力フィールドに数値を入力して、良好・要改善・不良のどの範囲に当てはまるか確認します。
  4. ゲージビジュアライゼーションが更新され、閾値に対する値の位置が表示されます。
  5. **「詳細&最適化ティップス」**をクリックして、各メトリクスの詳細な説明、改善戦略、診断チェックリストを展開します。
  6. ページ読み込みタイムラインを確認して、読み込みプロセス中に各メトリクスがいつ発生するかを理解します。
  7. 検索バーを使用して、名前、説明、カテゴリで特定のメトリクスをすばやく見つけます。

人気の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)ソリューションを使用してください。このリファレンスを使用して、メトリクスの意味と改善方法を理解してください。

関連ツール