Googleが重視する「Core Web Vitals（表示速度）」の改善方法｜PageSpeed Insightsで点数を上げる技術的施策

Googleは以下の3つの指標について、それぞれ「良好」「改善が必要」「不良」の3段階で評価します。

※2024年3月よりFIDに代わりINPが導入されました。
Google検索セントラル：Core Web Vitals

LCP（Largest Contentful Paint）

ページ内で最も大きな要素（メインビジュアルの画像や見出しテキストなど）が表示されるまでの時間を指します。
ユーザーが「ページが表示された」と実感するタイミングに近いため、第一印象を左右する最も重要な指標です。

INP（Interaction to Next Paint）

ユーザーがボタンをクリックしたりメニューをタップしたりしてから、実際に画面が変化するまでの「反応の遅れ」を評価します。
従来のFIDが「最初の1回」しか計測しなかったのに対し、INPはページ滞在中のすべての操作を評価対象とするため、より厳しい（しかし実用的な）指標となっています。

CLS（Cumulative Layout Shift）

読み込み中に画像が遅れて表示され、テキストがガクッと下にずれる…といった「レイアウトシフト」の発生頻度をスコア化したものです。
誤クリック（ミスタップ）の原因になるため、低いスコア（ズレが少ない状態）を目指す必要があります。

多くのサイトにおいて、LCP悪化の最大の原因は「画像」です。以下の対策を行うだけで、スコアが劇的に改善することがあります。

次世代フォーマット（WebP）への変換

従来のJPEGやPNGに比べ、WebP（ウェッピー）やAVIFといった次世代フォーマットは、画質を保ったままファイルサイズを30%〜50%程度軽量化できます。
WordPressなどのCMSを使用している場合は、自動変換プラグインを導入するか、画像圧縮ツールを活用してWebP化を進めましょう。

適切なサイズでの書き出し

スマホでしか表示しない場所に、横幅4000pxのPC用画像を読み込ませていませんか？
表示領域に対して過剰に大きな画像は、無駄な通信と処理時間を発生させます。レスポンシブ対応として、デバイス幅に応じた適切な画像サイズ（srcset属性の活用など）を指定することが重要です。

画像の読み込みを後回しにする「Lazy Load（遅延読み込み）」は有効な手段ですが、使い方を間違えると逆効果になります。

• ファーストビュー（LCP要素）：遅延させてはいけない
  一番最初に見えるメイン画像に loading="lazy" をつけると、表示開始が遅れLCPが悪化します。逆に fetchpriority="high" を設定し、最優先で読み込ませるのが正解です。
• ファーストビュー以下：遅延させる
  スクロールしないと見えない画像には、積極的に loading="lazy" を付与し、初期読み込みの負荷を下げましょう。

ブラウザのメインスレッドを50ミリ秒以上占有する処理は「ロングタスク」と呼ばれ、これが発生している間、画面はフリーズしたような状態になります。

不要なJSの削除と遅延実行

使用していないプラグインのスクリプトや、ページ読み込み時に不要な外部ツール（重いチャットボットやSNSウィジェットなど）が、初期表示を妨げていないか確認してください。
これらは defer 属性や async 属性を使って非同期で読み込むか、ユーザーが操作するまで読み込みを待機させる実装が有効です。

画像タグ（img）には、必ず横幅（width）と高さ（height）を指定しましょう。

サイズが指定されていないと、ブラウザは画像を読み込み終わるまで「その画像がどれくらいのスペースを使うか」が分からず、読み込み完了後に無理やりスペースを確保しようとします。これがレイアウトズレの原因です。
サイズを指定しておけば、画像が表示される前から「予約席」としてスペースが確保されるため、ズレが発生しません。

Google FontsなどのWebフォントを使用している場合、フォントデータの読み込みが完了するまでテキストが表示されなかったり、代替フォントから切り替わる瞬間に文字幅が変わってガタついたりすることがあります。

CSSで font-display: swap; を指定することで、読み込み中はシステムフォントを即座に表示させ、レイアウトへの影響と「文字が見えない時間」を最小限に抑えることができます。