フロントエンド性能最適化チェックリスト【2025年版】：Core Web Vitalsで確実に速くする

0. 前提：計測のセットアップ（最優先）

まずは現状を数値化します。ローカルのラボ計測と、本番トラフィックでのフィールド計測を両方行いましょう。

ラボ計測: Lighthouse、PageSpeed Insights、WebPageTest
フィールド計測: web-vitals ライブラリや APM/Analytics（例: GA4, Sentry, Datadog）

npm i web-vitals

// app/web-vitals.ts (例): フィールド計測を送信
import { onCLS, onINP, onLCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric: any) {
  // ここで任意のエンドポイントや analytics に送信
  fetch('/api/metrics', {
    method: 'POST',
    keepalive: true,
    body: JSON.stringify(metric),
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onTTFB(sendToAnalytics);

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Astro フロントエンド開発の教科書

1. 画像最適化（LCPに直結・効果大）

next/image を使用し、適切な sizes を指定して過剰ダウンロードを防ぐ。
ヒーロー画像は事前読み込み（priority / <link rel="preload">）で LCP を短縮。
WebP/AVIF を優先。必要な最小解像度で出力する。
レイアウトシフトを防ぐため width/height もしくは親でレイアウトを確定。

// 例: ヒーロー画像（App Router）
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1280}
      height={720}
      priority
      sizes="(max-width: 768px) 100vw, 1280px"
    />
  );
}

// next.config.js（一例）: 画像ドメイン/最適化設定
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      { protocol: 'https', hostname: 'images.example.com' },
    ],
  },
};

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

［入門］Webフロントエンド E2E テストーーPlaywrightによるWebアプリの自動テストから良いテストの書き方まで [ 渋川よしき ]

2. JavaScript削減（INP/初期描画に効く）

まず「配信するJSバイト数」を減らす。未使用ライブラリを除去、代替の軽量実装へ。
サーバーコンポーネント優先（App Router）。クライアント側に不要な状態やロジックを持ち込まない。
dynamic() で遅延読み込み。ユーザーの初期体験に不要な UI を遅らせる。
use client の付け過ぎに注意。クライアントコンポーネントの粒度を見直す。

// 遅延読み込み：ヒーロー下部の重いセクションを遅らせる
import dynamic from 'next/dynamic';
const HeavyCharts = dynamic(() => import('./HeavyCharts'), { ssr: false });

export default function Page() {
  return (
    <main>
      <h1>高速な初期描画</h1>
      {/* ビューポート外で表示タイミングを遅らせる */}
      <HeavyCharts />
    </main>
  );
}

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

情報処理教科書プロジェクトマネージャ 2025年版（EXAMPRESS） [ ITのプロ46 ]

3. フォント最適化（LCP/CLSに影響）

サブセット化＋可変フォントの活用で転送量を削減。
font-display: swap でテキストのFOITを回避、CLS が出ないようにフォールバックのメトリクスを近づける。
外部フォントは preconnect/preload を適切に設定。

<!-- app/layout.tsx 内の <head> 等で -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="/fonts/my-font.css">
<link rel="stylesheet" href="/fonts/my-font.css" />

@font-face {
  font-family: 'InterSubset';
  src: url('/fonts/inter-subset.woff2') format('woff2');
  font-display: swap;
}

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

フロントエンド開発のためのテスト入門今からでも知っておきたい自動テスト戦略の必須知識【電子書籍】[ 吉井健文 ]

4. CSS最適化（描画のブロッキング解消）

クリティカルCSSの内製 or フレームワークの最適化を活用。
未使用CSSの削除、モジュール化、コンポーネント単位の読み込みを徹底。
contain content-visibility などのモダンプロパティでレンダリング作業量を抑制。

article { content-visibility: auto; contain-intrinsic-size: 1000px 800px; }

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

エンジニアのためのWeb3開発入門　イーサリアム・NFT・DAOによるブロックチェーンWebアプリ開発

