Core Web Vitalsの最適化：ページ速度SEOのステップバイステップガイド

まとめ

Core Web VitalsはGoogleのユーザーエクスペリエンス指標であり、検索ランキングに直接影響を与えます。多くのサイト運営者は、LCP、INP、CLSのスコアが低く、SEOに悪影響を及ぼしています。この記事では、画像圧縮からコード分割まで、各指標を最適化するための具体的なステップバイステップの計画を提供します。現在のパフォーマンスを測定し、修正の優先順位を付け、過剰最適化などのよくある間違いを避ける方法を学びます。実際の例で改善の前後を示します。これらの手順に従って、Core Web Vitalsを向上させ、検索結果で上位を目指しましょう。

Core Web Vitalsの問題点

GoogleのCore Web Vitalsは直接的なランキング要素となり、遅いまたはぎこちないウェブサイトは検索結果で埋もれてしまいます。しかし、多くのサイト運営者は、スコアが低いにもかかわらず、体系的に修正する方法がわからずに困っています。このガイドでは、Largest Contentful Paint（LCP）、Interaction to Next Paint（INP）、Cumulative Layout Shift（CLS）を最適化するための再現可能なプロセスを説明します。最後には、サイトのパフォーマンスとSEOを改善するための明確な行動計画が得られます。

3つの指標の理解

修正に入る前に、各指標が何を測定し、なぜ重要なのかを理解することが重要です。

• LCP（Largest Contentful Paint） – 読み込みパフォーマンスを測定します。理想的には2.5秒未満。ページの主要なコンテンツが表示されるまでの時間を表します。
• INP（Interaction to Next Paint） – 応答性を測定します。理想的には200ミリ秒未満。ユーザーの操作（クリック、タップ）から視覚的な応答までの遅延を捉えます。
• CLS（Cumulative Layout Shift） – 視覚的な安定性を測定します。理想的には0.1未満。表示されるコンテンツが予期せずどれだけ移動するかを定量化します。

Googleはこれらをランキングシグナルとして使用しますが、ユーザーエンゲージメントにも直接影響します。速く読み込まれ、即座に応答し、画面が飛び跳ねないサイトは、訪問者を満足させ、コンバージョンにつながります。

最適化の前に測定する

測定しなければ修正できません。複数のソースからベースラインデータを収集することから始めましょう。

1. PageSpeed Insights – 任意のURLのラボデータとフィールドデータを提供します。最も重要なページで実行してください。
2. Chrome User Experience Report (CrUX) – PageSpeed InsightsまたはBigQueryを介して集約された実際のユーザーデータ。
3. Chrome DevToolsのLighthouse – 実用的な推奨事項とスコアを提供します。
4. Web Vitals拡張機能 – あなたのサイトを閲覧中にリアルタイムの指標を確認できます。

ラボデータだけでなく、フィールドデータ（実際のユーザー）に焦点を当ててください。目標は実際のユーザー体験を修正することです。指標の値を記録し、ページの中で最も悪いものを見極めます。

ステップ1：LCPの最適化 – ヒーロー画像とサーバーTTFB

最も一般的なLCP要素はヒーロー画像または大きなテキストブロックです。LCPを縮小する方法は次のとおりです。

a. 画像の圧縮と最新形式の使用

• WebPやAVIFなどの最新形式を使用する – JPEG/PNGよりも25～50%ファイルサイズが小さくなります。
• 画像を最大表示サイズにリサイズします。1200pxのコンテナに4000pxの画像を提供しないでください。
• CDN（例：Cloudflare、Imgix）で自動画像最適化を使用し、適切なサイズのバージョンを提供します。

例： ヒーロー画像が500KBのJPEGから50KBのWebPに、品質の低下なく変わり、LCPが4.2秒から2.1秒に改善されました。

b. サーバーの応答時間（TTFB）の改善

• 高速なホスティングプロバイダーと優れたキャッシュ（例：Vercel、Netlify、またはCDNバックエンドのホスト）を使用します。
• 動的ページにサーバーサイドキャッシュを実装します。
• 軽量なCMSや静的サイトジェネレーターを検討し、サーバー処理を最小限に抑えます。

c. 重要なリソースの優先読み込み

• <link rel="preload">でヒーロー画像を早期に取得します。
• レンダリングブロックを避けるために、ファーストビューコンテンツの重要なCSSをインライン化します。

