Webサイトが遅い？Next.jsで実現するCore Web Vitals爆速改善ガイド

自分では「サクサク動く」と思っているWebサイトも、スマートフォンの貧弱な回線や、スペックの低いPCで見ると驚くほど表示が遅いことがあります。

Amazonの過去の有名な調査に**「ページの読み込み速度が0.1秒遅れるだけで、売上が1%低下する」**というデータがあります。個人のブログであっても、表示に3秒以上かまうと半数以上のユーザーが「直帰（何も読まずにブラウザバック）」してしまうと言われています。

現在のGoogle検索エンジンは、この「表示速度」と「直感的な使いやすさ」を Core Web Vitals（コア・ウェブ・バイタル） という指標で数値化し、検索順位を決定する重要な要素として扱っています。

この記事では、パフォーマンス改善を強力にサポートするフレームワーク「Next.js」の標準機能をフル活用し、あなたのサイトを爆速にするための3つの具体的なアプローチを解説します。

1. 諸悪の根源：「巨大な画像」を最適化する（LCPの改善）

サイトが遅い原因の80%以上は「最適化されていない画像」の読み込みによるものです。スマホで撮影した数メガバイトもあるJPEG画像を、そのまま <img> タグで表示していませんか？

Core Web Vitalsの指標である LCP (Largest Contentful Paint: 最大のコンテンツが表示されるまでの時間) を改善するには、画像の圧縮と適切なリサイズが不可欠です。

Next.jsの `<Image />` コンポーネントを使い倒す

Next.jsには、画像最適化のための最強の武器である next/image が標準搭載されています。従来の <img> タグをこれに置き換えるだけで、以下の魔法のような最適化が「自動的」に行われます。

import Image from 'next/image'

// 良い例
export default function Hero() {
  return (
    <Image 
      src="/hero-image.jpg"
      alt="ヒーロー画像"
      width={1200}
      height={800}
      priority // ファーストビューに入る重要な画像に付ける（事前読み込み）
    />
  )
}

次世代フォーマットへの自動変換: ブラウザが対応していれば、容量が極めて小さい WebP（ウェッピー） などの最新の拡張子に変換して配信されます。
画面サイズに応じた自動リサイズ: スマホで見ているユーザーには、PC用の巨大な画像ではなく、スマホ幅にリサイズされた小さな画像を送り届けます。
遅延読み込み（Lazy Loading）: 画面のスクロール領域外にある画像は、ユーザーがそこまでスクロールしてくるまで読み込みを行いません。これにより初期表示が劇的に高速化します。

2. Webフォントの読み込みによる「ガク付き」を防ぐ（CLSの改善）

Google Fontsなどの美しい文字（Webフォント）を使うことはデザイン上重要ですが、外部サーバーへフォントファイルを取りに行き、ダウンロードが完了した瞬間に**「一瞬だけ透明だった文字が突然表示される（FOIT）」、あるいは「別のフォントから切り替わり、レイアウトがガクッとズレる（FOUT）」**という現象が起きがちです。

この「画面のズレ」は、CLS (Cumulative Layout Shift: 視覚的な安定性) という指標を悪化させます。

Next.jsの `next/font` でレイアウトシフトを撲滅

Next.js 13以降に搭載された next/font（自動フォント最適化）を使えば、この問題は魔法のように消え去ります。

import { Inter } from 'next/font/google'

// サブセット（必要な文字だけ）を指定して軽量化
const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    // クラスを適用するだけで設定完了
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

この設定を行うだけで、Next.jsがビルド時（デプロイ時）にGoogleからフォントファイルをダウンロードし、あなた自身のサーバー環境（Vercelなど）から一緒に配信してくれます。外部への通信が発生しないため非常に高速で、size-adjust という技術を用いて「文字が切り替わった時のガタつき」も自動で補正してくれます。

3. 「サードパーティ製スクリプト」の読み込みを遅らせる

自分の書いたコードに問題がなくても、外部から導入した「Googleアナリティクスの計測タグ」「AdSenseの広告タグ」「カスタマーサポート用のチャットツール」のJavaScriptが重すぎて、サイト全体の表示をブロックしてしまうことが多々あります。

Next.jsの `<Script />` コンポーネントで優先順位を操る

これらの外部スクリプトは、ユーザーにとって「最初に表示されるべきメインコンテンツ」ではありません。 Next.jsの next/script を使って、これらが読み込まれるタイミング（戦略）を遅らせましょう。

import Script from 'next/script'

export default function Layout() {
  return (
    <>
      {/* ページが完全に読み込まれ、ユーザーが操作可能になった後（一番最後）に読み込む */}
      <Script 
        src="https://example.com/analytics.js"
        strategy="lazyOnload" 
      />
    </>
  )
}

strategy="lazyOnload" を指定することで、ブラウザは「まずは記事のテキストや画像を最優先で表示し、ブラウザがヒマになったら裏側の通信でアナリティクスを読み込もう」という賢い動きをしてくれるようになります。

まとめ：高速化は「計測」から始まる

どれだけ高速化のテクニックを駆使しても、それが結果に結びついているかは「計測」しなければ分かりません。

まずは Google 公式の無料ツールである PageSpeed Insights に、あなたのWebサイトのURLを入力してみてください。（モバイルとPCの両方のスコアが見られます）。

「どの画像が重いのか」「どのスクリプトが描画を妨げているのか」が赤色や黄色の警告とともに具体的に表示されるはずです。Next.jsの標準機能が持つパワーを引き出し、目指せスコア100点満点の爆速サイト構築！