Core Web Vitalsの測定
パフォーマンス指標を追跡して改善します
「Core Web Vitalsの測定」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Vitals が重要な理由
Core Web Vitals は、Google が提供するユーザー中心のパフォーマンス指標です。読み込み、インタラクティブ性、視覚的安定性を数値化し、UX と検索順位の両方に影響します。
3つの指標
3つの指標は、LCP（Largest Contentful Paint）、CLS（Cumulative Layout Shift）、INP（Interaction to Next Paint）です。それぞれ、ユーザーが感じるパフォーマンスの異なる側面を対象にしています。
LCP
LCP は、最大の表示要素（ヒーロー画像や見出し）のレンダリングが完了するまでの時間を測定します。良好な値は 2.5 秒未満です。SSR はそのコンテンツを初期 HTML で配信することで役立ちます。
CLS
CLS は、ページの読み込み中に予期せずレイアウトが移動する度合いを測定します。良好な値は 0.1 未満です。画像や広告のためのスペースをあらかじめ確保し、既存のコンテンツの上にコンテンツを挿入しないようにしてください。
<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->INP
INP は、ページの表示中におけるユーザー操作への応答性を測定し、以前の FID に代わる指標です。良好な値は 200 ms 未満です。メインスレッド上で負荷の大きい JS を実行すると INP が悪化します。
SSR が Vitals に与える効果
SSR はコンテンツを早く描画することで LCP を改善し、安定したレイアウトを早期に配信することで CLS を低減できます。段階的な hydration は、初期に配信する JavaScript を減らすことで INP を改善します。
ラボデータとフィールドデータ
ラボデータは、管理された環境で Lighthouse などの合成ツールから取得します。フィールドデータ（CrUX、RUM）は実際のユーザーから取得します。両方を使って最適化してください。検索順位に使われるのはフィールドデータです。
Lighthouse で計測する
Chrome DevTools または CI で Lighthouse を実行すると、ラボ環境での LCP、CLS、INP の代替指標となる Total Blocking Time と、改善に役立つ診断結果を取得できます。
// npx lighthouse https://example.com --viewweb-vitals ライブラリ
web-vitals ライブラリを使うと、ブラウザーで実際のユーザーの vitals を収集し、分析用エンドポイントに送信できます。
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(console.log);
onCLS(console.log);
onINP(console.log);JavaScript を減らす
バンドルを小さくすると INP と time-to-interactive が改善します。ルート単位の遅延読み込み、@defer、段階的な hydration、tree-shaking を使って、配信する JS を削減してください。
反復して確認する
パフォーマンス改善では、計測し、変更し、もう一度計測します。SSR、hydration、または defer を有効にした後は、Lighthouse を再実行し、数週間にわたってフィールドデータの推移を確認して、実際の効果を確かめてください。
クイックチェック
Core Web Vitals についての理解度を確認しましょう。
まとめ
Core Web Vitals（LCP、CLS、INP）、SSR と段階的な hydration による改善効果、ラボデータとフィールドデータの違い、Lighthouse と web-vitals ライブラリによる計測方法を学びました。その後、再計測を繰り返して改善を確認する方法も学びました。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 38
- レッスン
- 144
よくある質問
「Core Web Vitalsの測定」レッスンは無料ですか？
はい。「Core Web Vitalsの測定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「Core Web Vitalsの測定」で何を学びますか？
パフォーマンス指標を追跡して改善します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Core Web Vitalsの測定」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ハイドレーションとは
- 完全ハイドレーションの有効化
- @deferによる段階的ハイドレーション
- Core Web Vitalsの測定