ステップ2：INPの最適化 – 重いJavaScriptを制御する

INPは、メインスレッドをブロックする長いJavaScriptタスクによって悪化することが多いです。改善するには：

a. コード分割と遅延読み込み

• JavaScriptバンドルを分割し、最初に必要なコードのみを読み込みます。ルート/コンポーネントにはimport()を使用します。
• 重要でないスクリプトはdeferまたはasyncで遅延させます。

b. 長時間タスクの分割

• requestIdleCallback()やsetTimeout()を使用して、作業を小さな断片に分割します。
• 可能であれば、負荷の高い計算をWeb Workerに移します。

c. イベントハンドラの最適化

• スクロールやリサイズのハンドラをデバウンスまたはスロットルします。
• 複雑なインラインイベントリスナーを避けます。適切な場合はイベント委任を使用します。

例： 重い分析スクリプトが早期に読み込まれたサイトでは、INPが350msに増加しました。requestIdleCallbackを使用してスクリプトを読み込み後に移動したところ、INPが180msに改善されました。

ステップ3：CLSの最適化 – レイアウトシフトを防ぐ

CLSは、多くの場合、寸法の欠落や遅延読み込みコンテンツが原因であるため、最も修正が簡単です。

a. 明示的な寸法の設定

• 画像や動画には常にwidthとheight属性を追加します。最新のCSSではaspect-ratioでレスポンシブサイジングに対応できます。
• 動的広告には、固定高さのコンテナを確保するか（または典型的な広告の変動を考慮したプレースホルダーを使用）、事前にスペースを予約します。

b. Webフォントの制御

• font-display: swapを使用して、カスタムフォントが読み込まれている間、テキストをすぐにフォールバックフォントで表示します。
• 重要でないフォントにはfont-display: optionalを優先します。

c. 既存コンテンツの上への動的挿入を避ける

• サードパーティの埋め込み（広告、ウィジェット）は、周囲のレイアウトが安定した後にのみ挿入するか、事前にスペースを確保します。

例： ヒーロー画像に明示的なwidthとheightを追加し（誤って計算されたインライン寸法を削除）、CLSが0.32から0.05に大幅に改善されました。

修正の優先順位付け

すべての修正が努力と影響のバランスで等しいわけではありません。次の優先順位リストを使用してください。

1. 最初にCLS – 最も簡単で迅速に修正できることが多い。寸法を1つ変更するだけで0.1未満にできることも。
2. 次にLCP – 画像圧縮とキャッシュで素早い成果が得られます。
3. 最後にINP – 通常、コード分割などのアーキテクチャ変更が必要です。

各修正後にPageSpeed Insightsを実行して進捗を測定します。LCPが改善してもINPが悪化した場合、変更によってJavaScriptが増加した可能性があります。必ずモバイルでテストしてください – ユーザーがパフォーマンスの悪さを最も感じる環境です。

避けるべきよくある落とし穴

• 過剰最適化： すべてのアニメーションを削除したり、不必要にフレームワークを捨てたりしないでください。完璧ではなく良好を目指しましょう。
• モバイル体験の無視： 最初に最小の画面に最適化します。
• サードパーティスクリプトの無視： 遅い広告サーバーはメトリクスを悪化させる可能性があります。遅延読み込みと非同期読み込みを使用します。
• ラボデータのみに注目： フィールドデータ（CrUX）こそGoogleが使用するものです。フィールドデータが悪い場合、ラボデータは実際の状況を反映していない可能性があります。

結論

Core Web Vitalsの最適化は1回限りのタスクではなく、継続的な改善サイクルです。ここで説明した手順（測定、CLSへの取り組み、LCPアセットの圧縮、コード分割によるINPの制御）に従うことで、スコアとSEOを体系的に改善できます。今日から1つの重要なページを監査し、3つの簡単な勝利（画像寸法の設定、ヒーロー画像の圧縮、重要でないJavaScriptの遅延）を適用してください。あなたのユーザー（と検索ランキング）が感謝するでしょう。

パフォーマンスのベースラインができたら、新しいページを最初からパフォーマンスを組み込んで作成することも検討できます。Pagenzaのようなツールを使用すると、プレーンテキストの説明から完全なランディングページを作成し、手動最適化なしでクリーンで高速なHTMLを生成できます。これにより、次のページが最初からCore Web Vitalsのしきい値を満たすことが保証されます。