5. キャッシュ/配信（TTFB/LCPを改善）

CDN 配信＋HTTP/2/3。Cache-Control を静的資産で長期化（immutable）。
API 応答は ETag/条件付き GET で差分転送。
Next.js の SSG/ISR/Route Handlers を活用して、動的でもキャッシュヒットを最大化。

// app/articles/[slug]/page.tsx (例): 静的化を意識したデータ取得
export const revalidate = 60; // ISR: 60秒ごとに再生成

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

AITuberを作ってみたらプロンプトエンジニアリングがよくわかった件

6. サードパーティの統制（しばしば最大のボトルネック）

タグマネージャやチャット、ABテスト、計測系は「本当に必要か」を棚卸し。
async/defer、遅延ロード、許可リスト方式で最小限に。
影響の大きいタグは同等効果の軽量代替を検討。

// next/script で制御
import Script from 'next/script';

<Script src="https://www.google-analytics.com/analytics.js" strategy="afterInteractive" />
<Script id="ab-test" strategy="lazyOnload">{`
  // 遅延ロードで初期体験を守る
`}</Script>

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

7. ルーティング/レンダリング戦略

SSR/SSG/ISR/Edge をケースバイケースで使い分け。初期表示はHTMLで、後続をクライアントで強化。
ストリーミング（Server Components + Suspense）で体感速度向上。
大きなリストは仮想化（react-virtualized など）を検討。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Cloudflare Workers+Pagesで旅行メモのサイトを作ってみよう！技術の泉シリーズ

8. データ取得の最適化（INP改善に寄与）

まとめて取得・キャッシュ（HTTP/DB）・差分更新。N+1 回避。
極端なスパムポーリングを避け、サーバープッシュ/サブスクリプションを検討。
エラーバックオフとタイムアウトでメインスレッド占有を抑制。

// サーバー側キャッシュの例（Route Handler）
import 'server-only';
let cached: any = null;

export async function GET() {
  if (cached) return Response.json(cached, { headers: { 'Cache-Control': 'max-age=60' } });
  const data = await fetch('https://api.example.com/data', { cache: 'no-store' }).then(r => r.json());
  cached = data;
  return Response.json(data, { headers: { 'Cache-Control': 'max-age=60' } });
}

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Vite+TypeScript+Babylon.jsでWebARをはじめる本技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

9. 予算（Performance Budget）の設定

JS: 初期ロード ≤ 170KB（gzip）を目安に開始、段階的に引き下げ。
画像: ファーストビュー合計 ≤ 250KB を目安に。
LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1 を運用目標に。

// budget.sample.json（例）
{
  "js": 170000,
  "img": 250000,
  "lcp": 2500,
  "inp": 200,
  "cls": 0.1
}

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

作って学ぶ　Next.js/React　Webサイト構築

10. CI での継続的監視

Lighthouse CI / PageSpeed API を使い、PRごとにスコアと差分を検知。
しきい値を超えたらブロック or 警告。パフォーマンス劣化の早期発見が肝です。

npm i -D @lhci/cli
lhci autorun --collect.staticDistDir=out

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

生成AI・30の論点　2025-2026 (日本経済新聞出版)

11. よくある改善順序（テンプレ）

計測の自動化（フィールド＋ラボ）
画像（ヒーローの LCP 対策）
JS 削減（サーバーコンポーネント化・遅延）
フォント（preconnect / swap / サブセット）
キャッシュ/ISR（TTFB/LCP）
サードパーティ制御
データ取得と描画の分割（ストリーミング）

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Claude Code MCP AIエージェントコンテキスト戦略

まとめ

最短で成果を出すには「計測でボトルネックを特定 → 効果の大きい順に直す」を徹底することです。本チェックリストをスプリントの Definition of Done に組み込み、継続的な監視と改善を回すことで、Core Web Vitals を安定して良好に保てます。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

PythonでExcel、メール、Webを自動化する本 [ 中嶋英勝 ]