React Academy · レッスン

ReactアプリでCore Web Vitalsを測定

Lighthouse、WebPageTest、web-vitals libraryを使ってLCP、INP、CLSのスコアを収集します。

「ReactアプリでCore Web Vitalsを測定」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

Core Web Vitals とは

Core Web Vitals は、SEO ランキングに影響する Google のユーザー体験指標です。LCP（Largest Contentful Paint — 読み込み）、INP（Interaction to Next Paint — 応答性）、CLS（Cumulative Layout Shift — 視覚的な安定性）で構成されます。

良好な基準値

目標値は、LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1 です。「不良」基準値（LCP > 4s、INP > 500ms、CLS > 0.25）を超えると、ユーザー体験と SEO に大きな悪影響があります。

web-vitals ライブラリ

web-vitals npm パッケージを使うと、シンプルな API で実際のブラウザにおける CWV を測定できます。

npm install web-vitals

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

onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));

Vitals をアナリティクスに送信する

実ユーザーモニタリング（RUM）のために Vitals をアナリティクスのエンドポイントへ送信します。Lighthouse はラボ環境のパフォーマンスを測定しますが、RUM では実際のユーザーが体験する内容を確認できます。

function sendToAnalytics(metric) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' },
  });
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

Next.js 組み込みの Vitals

Next.js は Core Web Vitals を自動計測します。Pages では_app.jsからreportWebVitals関数をエクスポートするか、App Router の組み込みサポートを使います。

// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric.name, metric.value);
  }
}

Chrome DevTools の Lighthouse

Chrome DevTools の Lighthouse タブで Lighthouse 監査を実行し、ラボ環境での CWV を測定します。拡張機能の干渉を避けるためにシークレットモードを使い、スロットリングでモバイル環境をシミュレートします。

WebPageTest

WebPageTest.org では、詳細なウォーターフォールチャート、動画キャプチャ、さまざまな地域の実機から取得した CWV 測定結果を確認できます。ローカルの Lighthouse よりも現実に近い結果が得られます。

Chrome User Experience Report（CrUX）

Google の CrUX データセットは、数百万のウェブサイトから実ユーザーの CWV データを集計します。Google Search Console、PageSpeed Insights、または CrUX API からアクセスできます。

LCP の PerformanceObserver

ネイティブのPerformanceObserver API を使って LCP エントリを監視し、どの要素が最大コンテンツの描画になっているかを確認します。

const po = new PerformanceObserver(entries => {
  for (const entry of entries.getEntries()) {
    console.log('LCP element:', entry.element, 'time:', entry.startTime);
  }
});
po.observe({ type: 'largest-contentful-paint', buffered: true });

CLS のデバッグ

Chrome DevTools の Layout Shift Regions（Rendering パネル内）を使うと、レイアウトシフトを引き起こす要素を赤いオーバーレイで強調表示できます。

アトリビューションデータ

web-vitalsライブラリは、低い指標値の原因となったもの（LCP 要素、INP のインタラクション、CLS の原因となった要素）を特定するアトリビューションデータを提供します。

onLCP(metric => {
  const { element, url } = metric.attribution.lcpEntry;
  console.log('LCP element:', element);
}, { reportAllChanges: true });

確認問題

応答性、つまりユーザーの操作にページがどれだけ速く応答するかを測定する Core Web Vital はどれですか？

まとめ

web-vitalsライブラリまたは Lighthouse で CWV を測定します。実ユーザーモニタリングのために指標をアナリティクスへ送信します。LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1 を目標にします。アトリビューションデータを使って、低いスコアの原因となっている具体的な要素やインタラクションを特定します。

よくある質問

「ReactアプリでCore Web Vitalsを測定」レッスンは無料ですか？

はい。「ReactアプリでCore Web Vitalsを測定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「ReactアプリでCore Web Vitalsを測定」で何を学びますか？

Lighthouse、WebPageTest、web-vitals libraryを使ってLCP、INP、CLSのスコアを収集します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「ReactアプリでCore Web Vitalsを測定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る