はじめに

前回紹介したアプリを触っている中で，クリックしてからの反応速度が少し遅いなと思ったので，改善するためにやったことを紹介していきます．

原因の特定

まずなにに問題があるかを特定します．
今回使ったのはこちらのツールです．

Lighthouse は、Web アプリのパフォーマンス、品質、正確性を向上させるためのオープンソースの自動ツールです。
ページを監査するとき、Lighthouse はページに対して集中テストを実行し、ページのパフォーマンスに関するレポートを生成します。ここから、失敗したテストを、アプリを改善するために何ができるかを示す指標として使用できます。（公式より）

lighthouseで調べてみたら以下のようになりました

パフォーマンスは一応90を超えていますが，speed indexが6.9sと非常に遅いですね．
ここでサーバーレスポンスを見ると3秒と非常に遅くなってるので，いろいろ調べていきます．

next/bundle-analyzerを使用

容量の大きいモジュールを把握するために，公式が出しているbundle-analyzerを使用します．

公式の通りに設定して以下のコードを設定します．

(set ANALYZE=true) && npm run build

このコード実行をすると，自動でブラウザが3つ開いて，結果が見れます．今回はサーバサイドを見ていきたいと思います．

これを見てreact-iconsが原因かな，と思い一度すべて消し実行しましたが，クリックしてからの反応速度が遅いのは変わらなかったです．

いろいろ原因をいろいろ調べていくうちに以下のサイトにたどり着きました．

このサイトではFCPについて解説しています．

First Contentful Paint (視覚コンテンツの初期表示時間、FCP) は、知覚される読み込み速度を測定するための重要なユーザーを中心とした指標です。これは、FCP がページの読み込みタイムラインにおいて最初にコンテンツが読み込まれたと思われる時点 (ユーザーが画面上に何らかのコンテンツが表示されたことを確認するタイミング) を示すためです。FCP を高速にすることで、そのページが動作していることをユーザーに確信させることができるようになります。

ここで気になったのが「必要なオリジンに事前接続する」の欄です．
これまでonClickイベントでrouter.pushを行っていたのですが，新しく追加されたprefetch機能を追加していませんでした．ここまで調べておいて原因がとても基礎的な部分でお恥ずかしいです．．．
実際にprefetchを追加して実行してみるとヌルヌル動くようになりました！

最後に

prefetchを追加したことで画面遷移がとても速くなり，Next.jsの強みである「SPAのような感覚」で操作できるようになりました！原因はとても基礎的なところでしたが，調べている中で，bundle-analyzerの使い方だったり，パフォーマンスを上げるために必要な知識を身に付けることができたので，とてもよかったです．

ほかにも原因を特定するために実行したことを色々紹介します．

Next.jsでtraceファイルを解析

こちらの記事を参考にtraceファイルを解析してみました．
コンパイルにかかった時間と，どのコンパイルに時間がかかっているのかを詳細に知ることができます．今回は特に問題は見つからなかったので，もっと大規模なコードになり，コンパイルに時間がかかるようになってきたら使っていきたいですね．

VercelのSpeed insights

ホスティング元のvercelで，speed insightを確認してみました．

スコアは高く問題なさそうでしたが，

この部分に手がかりがないかなと思い調べたところ，先ほどのFCPについてのサイトを見つけ，解決するに至りました．