Featured image of post Core Web Vitals最適化完全ガイド2024
Performance

Core Web Vitals最適化完全ガイド2024

LCP最適化、新指標INP（Interaction to Next Paint）への対応、CLS修正方法、RUM（Real User Monitoring）、CrUXデータ分析、Lighthouseスコア改善まで網羅した2024年版CWV完全ガイド。

English
  1. ホーム
  2. web
  3. Core Web Vitals最適化完全ガイド2024

Core Web Vitals（CWV）は、Googleが実際のユーザー体験を測定するために使用するユーザー中心のパフォーマンス指標です。2024年3月にFirst Input Delay（FID）がInteraction to Next Paint（INP）に置き換えられたことを受け、Largest Contentful Paint（LCP）、INP、Cumulative Layout Shift（CLS）の3つの指標すべてを理解することが不可欠です。本ガイドでは、CWVスコアを改善するためのあらゆる側面を解説します。

Core Web Vitalsを理解する

3つのCWV指標は、それぞれ異なるユーザー体験の側面を測定します。LCPは読み込み速度、INPはインタラクティブ性、CLSは視覚的な安定性を評価します。

指標GoodNeeds ImprovementPoor
LCP≤ 2.5秒2.5秒 – 4.0秒> 4.0秒
INP≤ 200ms200ms – 500ms> 500ms
CLS≤ 0.10.1 – 0.25> 0.25

LCP最適化

LCPは通常、ヒーロー画像、大きな見出し、または動画ポスターによってトリガーされます。最適化の3つの戦略は、リソースの最適化、読み込みの優先順位付け、サーバー応答時間の短縮です。

<img src="hero.webp" alt="ヒーロー画像" width="1200" height="600"
     fetchpriority="high" />

AVIFやWebPなどの次世代フォーマットを使用し、srcsetとsizesでレスポンシブ画像を提供します。LCP要素は遅延読み込みを避け、<link rel="preload">で重要なリソースを事前読み込みしましょう。CDNの活用とEarly Hints（HTTP 103）でTTFBを削減します。

INP：新しい指標

INPはすべてのインタラクションを測定するため、最初のクリックが速くても後続の操作が遅いページは低スコアになります。主な原因はメインスレッドをブロックする長いタスクです。

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn(`長いタスク: ${entry.duration}ms`);
    }
  }
});
observer.observe({ type: "longtask", buffered: true });

scheduler.yield()（利用可能な場合）またはsetTimeout()で長いタスクを分割します。JavaScriptバンドルをコード分割し、ReactのuseTransitionやVueのSuspenseを活用してメインスレッドの応答性を維持します。

CLS修正

レイアウトシフトは、画像に寸法がない、広告が動的に挿入される、Webフォントが原因で発生します。

img, video {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

画像には常にwidthとheight属性を設定します。広告や埋め込み要素には明示的なコンテナ寸法を確保し、font-display: optionalでFOITを排除します。

Real User Monitoring

ラボデータだけでなく、実際のユーザーデータが真実を語ります。web-vitalsライブラリを使用すると、実際の訪問者からCWV指標を簡単に収集できます。

import { onLCP, onINP, onCLS } from "web-vitals";

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

これらの指標をGoogle Analytics 4やカスタム分析エンドポイントに送信し、アトリビューションモードで原因要素を特定します。高トラフィックサイトでは1-5%のサンプリングで十分な統計的有意性を維持できます。

CrUXデータ分析

Chrome User Experience Reportは、数百万のChromeユーザーから集約されたフィールドデータを提供します。CrUX APIを使用してプログラムでオリジンのパフォーマンスをクエリできます。

curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"origin": "https://example.com"}'

Looker StudioでCrUXダッシュボードを構築し、経時的な傾向を追跡します。競合他社とのスコア比較を行い、現実的なパフォーマンスバジェットを設定しましょう。

Lighthouseスコアリング

Lighthouse 11+はシミュレーションベースのアプローチを使用します。診断ツールとして貴重ですが、Lighthouseだけで最適化せず、必ず実際のユーザーデータで検証することが重要です。

監査項目一般的な問題修正方法
LCPレンダリングブロックリソース非クリティカルなCSS/JSを遅延
TBT長いJavaScriptタスクコード分割、遅延読み込み
CLS画像の寸法不足すべての画像にwidth/heightを追加

Lighthouse CIをGitHub Actionsに組み込み、プルリクエストごとにパフォーマンスバジェットを適用します。規律あるアプローチにより、4〜8週間でサイトを全指標でレッドからグリーンに改善することが可能です。

© 2022 - 2026 たかおの解説