Core Web Vitalsとは？LCP・INP・CLSの意味とスコア改善の基本対策

LCP（Largest Contentful Paint）：最大視覚コンテンツの表示時間

LCPは、ページが読み込まれてから"もっとも大きな視覚的要素"が描画されるまでの時間を測定する指標です。

改善目標

• 良好（Good）：2.5秒以内
• 改善が必要（Needs Improvement）：2.5～4.0秒
• 不良（Poor）：4.0秒超

よくある原因

• 画像や動画など大きなコンテンツの読み込み遅延
• フォントの読み込みブロック
• JavaScriptやCSSの重さ

基本的な改善対策

• 画像の最適化：WebPやAVIF形式を利用、必要なら遅延読み込み（Lazy Load）
• 重要リソースのプリロード：<link rel="preload">で主要画像・フォントを先読み
• レンダリングブロックの削減：CSSやJavaScriptを遅延読み込み

HTMLマークアップ例

<!-- LCPを意識した画像 -->
<link rel="preload" as="image" href="hero-image.webp">
<img src="hero-image.webp" alt="メインビジュアル" width="1200" height="800" loading="lazy">

注意点：<img>タグのwidth/height指定

LCP改善のために画像サイズを明示的に指定するのは有効ですが、以下のようなデメリットも考慮が必要です：

• レスポンシブ対応が複雑になる
• 表示崩れや縦横比のズレの原因になることがある

INP（Interaction to Next Paint）：次の描画までの応答時間

INPは、ユーザーの操作（クリックやキー入力など）に対して、画面が応答するまでの時間を測定する新しい指標です。2024年からFCP（First Input Delay）に代わり、主要指標として採用されています。

改善目標

• 良好：200ms以下
• 改善が必要：200～500ms
• 不良：500ms超

よくある原因

• メインスレッドのJavaScript処理が重すぎる
• イベントリスナー内の処理が遅い
• スクロールやDOM操作が複雑

基本的な改善対策

• 不要な処理の分割やWeb Workerの利用
• イベントリスナーの最適化（passive: true など）
• アニメーション処理をCSSで実装（JavaScriptでの逐次制御を避ける）

JavaScriptプログラム例

<!-- 遅延処理や軽量化したイベントリスナー -->
<button id="buy">購入する</button>
<script>
  document.getElementById("buy").addEventListener("click", function () {
    window.requestIdleCallback(() => {
      // 重たい処理を後回しに
      console.log("処理開始");
    });
  }, { passive: true });
</script>

CLS（Cumulative Layout Shift）：累積レイアウト移動

CLSは、読み込み中にページのレイアウトがどれだけずれたかを測定する指標です。視覚的な安定性を評価します。

改善目標

• 良好：0.1未満
• 改善が必要：0.1～0.25
• 不良：0.25超

よくある原因

• サイズ未指定の画像や広告バナー
• 動的に挿入されるコンテンツ（例：フォントの遅延読み込み、スライド表示）
• 非同期JavaScriptによるDOMの変更

基本的な改善対策

• 画像や動画にはwidthとheightを指定（またはaspect-ratioを使用）
• 広告や埋め込み要素にもプレースホルダー領域を確保
• WebフォントのFOUT対策（font-display: swap）を適用

HTMLマークアップ例

<!-- CLSを防ぐ画像とフォントの例 -->
<style>
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
    font-display: swap;
  }
</style>
<img src="banner.jpg" width="728" height="90" alt="広告バナー">

まとめ：Core Web Vitalsを改善してSEOとUXを両立

Core Web Vitalsは、単なる速度指標ではなく、ユーザー体験そのものを数値化したものです。

• LCPでは視覚的な初速を
• INPでは操作への反応性を
• CLSでは視覚の安定性を

それぞれ評価しており、バランスの良い改善が求められます。

日々のWeb制作においては、開発初期からこれらを意識した設計・コーディングを行うことで、後からの調整負荷を最小限に抑えることができます。ぜひ継続的なパフォーマンス計測と改善を習慣化しましょう。