Next.jsで作ったブログのパフォーマンス改善 | みどりのさるのエンジニア

はじめに 年末年始にこの技術ブログを GatsbyJS から Next.js にリプレースを行っていました。その影響でLighthouseのパフォーマンス結果が低下してしまったので、原因の調査と改善を実施しました。 原因調査 Lighthouseの結果を考察 Lighthouseの詳細を見てみると 722.4kb という巨大なJSファイルが配信されていました。「Potential Saving 99.8kb」とあるように、このJFファイルの中の大部分が未使用コードになっています。 また巨大なjsファイルによりJavaScriptの「Script Evaluation」が 1,835ms と、長時間のレンダリングブロッキングが発生していました。 Webpack Bundle Analyzer 先ほどのLighthouseの結果で問題になっていた、巨大なjsファイルは chunks/pages

[maecchi]

Next.jsの改善が必要になったので情報収集