Core Web Vitals

ページの読み込みに3秒以上かかると、モバイルユーザーの53%が離脱するというデータがあります（出典: Google / SOASTA Research, 2016）。Webパフォーマンスは単なる技術的な課題ではなく、ビジネス成果に直結する要素です。 Webパフォーマンスとは、Webサイトやアプリケーションがユーザーのリクエストに対してどれだけ速く・スムーズに応答できるかを示す総合的な品質指標です。表示速度だけでなく、操作への応答性、レイアウトの安定性、そして「体感的な速さ」も含まれます。 Webパフォーマンスを構成する4つの側面 Webパフォーマンスは大きく分けて4つの側面から評価できます。 読み込み速度（Loading Performance） ブラウザがサーバーからリソースを取得し、画面に描画するまでの時間です。HTML・CSS・JavaScript・画像・フォントなど、必要なリソースをすべてダウンロードして処理する時間が対象となります。 DNS解決、TCP接続、TLSハンドシェイク、サーバー応答、リソース転送という一連のネットワーク処理が順番に実行されるため、各段階での遅延が累積します。 操作応答性（Interactivity） ユーザーがボタンをクリックしたりフォームに入力したりした際に、どれだけ速くUIが反応するかを示します。JavaScriptの実行がメインスレッドをブロックしていると、操作に対する応答が遅れ、サイトが「固まった」ように感じられます。 表示の安定性（Visual Stability） ページのコンテンツが読み込み中に予期せず移動しないかどうかです。広告や画像の遅延読み込みによってテキストが突然ずれると、誤タップや読んでいた箇所を見失う原因になります。 知覚的パフォーマンス（Perceived Performance） 実際の速度とは別に、ユーザーが「速い」と感じるかどうかです。プログレスバーやスケルトンスクリーン（コンテンツ領域の仮表示）を使うことで、同じ読み込み時間でも体感速度を向上させることができます。 Core Web Vitals ― Googleが定めた3つの品質指標 GoogleはWebパフォーマンスの評価基準としてCore Web Vitalsを定義しており、検索ランキングのシグナルとしても使用しています。2024年3月12日にFID（First Input Delay）がINP（Interaction to Next Paint）に正式に置き換えられ、現在の3指標は以下のとおりです。 指標 測定対象 良好 改善が必要 不良 LCP（Largest Contentful Paint） 最大コンテンツの描画時間 2.5秒以内 2.5〜4.0秒 4.0秒超 INP（Interaction to Next Paint） 操作から画面更新までの遅延 200ms以内 200〜500ms 500ms超 CLS（Cumulative Layout Shift） レイアウトのずれの累積量 0.1以下 0.1〜0.25 0.25超 LCP ― ページの「見た目の速さ」を測る LCPは、ビューポート内に表示される最も大きなコンテンツ要素（ヒーロー画像、見出しテキスト、動画のサムネイルなど）が描画完了するまでの時間です。ユーザーが「ページが表示された」と感じるタイミングに近い指標であり、2.5秒以内が推奨されています。 LCPの遅延原因として多いのは、サーバー応答時間（TTFB）の長さ、レンダリングブロックするCSS/JS、大容量画像の最適化不足、クライアントサイドレンダリングによる描画遅延の4つです。 INP ― すべての操作の応答性を評価する INPは、ページ上で行われたすべてのインタラクション（クリック・タップ・キー入力）のうち、応答が最も遅かったもの（正確にはP98 = 98パーセンタイル）の遅延時間を測定します。 ...