はじめに 年末年始にこの技術ブログを 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
![Next.jsで作ったブログのパフォーマンス改善 | みどりのさるのエンジニア](https://cdn-ak-scissors.b.st-hatena.com/image/square/15844166178fe1408afa75d66a3668234e3eaf0b/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fdspeq5lct%2Fimage%2Fupload%2Fl_text%3AMPLUSRounded1c-Bold.ttf_52%3ANext.js%25E3%2581%25A7%25E4%25BD%259C%25E3%2581%25A3%25E3%2581%259F%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E3%2581%25AE%25E3%2583%2591%25E3%2583%2595%25E3%2582%25A9%25E3%2583%25BC%25E3%2583%259E%25E3%2583%25B3%25E3%2582%25B9%25E6%2594%25B9%25E5%2596%2584%2Cco_rgb%3A000%2Cw_1020%2Cc_fit%2Cy_-100%2Fv1638629595%2Fblog-ogp.jpg)