Core Web Vitals

21.1.1. LCP (Largest Contentful Paint)

LCP は、ページの主要コンテンツが画面にレンダリングされるまでにかかる時間を測定します。

等級	基準値	TQS 要求事項
Good	2.5 秒以下	必須
Needs Improvement	2.5 秒〜 4.0 秒	許容不可
Poor	4.0 秒超過	許容不可

LCP 目標値は 2.5 秒以下を満たさなければなりません。
測定は実ユーザーデータ（RUM）基準の 75 パーセンタイル（p75）を適用します。
Chrome DevTools の Performance タブまたは web-vitals ライブラリを使用して測定します。

LCP の最適化戦略は以下の通りです。

ヒーロー画像に fetchpriority="high" 属性を指定しなければなりません。
LCP 対象リソースに <link rel="preload"> を適用しなければなりません。
サーバー応答時間（TTFB）を 500ms 以下に維持しなければなりません。
レンダリングブロッキングリソース（CSS、同期スクリプト）を最小化しなければなりません。

21.1.2. INP (Interaction to Next Paint)

INP は、ユーザーインタラクション発生時点から次のフレームがレンダリングされるまでの遅延時間を測定します。FID を代替する指標であり、ページ全体のライフサイクルを通じた応答性を評価します。

等級	基準値	TQS 要求事項
Good	200ms 以下	必須
Needs Improvement	200ms 〜 500ms	許容不可
Poor	500ms 超過	許容不可

INP 目標値は 200ms 以下を満たさなければなりません。
イベントハンドラー内で同期的に重い演算を実行してはなりません。
長時間実行タスクは requestIdleCallback または setTimeout で分割しなければなりません。
入力イベントハンドラーで強制レイアウト再計算（forced reflow）を引き起こしてはなりません。
サードパーティスクリプトがメインスレッドを長時間占有しないように管理しなければなりません。

21.1.3. CLS (Cumulative Layout Shift)

CLS は、ページの読み込みおよび使用中に発生する予期しないレイアウトシフトの累積スコアを測定します。

等級	基準値	TQS 要求事項
Good	0.1 以下	必須
Needs Improvement	0.1 〜 0.25	許容不可
Poor	0.25 超過	許容不可

CLS 目標値は 0.1 以下を満たさなければなりません。
すべての画像およびビデオ要素に width と height 属性を明示しなければなりません。
Web フォント読み込み時に font-display: swap または font-display: optional を指定しなければなりません。
動的に挿入されるコンテンツ（バナー、広告など）に対して事前にスペースを確保しなければなりません。
transform アニメーションを使用してレイアウトシフトなしに視覚的変化を実装することを推奨します。

21.1.4. Lighthouse 基準

Lighthouse 監査を通じて全般的な品質指標を測定します。

項目	最小スコア	TQS 要求事項
パフォーマンス（Performance）	90 点	必須
アクセシビリティ（Accessibility）	90 点	必須
ベストプラクティス（Best Practices）	90 点	推奨
SEO	90 点	推奨

CI パイプラインで Lighthouse CI を実行して自動的にスコアを測定しなければなりません。
測定環境は以下の 2 つを両方含まなければなりません。

環境	設定	備考
モバイル	Moto G Power、低速 4G スロットリング	Lighthouse デフォルト設定
デスクトップ	スロットリングなし	`--preset=desktop` オプション使用

パフォーマンススコアが 90 点未満のビルドはデプロイをブロックしなければなりません。
Lighthouse 結果レポートをビルドアーティファクトとして保管することを推奨します。
スコア低下傾向をモニタリングし、3 回連続で低下した場合は原因を分析しなければなりません。