Core Web Vitals: ウェブパフォーマンスの測定と改善

サイトは読み込まれても、ユーザーはすぐに離脱してしまいます。読み込みの遅さ、予期しないレイアウトのずれ、応答性の悪いインタラクションは訪問者をイライラさせ、検索順位を下げる原因になります。Core Web Vitals（CWV）はGoogleが提唱するユーザー体験の指標であり、SEOに直接影響します。このガイドでは、CWVを測定し改善するための実践的な手順を紹介します。

Core Web Vitalsとは？

Core Web Vitalsは、ユーザー体験の重要な側面を数値化する3つの指標です：

• Largest Contentful Paint（LCP）： 読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、テキストブロック、動画）が表示されるまでの時間です。良好：2.5秒以下。
• First Input Delay（FID）： インタラクティブ性を測定します。ユーザーが最初に操作（クリック、タップ、キー押下）してからブラウザが応答するまでの時間です。良好：100ミリ秒以下。
• Cumulative Layout Shift（CLS）： 視覚的な安定性を測定します。ページ読み込み中の予期しないレイアウトのずれを数値化します。良好：0.1以下。

これらの指標はGoogleのページエクスペリエンスシグナルの一部であり、検索順位に影響します。また、実際のユーザー体験を反映するため、改善することはSEOとユーザー満足度の両方に利益をもたらします。

Core Web Vitalsの測定方法

フィールドデータ（実際のユーザー測定値）とラボデータ（合成テスト）の両方が必要です。完全な全体像を得るために両方を使用しましょう。

フィールドデータツール

• Chrome User Experience Report（CrUX）： 実際のユーザー指標の公開データセット。PageSpeed Insights、Search Console、またはBigQuery経由でアクセスできます。
• PageSpeed Insights： URLのフィールドデータ（利用可能な場合）とラボデータを表示します。
• Search ConsoleのCore Web Vitalsレポート： URLをステータス（不良、改善が必要、良好）ごとにグループ化します。
• web-vitals JavaScriptライブラリ： import {onLCP, onFID, onCLS} from 'web-vitals'; を使って独自のフィールドデータを収集し、アナリティクスのエンドポイントに送信できます。

ラボデータツール

• Lighthouse： Chrome DevToolsに組み込まれています。パフォーマンス、アクセシビリティ、SEOの監査を実行します。ラボ指標と改善の機会を提供します。
• WebPageTest： カスタムネットワーク条件とウォーターフォールチャートを使った高度なテストが可能です。
• Chrome DevToolsのパフォーマンスパネル： ランタイムパフォーマンスを記録し、長いタスクやレンダリングの問題を特定します。

Largest Contentful Paint（LCP）の改善

LCPは多くの場合、最も影響力のある指標です。クリティカルレンダリングパスと最大の要素を最適化しましょう。

1. 最大の要素を最適化する

• LCPが画像の場合：圧縮し、モダンなフォーマット（WebP、AVIF）を使用し、レイアウトのずれを避けるためにwidthとheight属性を設定します。
• LCP画像をプリロードする：<link rel="preload" as="image" href="#">。
• srcsetとsizesを使ったレスポンシブ画像を使用します。
• LCPがテキストの場合：フォントが迅速に読み込まれるようにします。font-display: swapを使用し、主要なフォントをプリロードします。

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

• クリティカルCSSをインライン化し、非クリティカルCSSを遅延させます。
• JavaScriptを遅延または非同期にする：<script src="#" defer></script>。
• CSSとJavaScriptを minify します。

3. サーバー応答時間を改善する

• CDNを使用して、ユーザーに近い場所からアセットを配信します。
• キャッシュを有効にする（HTTPキャッシュヘッダー、Service Worker）。
• バックエンドのパフォーマンスを最適化する（データベースクエリ、サーバーサイドキャッシュ）。

4. ペイロードサイズを削減する

