Next.jsポータルサイトでLCPを極限まで改善する：dynamic importsによる未使用JavaScriptの削減とSEO効果

Webサイトの表示速度は，ユーザー体験（UX）の快適さを決めるだけでなく，Googleの検索ランキングアルゴリズム（Core Web Vitals）においても重要な評価要素となっています．

特に，200以上の異なるツールを単一のポータルに集約しているZeroToolsのようなサイトでは，「各ツールで使われている多種多様なJavaScriptパッケージ（ONNX Runtime, PDF-lib, Tesseract.jsなど）が初期表示を著しく遅くする」という特有の課題に直面していました．

本記事では，Next.jsの機能である 動的インポート（dynamic imports） を活用して未使用のJavaScriptを劇的に削減し，ページの初期表示速度指標である LCP (Largest Contentful Paint) を極限まで改善したアプローチを解説します．

1. ポータルサイトで発生していたパフォーマンスのボトルネック

最適化前の段階では，Lighthouseレポートにおいて LCP が最大7.9秒と極端に遅く検出されていました．主な原因は以下の3点でした．

1. 「未使用のJavaScript」の読み込み:

トップページや特定のツールページを読み込む際，そのページで使われていない他のツール用の重いJSモジュール（例: 画像圧縮ライブラリ，PDF操作ツールなど）が同時にバンドルされてブラウザにダウンロードされていました．

2. サードパーティ広告（Google AdSense）のレンダリングブロック:

初期HTMLの解析中にAdSenseの重いスクリプトが即時実行され，ブラウザのメインスレッドを数秒間占有（ブロッキング）していました．

3. LCP画像（処理結果プレビューなど）の遅延読み込み:

初期描画において最優先で読み込まれるべきメイン画像に loading="lazy" が設定されており，ブラウザが画像のダウンロードを後回しにしていました．

2. LCPを劇的に改善した3つの技術的アプローチ

これらの課題を解決するため，Next.js (App Router) およびビルドパイプラインにおいて以下の改善策を施しました．

① `next/dynamic` によるコード分割（Code Splitting）

もっとも効果的だったのが，ツール本体をロードするコンポーネントを静的インポート（import）から，非同期の動的インポート（Dynamic Import）へと一括変換したことです．

typescriptRead-Only

// 改善前 (静的インポート: 初期ロードJSに含まれてしまう)
// import JSONFormatter from "@/components/tools/json-formatter"

// 改善後 (動的インポート: ページ遷移・ロード後に非同期で読み込まれる)
import dynamic from "next/dynamic"

const JSONFormatter = dynamic(
  () => import("@/components/tools/json-formatter").then((mod) => mod.JSONFormatter),
  {
    loading: () => <div className="h-40 flex items-center justify-center text-muted-foreground text-sm">読み込み中...</div>
  }
)

この変更により，ユーザーが特定のツールページ（例: /tools/json-formatter）を開いたときに，初めてそのツールに必要なJSだけが読み込まれる（遅延ロード）ようになります．

これにより，不要なJavaScriptの総量が 270KB以上削減 され，メインスレッドのコンパイルとハイドレーション負荷が劇的に低下しました．

*※注意点: Next.js App Routerのサーバーコンポーネント（page.tsx）で ssr: false オプションを使用すると，Turbopackビルド時にエラーが発生するため，サーバーコンポーネント内では ssr: false を使わず，コンポーネント内部でマウント制御（Client-side boundaries）を行う設計にしています．*

② サードパーティJSの読み込み遅延（Lazy Load）

Google AdSenseの読み込み戦略を，Next.jsの <Script> コンポーネントを用い，最も遅延実行される strategy="lazyOnload" に変更しました．

typescriptRead-Only

import Script from "next/script"

// ページの主要リソースがすべて読み込まれたアイドル状態の時に初めてロードされる
<Script
  src="https://pagead2.googlesyndication.com/.../show_ads.js"
  strategy="lazyOnload"
  crossOrigin="anonymous"
/>

これにより，初期描画とハイドレーションが完了する前に広告用の重いJSがスレッドに介入するのを防止し，競合エラー（TypeError: window.__chromium_devtools_metrics_reporter）も回避されました．

③ 画像の優先読み込み (Priority Hints)

ツール実行時にLCP要素となるプレビュー画像タグから loading="lazy" を排除し，fetchPriority="high" と loading="eager" を付与しました．

ブラウザはこれが「最も重要度の高い画像」であることを認識し，ネットワークのキューで最優先にリソースをダウンロードするようになります．

3. SEOおよびユーザー行動への影響

これらのパフォーマンス改善により，Lighthouseスコアは飛躍的に上昇します．

直帰率の低下: ページを開いてから操作可能になるまでの時間が「1秒未満」になるため，ユーザーがツールの読み込みを待てずに離脱する（直帰）リスクをほぼゼロにできます．
Google検索順位への好影響: Core Web Vitalsの重要メトリクスである LCP と CLS（レイアウトシフト）が「Good」判定になるため，検索クローラーからの評価が高まり，上位表示に大きく貢献します．

まとめ

便利ツールポータルにおけるパフォーマンス最適化は，「どのコードをいつ読み込ませるか」のコントロールに尽きます．

ZeroToolsでは，今後も「どれだけ機能が増えても表示速度が落ちない」設計を徹底し，快適で安全なツール体験を提供し続けます．