Core Web Vitalsスコアを伸ばす！LCP・INP・CLS対策でWebサイトを劇的に改善

自分のWebサイトが「なぜか遅い」「ユーザーからの評判が悪い」と感じていませんか？表示速度や操作性は、ユーザーの満足度に直結するだけでなく、検索順位にも影響を与える重要な要素です。しかし、どこから手をつければ良いかわからない、という方も多いでしょう。その解決の鍵を握るのが、Googleが提唱する Core Web Vitals という指標です。この記事では、Webサイトのパフォーマンスを劇的に改善するために不可欠なCore Web Vitalsの基本から、具体的な改善手法、そして効果的な測定方法までを、手を動かしながら学べるように実践的に解説します。

Core Web Vitalsとは何か？Webサイトの健全性を示す3つの主要指標

Core Web Vitals とは、GoogleがWebサイトにおける優れたユーザー体験（UX）を提供するために重要だと考える、一連のパフォーマンス指標です。これは単なるページの読み込み速度だけでなく、ユーザーが実際にページを操作した際の「体感」を数値化しようとする試みです。2026年現在、Core Web Vitalsは以下の3つの主要な指標で構成されています。

LCP (Largest Contentful Paint): 読み込みパフォーマンス
INP (Interaction to Next Paint): インタラクティブ性（応答性）
CLS (Cumulative Layout Shift): 視覚的な安定性

これらの指標は、Google検索のランキング要因の一つとしても公式に採用されています。つまり、Core Web Vitalsを改善することは、ユーザー体験の向上と Webサイト高速化 に繋がり、結果としてSEO対策にもなる、非常に重要な取り組みなのです。以前はインタラクティブ性の指標としてFID (First Input Delay) が用いられていましたが、現在はよりユーザーの体感に近いINPが中心的な指標となっています。

各指標を徹底解説！LCP、INP、CLSの具体的な意味と測定方法

3つの指標が何を表しているのか、もう少し具体的に見ていきましょう。それぞれの指標には「良好」「改善が必要」「不良」のしきい値が定められており、これを基準に自サイトの状態を評価します。

LCP (Largest Contentful Paint): 読み込みの速さ

LCPは、ビューポート（ユーザーに見えている画面範囲）内で最も大きな画像またはテキストブロックが表示されるまでの時間を測定します。ユーザーが「ページの主要なコンテンツが表示された」と感じるタイミングを捉えるための指標で、体感的な読み込み速度を測るのに適しています。

良好: 2.5秒未満
改善が必要: 2.5秒〜4.0秒
不良: 4.0秒超

サイトのヒーロー画像や見出しテキストなどがLCPの対象になることが多く、これらの表示が遅いとLCPのスコアは悪化します。

INP (Interaction to Next Paint): 操作への応答性

INPは、ユーザーがページ上で行ったクリック、タップ、キー入力などの操作に対して、ブラウザが次のフレームを描画して視覚的なフィードバックを返すまでの時間を測定します。ボタンをクリックしたのに反応がない、入力フォームの文字入力がもたつく、といった体験はユーザーに大きなストレスを与えます。INPは、こうした「応答性」の悪さを検出する指標です。

良好: 200ミリ秒未満
改善が必要: 200ミリ秒〜500ミリ秒
不良: 500ミリ秒超

重いJavaScriptの処理がメインスレッドを長時間占有することが、INP悪化の主な原因です。

CLS (Cumulative Layout Shift): 見た目の安定性

CLSは、ページの読み込み中に発生した予期せぬレイアウトのズレをスコア化したものです。例えば、記事を読んでいる途中で画像や広告が読み込まれ、テキストがガクンと下にずれてしまう経験はありませんか？このような視覚的な不安定さは、ユーザーの誤操作を招き、不快感を与えます。CLSは、こうしたレイアウトシフトの大きさを定量化します。

良好: 0.1未満
改善が必要: 0.1〜0.25
不良: 0.25超

スコアは0から始まり、レイアウトがずれるたびに加算されていきます。値が小さいほど、視覚的に安定したページであることを意味します。

Webパフォーマンス改善の基本戦略：読み込み速度を上げる技術

LCPの改善は、 Webパフォーマンス 全体の向上に繋がる基本中の基本です。サーバーの応答を速くし、必要なリソースを効率的に読み込むための戦略を見ていきましょう。

画像の最適化

Webサイトのデータ容量の多くを占めるのが画像です。画像サイズを削減し、読み込み方法を工夫するだけでLCPは劇的に改善します。

次世代フォーマットの利用: WebPやAVIFといった新しい画像フォーマットは、JPEGやPNGよりも高い圧縮率を誇ります。
適切なサイズで配信: 表示するサイズに合わせて画像をリサイズしましょう。幅500pxの場所に幅2000pxの画像を読み込むのは無駄です。
遅延読み込み (Lazy Loading): 画面に表示されていない画像を後から読み込むように設定します。<img> タグに loading="lazy" を追加するだけで簡単に実装できます。


<!-- loading="lazy"で画面外の画像は後から読み込む -->
<img src="photo.webp" alt="説明" width="800" height="450" loading="lazy">

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

