概要

Next.jsでWebパフォーマンスを向上させ、Lighthouseスコアを改善するためには、画像やJavaScriptの最適化、キャッシュの管理が重要です。特に、Core Web Vitals（LCP、FID、CLS）の改善を通じて、より良いユーザーエクスペリエンスを提供できます。この記事では、Lighthouseスコアを向上させるための具体的な方法を紹介します。

画像の最適化

Next.jsでは、next/imageコンポーネントを使用して画像の最適化を自動的に行えます。このコンポーネントは、画像の遅延読み込み（Lazy Loading）や最新フォーマット（WebP、AVIF）の自動変換をサポートしており、パフォーマンスに大きく貢献します。

例

import Image from 'next/image';
const OptimizedImage = () => (
  <Image
    src="/path/to/image.jpg"
    alt="画像の説明"
    width={800}
    height={600}
    layout="responsive"
    loading="lazy"
  />
);

これにより、画像がビューポートに入った時点で読み込まれ、初期表示の速度を向上させます。

Dynamic ImportによるJavaScriptの最適化

次に、不要なJavaScriptの読み込みを減らすために、dynamic importを活用します。これにより、使用されていないコードの初期ロードを防ぎ、必要なときだけコンポーネントやライブラリを読み込みます。これにより、バンドルサイズが縮小され、Lighthouseの「Render-Blocking Resources」の指摘を回避できます。

例

import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
});

この方法を使えば、特定のページやコンポーネントが必要になるタイミングでのみJavaScriptをロードするため、初期レンダリングがより高速になります。

キャッシュと静的ファイルの管理

Lighthouseでは、キャッシュポリシーが不十分な場合もスコアが下がる原因になります。Next.jsの静的ファイルに効率的なキャッシュポリシーを設定することで、ファイルの再取得を抑え、パフォーマンスを改善できます。

設定例

module.exports = {
  headers: [
    {
      source: "/(.*).(jpg|png|css|js)",
      headers: [
        {
          key: "Cache-Control",
          value: "max-age=31536000, immutable",
        },
      ],
    },
  ],
};

この設定により、静的アセットに対して長期間のキャッシュを設定し、サーバーへの負荷を減らします。

その他のテクニック

  1. CSSとJavaScriptのミニファイ
    Next.jsは、プロダクションビルド時に自動的にCSSやJavaScriptをミニファイしますが、swcMinifyを有効にすることで、さらに最適化されたコードが生成されます。
  2. フォント最適化
    Webフォントの遅延読み込みやサブセット化を行い、フォントの読み込み時間を短縮します。
  3. サードパーティスクリプトの最適化
    広告や解析ツールなど、サードパーティのスクリプトはパフォーマンスに大きな影響を与えるため、可能な限り遅延読み込み（defer）を使用し、レンダリングをブロックしないようにします。

結論

Lighthouseスコアを改善するには、画像やJavaScriptの最適化、キャッシュ管理を徹底することが重要です。Next.jsが提供する機能を活用し、効率的にWebアプリケーションを最適化して、ユーザーにとって快適な体験を提供しましょう。