Core Web Vitalsが直接的なランキング要因である理由

2021年、GoogleはPage Experience Updateの一環として、Core Web Vitalsをランキングアルゴリズムに正式に組み込みました。多くのSEO要因とは異なり、Core Web Vitalsは正確に測定できます。Googleは「Good」「Needs Improvement」「Poor」のパフォーマンスを分ける明確なしきい値を提供しています。

現在の3つのCore Web Vitalsは次のとおりです。

1. 1LCP (Largest Contentful Paint): 読み込みパフォーマンス
2. 2CLS (Cumulative Layout Shift): 視覚的な安定性
3. 3INP (Interaction to Next Paint): 応答性（2024年3月にFIDを置き換え）

LCP (Largest Contentful Paint): 読み込みパフォーマンス

測定するもの: ページの読み込み開始から、表示領域内で最大の要素（通常はヒーロー画像またはメイン見出し）が完全に描画されるまでの時間。

主なLCP改善手法:

1. LCP要素を最適化する

LCP要素は通常、ヒーロー画像または

見出しです。Chrome DevTools → Performanceタブ → LCPマーカーで自分のページのLCP要素を特定します。

2. LCP画像をプリロードする

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

fetchpriority="high"を追加すると、他のリソースより先にこの画像をダウンロードするようブラウザに伝えられます。

3. 画像をWebPまたはAVIFに変換する

450 KBのJPEGヒーロー画像をWebPに変換すると約290 KBになり、描画時間に比例してLCPを短縮できます。

4. CDNを使用する

Cloudflare、Fastly、または同様のCDNは、ユーザーの地理的位置に近いエッジノードからアセットを配信します。韓国ユーザー向けの韓国サイトでは、韓国のエッジノードを使うことで、オリジンサーバーと比べてレイテンシを50～80ms削減できます。

5. レンダリングをブロックするリソースを排除する

内のCSSとJavaScriptは、読み込みが完了するまでレンダリングをブロックします。重要でないJSは遅延読み込みし、重要なCSSはインライン化します。

CLS (Cumulative Layout Shift): 視覚的な安定性

測定するもの: ページのライフサイクル中に発生する、予期しない視覚的なレイアウト移動の合計。初期描画後に要素が移動する場合（例: 広告が読み込まれてコンテンツを下に押し下げる）、それがレイアウトシフトです。

主なCLS改善手法:

1. 画像サイズを必ず指定する

<img src="photo.jpg" alt="Photo">


<img src="photo.jpg" alt="Photo" width="800" height="600">

Next.jsでは、widthとheight props（またはfill）を指定したがCLSを自動的に防ぎます。

2. 広告ユニット用のスペースを確保する

AdSense広告は非同期で読み込まれます。スペースを確保していないと、読み込まれたときにコンテンツを下へ押し下げます。各広告枠の周囲に最小高さを持つラッパーを追加します。

.ad-container { min-height: 250px; }

3. 遅れて読み込まれるフォントの切り替えを避ける

初期描画後に読み込まれるWebフォントは、フォント変更時にテキストの「ジャンプ」を引き起こします。font-display: optionalを使うか、重要なフォントをプリロードします。

<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>

INP (Interaction to Next Paint): 応答性

測定するもの: ユーザー操作（クリック、タップ、キー入力）から、ブラウザが視覚的に応答するまでの遅延。2024年3月にFIDを置き換えました。

主なINP改善手法:

1. 長いJavaScriptタスクを分割する

メインスレッド上で50msを超えて実行されるタスクは、ユーザー操作への応答をブロックします。scheduler.yield()またはsetTimeoutを使って、大きなタスクを小さなチャンクに分割します。

2. サードパーティスクリプトの影響を減らす

Analytics、広告スクリプト、チャットウィジェットは、多くの場合メインスレッド上で実行されます。Chrome DevTools → Performance → Bottom-Upタブでサードパーティスクリプトを監査します。不要なスクリプトは削除し、それ以外はdeferまたはasyncで読み込みます。

3. React/Next.jsコンポーネントの更新を最適化する

Reactアプリケーションでは、コストの高い再レンダリングがメインスレッドをブロックします。React.memo、useMemo、useCallbackを使って、操作時の不要な再レンダリングを防ぎます。

Core Web Vitalsを測定する

フィールドデータ（実ユーザーデータ）:

• Google Search Console → Core Web Vitals report
• PageSpeed Insights → Field Data section

ラボデータ（シミュレーション）:

• PageSpeed Insights → Lab Data section
• Chrome DevTools → Lighthouse audit
• WebPageTest.org

重要な違い: Googleはラボデータではなく、フィールドデータ（実ユーザー）に基づいてランキングを決定します。ラボスコアは方向性を示す参考になりますが、ランキングシグナルと完全に一致するとは限りません。

まとめ

Core Web Vitalsの改善は、SEO施策の中でも成果を直接測定できる数少ない取り組みのひとつです。まずGoogle Search Consoleで、最も大きな指標上の問題を特定することから始めましょう。多くのサイトでは、LCPが最も影響の大きい改善対象です。ヒーロー画像を最適化するだけで、スコアが「Needs Improvement」から「Good」へ改善することもよくあります。次にCLSを修正し（通常は画像サイズまたは広告配置の問題）、その後JavaScript実行を監査してINPに対処します。