過去において、「スピード」は曖昧な概念でした。サイトは速く読み込まれましたか？今日、Googleはユーザーにとって「速い」「スムーズ」と感じることが具体的にどういうことかを定量化しました。これらの指標はコアウェブバイタル（Core Web Vitals - CWV）と呼ばれます。
ランキングシグナルになって以来、CWVは焦点を単純なサーバー速度から知覚されるユーザーエクスペリエンスへと移行させました。コードがどれだけ速く読み込まれるかだけでなく、ユーザーが実際にどれだけ早くページを使用できるかが重要です。
3つの特定の指標がコアウェブバイタルを構成しています。評価に合格するには、ページは3つすべてで「良好」のスコアを獲得する必要があります。
1. LCP (Largest Contentful Paint) – 読み込みパフォーマンス
「主要なコンテンツはどれくらい速く表示されますか？」
LCPは、最大の視認可能な要素（通常はヒーロー画像、ビデオ、またはメインの見出し）が完全に読み込まれて画面に表示されるまでの時間を測定します。これはユーザーに「このページは実際に機能しています」と伝えます。
しきい値
- 良好： ≤ 2.5秒
- 要改善： ≤ 4.0秒
- 不良： > 4.0秒
LCP不良の一般的な原因
- 遅いサーバー応答時間： ホスティングが安価であったり過負荷であったりすると、ブラウザはデータを受信するのに時間がかかりすぎます。
- リソース読み込みの遅延： ヒーロー画像が最適化されていないか、遅延読み込み（lazy-loading）を介して読み込まれています（トップ画像には避けるべきです）。
- レンダリングをブロックするJavaScript： ブラウザはスクリプトファイルを読むためにページの構築を一時停止します。
改善方法
- 画像を最適化する： 画像を圧縮（WebP形式）し、ヒーロー画像が遅延読み込みされないようにします。
- CDNを使用する： コンテンツ配信ネットワーク（CDN）は、物理的にユーザーに近いサーバーから画像を提供します。
2. INP (Interaction to Next Paint) – インタラクティビティ
「クリックしたときにページがフリーズしますか？」
注：INPは2024年3月に、コア指標としてFirst Input Delay (FID)に正式に取って代わりました。
INPは、ユーザーがページを訪問している間に行うすべてのインタラクション（クリック、タップ、キー押下）のレイテンシを観察します。ユーザーのアクションと、ブラウザが結果を示す次のフレームを描画できる能力（例：メニューを開く、アコーディオンを展開する）との間の時間を測定します。
しきい値
- 良好： ≤ 200ミリ秒
- 要改善： ≤ 500ミリ秒
- 不良： > 500ミリ秒
INP不良の一般的な原因
- 重いJavaScriptの実行： ブラウザの「メインスレッド」がコードの処理に忙しすぎて、ユーザーのクリックに応答できません。
- 複雑なレイアウト： インタラクション後にブラウザがページを再描画するのに時間がかかりすぎます。
改善方法
- 長いタスクを分割する： 開発者は、ブラウザが処理できるように、大きなJavaScriptの塊を小さな断片に分割できます。
- イベントハンドラを最適化する： クリックによってトリガーされるコードが軽量で高速であることを確認します。
3. CLS (Cumulative Layout Shift) – 視覚的な安定性
「コンテンツが予期せず飛び跳ねますか？」
私たちは皆これを経験したことがあります。ボタンをクリックしようとした瞬間に、突然広告がその上に読み込まれ、コンテンツが下に押しやられ、誤って間違ったものをクリックしてしまうことです。これがレイアウトシフトです。CLSは、ページの寿命の間に発生するすべての予期しないレイアウトシフトの合計を測定します。
しきい値
- 良好： ≤ 0.1
- 要改善： ≤ 0.25
- 不良： > 0.25
CLS不良の一般的な原因
- 寸法のない画像： ブラウザにwidth="800"とheight="600"を伝えないと、どれだけのスペースを確保すべきかわかりません。
- 広告と埋め込み： 動的にサイズが変更される広告バナーは、しばしばコンテンツを下に押しやります。
- Webフォント： カスタムフォントがダウンロードされる（FOIT）かスタイルが切り替わる（FOUT）までテキストが隠されていることがあり、行の高さが変わることがあります。
改善方法
- 寸法を設定する： 画像要素とビデオ要素には常に幅と高さの属性を含めてください。
- スペースを確保する： 動的な広告スロットがある場合は、広告が読み込まれたときにコンテンツが動かないように、CSSで特定のボックスサイズを確保してください。
要約表：一目でわかる指標
| 指標 | 焦点 | 「良好」の目標 | ユーザーの感覚 |
|---|---|---|---|
| LCP | 読み込み | 2.5秒未満 | 「ここにある。」 |
| INP | 応答性 | 200ミリ秒未満 | 「動いている。」 |
| CLS | 安定性 | 0.1未満 | 「安定している。」 |
スコアの測定方法
推測する必要はありません。Googleは、これらの基準に対してサイトをテストするための無料ツールを提供しています。
- PageSpeed Insights： 素早いスナップショットのための頼りになるツールです。「ラボデータ」（シミュレーション）と「フィールドデータ」（実際のユーザーデータ）の両方を提供します。
- Google Search Console： 「ウェブに関する主な指標」レポートは、サイトのどのURLが不合格であるかを表示し、問題の種類ごとにグループ化します。
- Lighthouse： ローカルテスト用にChromeブラウザに組み込まれた開発者ツールです（右クリック > 検証 > Lighthouse）。