パフォーマンスは一つのことではありません — 数十の小さな判断の積み重ねです。このチェックリストは画像・フォント・JavaScript・CSS・キャッシュ・レンダリングの 6 つの領域で 30 項目をカバーします。各項目は典型的な影響度順にランク付けされています。上位の項目から取り組みましょう。

画像（最も高い影響）

すべての画像を WebP または AVIF に変換する。 WebP は JPEG を 25〜35%、 PNG を 50〜70% 削減します。静的アセットには Picovert のコンバーターを使用します。
LCP 画像に絶対に遅延読み込みを使わない。 代わりに fetchpriority="high" と <head> 内の <link rel='preload'> を追加します。
すべての img に必ず width と height を指定する。 予約スペースなしで画像が読み込まれることによる CLS を防ぎます。
少なくとも 3 つのサイズで srcset を使用する。 320w、768w、1200w でモバイル・タブレット・デスクトップをカバー。モバイルのペイロードを 50〜60% 削減します。
スクロール外の画像を遅延読み込みする。 loading="lazy" は現在すべてのモダンブラウザで標準機能です。JavaScript は不要です。
GIF アニメーションを MP4 に変換する。 MP4 は 10〜20 倍小さくハードウェアデコードを使用します。こちらで変換。

フォント

WOFF2 のみ使用する。 WOFF2 は WOFF より 30% 優れた圧縮を持ち、ブラウザサポートは 98% です。
実際に使用する文字にフォントをサブセット化する。 完全なラテン系フォントは 80 KB。言語の文字セットにサブセット化: 15〜20 KB。
重要なフォントをプリロードする。 <link rel="preload" as="font" crossorigin> は 2 回目のラウンドトリップの発見遅延を除去します。
本文フォントには font-display: swap、装飾フォントには optional を設定する。 読み込み中の非表示テキスト（FOIT）を防ぎながら、大きなレイアウトシフトも避けます。
Google Fonts の代わりにフォントをセルフホストする。 fonts.googleapis.com への DNS ルックアップと接続を排除します。

ルートレベルでコードを分割する。 各ルートは必要な JavaScript だけを読み込むべきです。Next.js はページに対して自動的にこれを行います。
未使用の依存関係を監査・削除する。 新しい npm パッケージを追加する前に npx bundle-phobia [パッケージ] を実行します。
重いコンポーネントを動的インポートする。 リッチテキストエディタ・チャートライブラリ・PDF レンダラー — 必要な時だけ読み込みます。
すべての非クリティカルなサードパーティスクリプトを遅延させる。 アナリティクス・ヒートマップ・チャットボット — load イベント後に読み込みます。

above-the-fold コンテンツのクリティカル CSS をインライン化する。 ブラウザは外部スタイルシートを待たずに表示部分をレンダリングできます。
未使用の CSS を削除する。 PurgeCSS または Tailwind の JIT を使用してページが実際に使用するものだけを送信します。
CSS アニメーションを JavaScript アニメーションより優先する。 CSS アニメーションはコンポジタースレッドで実行され、メインスレッドをブロックしません。

静的アセットに長期キャッシュヘッダーを設定する。 ハッシュ化されたファイル名（JS、CSS、画像）には Cache-Control: max-age=31536000, immutable。immutable はブラウザに再検証しないよう指示します。
ユーザーに近いエッジノードがある CDN にデプロイする。 ほとんどのグローバルトラフィックでラウンドトリップ遅延を 150 ms から 10 ms 未満に削減します。

データ重視ページに Next.js App Router RSC を使用する。 サーバーコンポーネントは自身の JavaScript をクライアントに送信せずに HTML をストリーミングします。
画面外セクションに content-visibility: auto を使用する。 ブラウザは非表示コンテンツのレイアウトとペイントをスキップし、長いページでレンダリング時間を 40〜60% 削減します。
推測せず、測定する。 各変更の前後で Lighthouse を実行し、Search Console の CrUX データを確認し、自分の RUM データと共に web-vitals ライブラリを使用します。