Frontend Academy · レッスン

Core Web Vitals：LCP・FID・CLS

Largest Contentful Paint、First Input Delay、Cumulative Layout Shift が測定する内容と、Google がこれらをランキングシグナルとして使う理由を理解します。

レッスン 1/413 ステップ

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

パフォーマンスが重要な理由

ページの表示が遅いと、ユーザーを失います。Googleはパフォーマンスをランキング要因にしており、Core Web Vitalsのスコアが低いサイトは検索結果で下位に表示されます。SEOだけでなく、100ミリ秒の遅延ごとにコンバージョンとエンゲージメントが測定可能なほど低下します。

3つのCore Web Vitals

Googleは、ユーザー体験に関する3つの指標を測定します。LCP（読み込み速度）、FID（インタラクティブ性）、CLS（視覚的な安定性）です。それぞれに「良好」、「改善が必要」、「不良」のしきい値があります。

Largest Contentful Paint（LCP）

LCPは、最も大きく表示されるコンテンツ要素（画像、動画のポスター画像、またはテキストブロック）の描画が完了するまでの時間を測定します。良好: 2.5秒未満。不良: 4秒超。ヒーロー画像を先読みし、レンダリングをブロックするリソースを減らし、高速なCDNを使用して最適化します。

First Input Delay（FID）とINP

FIDは、ユーザーの最初の操作（クリックやタップ）からブラウザーが応答するまでの遅延を測定します。良好: 100ミリ秒未満。2024年に、FIDはInteraction to Next Paint (INP)に置き換えられました。INPは最初の操作だけでなく、すべての操作を測定します。

累積レイアウトシフト（CLS）

CLSは、ページの読み込み中に予期せず発生するレイアウトシフトを測定します。良好：0.1未満。不良：0.25超。画像のサイズ未指定、フォントの遅延読み込み、初回ペイント後に挿入される広告などが原因になります。

ブラウザーでCWVを測定する

web-vitals npmパッケージを使って実ユーザーのメトリクスを取得し、分析エンドポイントに送信します。

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

onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));

function sendToAnalytics({ name, value, id }) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({ name, value, id }),
    keepalive: true
  });
}

LCPの改善：ヒーロー画像を先読みする

HTMLの残りの解析が始まる前に、ブラウザーがヒーロー画像を早期にダウンロードするよう指示します。

<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

CLSの改善：スペースを確保する

アセットが到着する前にブラウザーがスペースを確保できるよう、画像と埋め込み要素には必ずwidthとheightを設定します。レスポンシブなコンテナにはaspect-ratio CSSを使用します。

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">

INPの改善：長いタスクを分割する

長時間にわたるJavaScriptタスクはメインスレッドをブロックし、クリックへの応答を遅らせます。scheduler.yield()やsetTimeoutを使って処理を分割し、ブラウザーが描画して入力に応答できるようにします。

async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
  }
}

ラボデータとフィールドデータ

ラボデータ（Lighthouse）は、管理された環境で行う合成テストです。フィールドデータ（CrUX、RUM）は、実際のデバイスを使う実ユーザーから収集されます。SEOの検索順位を判断する真の基準はフィールドデータです。

パフォーマンスバジェット

明確な上限を設定します。例：LCPは2秒未満、JSバンドルは200KB未満。Lighthouse CIや@bundle-analyzerを使ってCIで適用し、パフォーマンスが悪化したビルドを失敗させます。

クイックチェック

ページの読み込み中に予期せず発生する視覚的なジャンプを測定するCore Web Vitalはどれですか？

対話的なレッスンで答える

まとめ：Core Web Vitals

LCP：最大の要素が読み込まれるまでの速度。目標は2.5秒未満。INP（以前のFID）：応答性。目標は200ミリ秒未満。CLS：視覚的な安定性。目標は0.1未満。本番環境ではweb-vitalsパッケージで測定し、CIではLighthouseを使用します。SEOを左右するのはラボデータではなくフィールドデータです。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問

「Core Web Vitals：LCP・FID・CLS」レッスンは無料ですか？

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

「Core Web Vitals：LCP・FID・CLS」で何を学びますか？

Largest Contentful Paint、First Input Delay、Cumulative Layout Shift が測定する内容と、Google がこれらをランキングシグナルとして使う理由を理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Core Web Vitals：LCP・FID・CLS」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Frontend Academyに戻る