パフォーマンス
Core Web Vitals（LCP・INP・CLS）の目標値、開発中と公開後の計測方法、指標ごとの対策、キャッシュ制御
表示の速さと操作への反応の速さは、Core Web Vitals の 3 つの指標で測ります。
目標値
次の値を満たすことを目標にします。公開後は、実ユーザーの値の 75 パーセンタイル（利用者の 75% がこの値以内に収まる）で判定します。
| 指標 | 測るもの | 目標 |
|---|---|---|
| LCP（Largest Contentful Paint） | ファーストビューの主要な要素が表示されるまでの時間 | 2.5 秒以下 |
| INP（Interaction to Next Paint） | クリックや入力から、画面が更新されるまでの時間 | 200ms 以下 |
| CLS（Cumulative Layout Shift） | 読み込み中にレイアウトがずれる量 | 0.1 以下 |
計測方法
- 開発中: Chrome DevTools の Performance パネルで、実際に操作しながら LCP・INP・CLS を確認します。Lighthouse はページを読み込むだけで操作しないため、INP を計測できません。代わりに TBT（Total Blocking Time）を目安にします。
- 公開後: PageSpeed Insights で実ユーザーの値（CrUX）を確認します。CrUX は、一定のアクセスがある公開ページにしかデータがありません。
指標ごとの対策
LCP
- LCP 要素となる画像は遅延読み込みせず、
fetchpriority="high"で優先して読み込みます（LCP 画像の優先読み込み）。 - 画像は WebP・AVIF に変換して圧縮します（画像フォーマット）。
- スクリプトは
type="module"かdeferで読み込み、HTML の解析を止めないようにします（スクリプトの読み込み）。 - Web フォントは使うウェイトを絞り、
font-display: swapを指定します（Web フォント）。
INP
scrollやresizeなど高頻度で実行される処理を間引き、長いタスクを分割します（JavaScript のパフォーマンス）。- 計測タグや広告、チャットウィジェットなどの外部スクリプトは、メインスレッドを長く占有することがあります。追加するときは、計測して影響を確認してください。
CLS
- 画像・動画・
iframeにはwidthとheightを指定し、表示領域を確保します（画像の読み込み最適化）。 - バナーやお知らせなど、読み込み後にコンテンツの上へ要素を差し込まないようにします。差し込む場合は、あらかじめ表示領域を確保します。
- Web フォントに切り替わるときの文字幅の変化でもレイアウトがずれます。代替フォントとの差が大きい場合は、ファーストビューの見出しだけに Web フォントを使うなど、範囲を絞ります。
キャッシュ制御
ファイルの種類ごとに、ブラウザにキャッシュさせる期間を分けます。サーバーやホスティングサービスの設定で Cache-Control ヘッダーを指定してください。
| 対象 | 設定 | 理由 |
|---|---|---|
| ファイル名にハッシュが付いた CSS・JS・画像 | public, max-age=31536000, immutable |
内容が変わるとファイル名も変わるため、長期間キャッシュしても古い内容が残らない |
| HTML | no-cache |
毎回サーバーに更新を確認させ、公開した変更をすぐ反映する |
| ハッシュのない画像・フォント | 数日〜数週間程度 | 同じファイル名で差し替えたとき、古い内容が残る期間を限定する |
開発環境テンプレートでビルドした CSS・JS には、ファイル名にハッシュが付きます。