Core Web Vitals実践入門：モバイルWebの表示品質を改善する基本ステップ

Webサイトの表示速度は、単にページが早く開くかどうかだけでなく、ユーザーが快適に操作できるかどうかにも大きく影響します。

特にモバイル環境では、端末性能や通信状況が一定ではありません。そのため、開発者は実際の利用環境を意識しながら、ページの表示品質を継続的に改善する必要があります。

そのための代表的な指標が、Googleの提唱する Core Web Vitals です。

本記事では、Core Web Vitalsの基本と、実務で取り組みやすい改善手順を紹介します。

Core Web Vitalsとは

Core Web Vitalsは、Webページのユーザー体験を評価するための指標です。

主に次の3つで構成されています。

• LCP（Largest Contentful Paint）
• INP（Interaction to Next Paint）
• CLS（Cumulative Layout Shift）

それぞれ、表示速度、操作への反応、レイアウトの安定性を評価します。

単純な読み込み時間だけではなく、ユーザーがページを見て操作するまでの体験全体を確認できる点が特徴です。

LCP：主要コンテンツの表示速度

LCPは、画面内で最も大きな画像やテキスト要素が表示されるまでの時間を測定します。

トップページでは、メインビジュアルや大きな見出し画像がLCP要素になることが多くあります。

LCPが遅くなる主な原因は次の通りです。

• 大きすぎる画像
• 遅いサーバーレスポンス
• 読み込みを妨げるCSS
• JavaScriptの過剰な実行
• 外部リソースへの依存

改善例

<img
  src="/images/hero.webp"
  width="1200"
  height="630"
  fetchpriority="high"
  alt="メインビジュアル"
>

主要画像では、サイズ指定と適切な優先度設定が重要です。

また、画像形式をWebPやAVIFへ変更すると、ファイルサイズを削減できる場合があります。

INP：操作への反応速度

INPは、クリックやタップ、キーボード入力などの操作に対して、ページがどれくらい早く反応するかを測定します。

JavaScriptの処理が長時間メインスレッドを占有すると、ユーザー操作への反応が遅れることがあります。

例えば、1つの関数で大量のDOM処理やデータ計算を行うと、ボタンを押しても画面がすぐに変化しない状態になる可能性があります。

長い処理を分割する

function processItems(items) {
  const batchSize = 50;
  let index = 0;

  function runBatch() {
    const end = Math.min(index + batchSize, items.length);

    for (; index < end; index++) {
      updateItem(items[index]);
    }

    if (index < items.length) {
      setTimeout(runBatch, 0);
    }
  }

  runBatch();
}

処理を小さな単位に分けることで、ブラウザがユーザー操作へ反応する時間を確保しやすくなります。

そのほか、以下の方法も有効です。

• 不要なJavaScriptを削除する
• イベント処理を軽量化する
• debounceやthrottleを利用する
• DOM更新をまとめる
• 重い計算にWeb Workerを利用する

CLS：レイアウトの安定性

CLSは、ページの読み込み中にコンテンツがどれくらい移動したかを評価します。

例えば、ユーザーがボタンを押そうとした瞬間に画像が表示され、ボタンの位置が下へ移動すると、誤操作につながる可能性があります。

画像サイズを事前に確保する

<img
  src="/images/banner.webp"
  width="800"
  height="450"
  alt="バナー画像"
>

widthとheightを指定すると、ブラウザは画像の読み込み前から必要な領域を確保できます。

また、広告や埋め込みコンテンツにも固定領域を用意すると、レイアウトの移動を抑えやすくなります。

Lighthouseで現状を確認する

Chrome DevToolsのLighthouseを利用すると、ページの品質を簡単に測定できます。

基本的な手順は次の通りです。

1. Chromeで対象ページを開く
2. DevToolsを起動する
3. Lighthouseタブを選択する
4. Mobileを選択する
5. Analyze page loadを実行する

生成されたレポートでは、Performanceだけでなく、Accessibility、Best Practices、SEOも確認できます。

ただし、Lighthouseの結果は実行環境によって変化するため、1回のスコアだけで判断しないことが大切です。

PageSpeed Insightsとの違い

Lighthouseは主に検証環境での測定に向いています。

一方、PageSpeed Insightsでは、利用可能な場合に実際のユーザーデータも確認できます。

そのため、次のように使い分けると便利です。

• Lighthouse：開発中の問題発見
• PageSpeed Insights：公開後の状況確認
• ブラウザ計測：実際の操作感の検証

複数の方法を組み合わせることで、より正確に問題を把握できます。

実務での改善手順

Core Web Vitalsを改善するときは、一度にすべてを変更するのではなく、優先順位を決めて進めることが重要です。

おすすめの順番は次の通りです。

1. 現在の数値を測定する
2. LCP要素を特定する
3. 大きな画像と不要なJavaScriptを整理する
4. レイアウト移動の原因を確認する
5. 改善後に同じ条件で再測定する

変更前と変更後の数値を記録すると、どの施策が効果的だったか判断しやすくなります。

デジタルプラットフォームでの考え方

コンテンツ量が多いデジタルプラットフォームでは、画像、ナビゲーション、外部スクリプトなどが増えやすく、ページ品質の管理が難しくなる場合があります。

例えば、WOW88 のようなモバイル利用を意識したデジタルプラットフォームを題材に考える場合、ファーストビューの表示速度、タップ操作への反応、画像読み込み時のレイアウト安定性などが重要な確認項目になります。

特定のスコアだけを追うのではなく、ユーザーが目的の情報へ迷わず移動でき、操作中に待たされない状態を目指すことが重要です。

よくある失敗

Core Web Vitalsの改善では、次のような失敗が起こりやすくなります。

スコアだけを目的にする

Lighthouseで100点を取ることが、必ずしも実際のユーザー体験の向上につながるとは限りません。

すべての画像を遅延読み込みする

ファーストビューの主要画像までLazy Loadingすると、LCPが悪化する可能性があります。

外部スクリプトを放置する

分析ツールやウィジェットなどの外部スクリプトが、メインスレッドを長時間占有することがあります。

デスクトップ環境だけで確認する

モバイル端末では、CPU性能や通信速度が異なるため、必ずモバイル条件でも測定する必要があります。

まとめ

Core Web Vitalsは、Webページの表示速度だけでなく、操作性と安定性を確認するための重要な指標です。

改善では、次の3点を意識すると進めやすくなります。

• LCP：主要コンテンツを早く表示する
• INP：ユーザー操作へ素早く反応する
• CLS：レイアウトの移動を防ぐ

まずはLighthouseやPageSpeed Insightsで現状を測定し、画像、JavaScript、レイアウトの順に問題を整理してみましょう。

小さな改善を継続することで、モバイル環境でも快適に利用できるWebサイトへ近づけることができます。