0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Next.js製ウェブサイトのTTFB(Waiting for server response)を約900ms縮めた話

Posted at

自身で運営するウェブサイトのトップページがあまりに重いということがありました。
技術スタックは下記の通りです。

  • 言語 : 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を使って一度レンダリングさせた後にフェッチする必要があるのかな。など考えつつ、一旦は課題が解決できたので一件落着です。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?