自身で運営するウェブサイトのトップページがあまりに重いということがありました。
技術スタックは下記の通りです。
- 言語 : Typescript(Next.js)
- サーバー : Vercel(無料)
ひとまずPageSpeed Insightsでパフォーマンスを計測すると85。悪くない。
ただ、以下の改善項目が記載されておりました。
- 最初のサーバー応答時間を速くしてください : 1.13 s
- 使用していない JavaScript の削減 : 1.05 s
よくわからないので続いて、ディベロッパーツールのネットワークでTimeを確認。
- ドメインのTime : 937ms
- Waiting for server response : 927.47 ms
これはめちゃくちゃ遅い。ちなみにQiitaのトップページだとこのくらい。 - ドメインのTime : 325ms
- Waiting for server response : 244.47 ms
結果として、トップページのindex.tsxでgetServerSidePropsで行なっている処理をgetStaticPropsに書き直すことでここまで改善しました。
- ドメインのTime : 33.2ms
- Waiting for server response : 22.41 ms
頻繁にデータの更新が起こる値をフェッチしているわけではなかったのでgetStaticPropsを使うように直したところ、約900ms、TTFBが縮まりました。
900ms違うとだいぶ違います。1秒以上かかると変なサイトなのかな?とだいぶ不安になるレベルです。
頻繁に更新が走る値をフェッチするならuseEffectを使って一度レンダリングさせた後にフェッチする必要があるのかな。など考えつつ、一旦は課題が解決できたので一件落着です。