• 画像を圧縮し、スクロールしないと見えない画像には遅延読み込みを使用します。
• 未使用のJavaScriptとCSSを削除します。
• コード分割を使用して、必要なコードのみを読み込みます。

First Input Delay（FID）の改善

FIDは応答性を測定します。長いJavaScriptタスクはメインスレッドをブロックし、インタラクションの処理を遅らせます。

1. 長いタスクを分割する

setTimeoutやrequestIdleCallbackを使用してメインスレッドに制御を戻します。または、サポートされている場合はscheduler.yield()を使用します。

// 例：作業のチャンク後にメインスレッドに制御を戻す
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    // アイテムを処理
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

2. イベントハンドラーを最適化する

• 高頻度のイベント（scroll、resize、input）をデバウンスまたはスロットルします。
• タッチとホイールイベントにはパッシブイベントリスナーを使用します：element.addEventListener('touchstart', handler, {passive: true});。
• イベントハンドラー内で重い処理を避け、Web Workerにオフロードします。

3. JavaScriptの実行時間を削減する

• コード分割と非クリティカルJavaScriptの遅延読み込みを行います。
• 未使用の依存関係を削除します。
• ツリーシェイキングと minify を使用します。

Cumulative Layout Shift（CLS）の改善

CLSは視覚的な安定性を測定します。予期しないずれはユーザーをイライラさせ、誤クリックを引き起こします。

1. 常にサイズ属性を含める

画像や動画にはwidthとheightを設定（またはaspect-ratio CSSを使用）して、ブラウザがスペースを確保できるようにします。

2. 動的コンテンツ用のスペースを確保する

• 広告、埋め込み、または動的コンテンツには、固定サイズのプレースホルダーを使用します。
• ユーザーの操作に応じた場合を除き、既存のコンテンツの上にコンテンツを挿入することは避けます。

3. Transformアニメーションを使用する

アニメーションにはCSSのtransformとopacityを優先します。これらはレイアウトのずれを引き起こしません。

4. フォントを慎重に読み込む

非表示テキストやレイアウトのずれを避けるために、font-display: optionalまたはswapを使用します。主要なフォントをプリロードします。

継続的改善のためのツールとワークフロー

パフォーマンスは継続的な取り組みです。測定を開発プロセスに統合しましょう。

• パイプラインでLighthouse CIを使用して、リグレッションを検出します。
• web-vitalsとアナリティクスを介してフィールドデータを監視します。
• パフォーマンスバジェットを設定し、違反時にアラートを出します。

簡単なチェックには、TryQuickToolBoxのNginxログアナライザーを使用して、LCPに影響を与える可能性のある遅いサーバー応答を特定しましょう。

FAQ

Core Web Vitalsの現在のしきい値は？

LCP：良好 ≤ 2.5秒、改善が必要 ≤ 4秒、不良 > 4秒。FID：良好 ≤ 100ミリ秒、改善が必要 ≤ 300ミリ秒、不良 > 300ミリ秒。CLS：良好 ≤ 0.1、改善が必要 ≤ 0.25、不良 > 0.25。これらはページ読み込みの75パーセンタイルで評価されます。

Core Web Vitalsはどのくらいの頻度で測定すべきですか？

アナリティクスとSearch Consoleを介してフィールドデータを継続的に監視してください。重要なコード変更ごとに、また少なくとも月に一度はベースライン確認のためにラボテストを実行してください。

Core Web Vitalsの改善は本当にSEOに影響しますか？

はい、GoogleはCore Web Vitalsを含むページエクスペリエンスシグナルをランキング要因として使用しています。コンテンツが依然として主要ですが、良好なCWVは特に競争の激しい分野で優位に立つことができます。

最適化の準備はできましたか？まずPageSpeed Insightsで現在のスコアを測定し、最大の改善機会に取り組みましょう。サーバー側の簡単なチェックには、Nginxログアナライザーを試して、LCPを損なっている可能性のある遅いバックエンド応答を特定してください。