ブラウザはHTMLを上から順に解釈しますが、途中でCSSやJavaScriptの読み込みが発生すると、ページの描画（レンダリング）を一時停止してしまいます。これを「レンダリングブロック」と呼びます。

CSS: <head> タグの早い段階で読み込みます。ただし、ファイルサイズは小さく保つ努力が必要です。
JavaScript: <body> タグの最後で読み込むか、defer または async 属性を付けて非同期に読み込みましょう。defer はHTMLの解析後に、async はダウンロード完了次第、スクリプトを実行します。


<!-- defer属性でHTML解析をブロックせずにスクリプトを読み込む -->
<script src="app.js" defer></script>

インタラクティブ性を高める最適化：JavaScriptと描画処理の効率化

INPの改善には、JavaScriptの実行方法を見直すことが不可欠です。ユーザーの操作を妨げないよう、メインスレッドを長時間ブロックする処理を避けましょう。

長いタスクの分割

一つの関数で非常に重い処理を行うと、その間ブラウザはユーザーの操作に一切応答できなくなります。こうした「長いタスク」を、setTimeout などを使って小さな処理単位（チャンク）に分割することで、合間にユーザー操作を処理する余裕が生まれます。


// 重い処理を小さなチャンクに分割するイメージ
function processAllItems(items) {
  let i = 0;
  
  function processChunk() {
    // 一度に処理する数を制限
    const CHUNK_SIZE = 50;
    for (let j = 0; j < CHUNK_SIZE && i < items.length; j++, i++) {
      // 個々のアイテムに対する処理
      processItem(items[i]);
    }

    // まだ処理が残っていれば、次のイベントループで再開
    if (i < items.length) {
      setTimeout(processChunk, 0);
    }
  }

  processChunk();
}

コード分割 (Code Splitting)

WebpackやViteなどのモダンなビルドツールを使えば、JavaScriptのコードを複数のファイルに分割できます。初期表示に最低限必要なコードだけを読み込み、ユーザーのアクションに応じて追加のコードを動的に読み込むことで、初期の実行時間を大幅に短縮し、INPの改善に貢献します。

視覚的安定性を保つ秘訣：レイアウトシフトを避けるCSSテクニック

CLSのスコアを悪化させないためには、コンテンツが読み込まれる前に、その要素が表示されるスペースをあらかじめ確保しておくことが重要です。

画像や広告の領域を確保する

最も一般的なCLSの原因は、サイズの指定がない画像や、後から挿入される広告です。

画像には width と height を指定: <img> タグには必ず width と height 属性を記述します。これにより、画像データが読み込まれる前からブラウザはアスペクト比を計算し、適切な大きさの領域を確保してくれます。
広告スロットには min-height を指定: 広告が表示されるコンテナ要素にあらかじめ最小の高さをCSSで指定しておくことで、広告が読み込まれた際のガタツキを防げます。


/* 画像のアスペクト比を保ちつつレスポンシブにする */
img {
  max-width: 100%;
  height: auto; /* widthとheight属性が設定されていれば、これでOK */
}

/* 広告コンテナに最小の高さを設定 */
.ad-container {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee; /* プレースホルダーとして */
}

Webフォントの読み込みを制御する

Webフォントが読み込まれると、システムのフォントから切り替わる際にテキストのサイズが変わり、レイアウトシフトを引き起こすことがあります。CSSの @font-face 規則で font-display: swap; を指定すると、フォントが利用可能になるまで代替フォントでテキストを表示し、読み込み完了後にスムーズに切り替えてくれます。これにより、テキストが表示されない時間をなくしつつ、大きなレイアウトシフトを抑制できます。

実践！LighthouseとPageSpeed Insightsを活用した分析と改善サイクル

Webサイト高速化 は一度やったら終わりではありません。測定、分析、改善、再測定というサイクルを継続的に回すことが成功の鍵です。そのための強力なツールが Lighthouse とPageSpeed Insightsです。

測定: まずは現状を把握します。Google Chromeのデベロッパーツールを開き、「Lighthouse」タブからレポートを生成してみましょう。また、Web上で利用できるPageSpeed Insightsは、実際のユーザーデータ（フィールドデータ）に基づいた評価も提供してくれます。
分析: Lighthouseのレポートは、Core Web Vitalsの各スコアだけでなく、「改善できる項目」として具体的なアクションを提案してくれます。「レンダリングを妨げるリソースの除外」や「次世代フォーマットでの画像の配信」など、優先度の高い項目から着手しましょう。
改善: 分析結果を元に、この記事で紹介したようなテクニックを使ってコードを修正します。画像の最適化、JavaScriptの非同期読み込み、CSSによる領域確保など、できることから始めてみましょう。
再測定: 改善策をサイトに反映したら、再度LighthouseやPageSpeed Insightsで測定します。スコアが向上したか、新たな問題が発生していないかを確認し、次の改善サイクルに繋げます。

ユーザー体験向上 は、終わりのない旅です。Core Web Vitalsを道しるべとして、ユーザーにとってより快適で使いやすいWebサイトを目指し、継続的なパフォーマンス改善に取り組んでいきましょう。