Next.jsで「使用していないJavaScriptの削除」に別pageのjsが含まれている場合

公開日時

Next.jsで作ったサービスのトップページを PageSpeed Insights で分析したところ67点だった。

lighthouse1

SSGかつ数件のデータをリスト表示しているだけなので、もっと良い点になると思っていたが悲しい結果になってしまった。

「改善できる項目」を確認すると「使用していないJavaScriptの削除」に別ページのjsが含まれており、かつこのjsのサイズが大きかった。

トップページからこの別ページにはLinkを設定していた。

lighthouse2 

next/Linkはデフォルトでprefetchが有効だということを思い出し、これが原因だと気づいた。

そこで↓のようにprefetchの無効化を実施。

<Link href="/some" prefetch={false}>
  Some Page
</Link>

再度PageSpeed Insightsで分析したところ94点まで改善した。

lighthouse3

アクセス頻度が低いページへのリンクの場合はprefetchを無効化するのを忘れないようにしよう。


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった