Zennのパフォーマンスモニタリングでやっていること

2024-11-21に行われた「クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング」の発表資料です。

1. 2024/11/21 クラスメソッド株式会社 新規事業部 Igarashi Ryosuke Zennのパフォーマンスモニタリングで やっていること クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング
2. お話すること 2 • サイトのパフォーマンス（速さ = Zennのアイデンティティ）を損なわな いようにするため、⽇々の開発で⾏っている 計測 と 改善 について ◦ Next.jsのバンドルサイズ ◦ サーバーのレイテンシー なにか１つでも持ち帰っていただけると幸いです 🙏 「うちではこんなことをやっているよ」とかも聞けたら嬉しいです ✨
3. Next.jsのバンドルサイズの計測と改善
4. バンドルサイズの計測 • バンドルファイルはNext.jsのビルドで⽣成される成果物 ◦ ページ描画の際にブラウザに読み込まれ実⾏される ◦ 速さの体験（= First Contentful Paint）に直結する • PR毎にGitHub ActionsでNext.js Bundle Analysisを実⾏ ◦ バンドルサイズが肥⼤化していないことを確認 ◦ 特にグローバル‧ページのサイズ 4
5. バンドルサイズの計測 5
6. バンドルサイズを⼤きくしてみる 6
7. • さらに巨⼤な依存モジュールを追加してみる • ツリーシェイキングされてしまい思うように⼤きくできない ◦ ツリーシェイキングとは、ビルド時に未使⽤のソースコードを除外する処理のこと ◦ 依存関係のソースコードにも適⽤される バンドルサイズを⼤きくしてみる 7
8. バンドルサイズの基準値は？ 8 • Next.js Bundle Analysisのデフォルトのバジェットサイズ ◦ グローバルとページを合わせて350KB • next build first load JS colors #16647 ◦ https://github.com/vercel/next.js/discussions/16647
9. バンドルサイズの改善 9 • 初期描画に不要なコンポーネントは Dynamic Import にすることで、バン ドルファイルを分割し、遅延読み込みにする。 ◦ コメントのエディタ ◦ EmojiのPicker など
10. バンドルサイズの改善 10 • オーバースペックなライブラリを置き換え ◦ recoil -> jotai（-20KB） ◦ axios -> fetch（-10KB）
11. サイトのレイテンシーの計測と改善
12. レイテンシー 12 • frontend（Next.js） / backend（Ruby on Rails） のレイテンシーの変化を 把握 • 毎週メールでレポートが届く • 問題が起きていれば変化があるので調べる ◦ レコード数増加に伴うDBの負荷増 ◦ キャッシュの設定ミス ◦ 外部環境の変化 ◦ など
13. レイテンシー 13 • frontend / backend のレイテンシーを直近の7⽇間と、1週間前とで⽐較し て表⽰
14. レイテンシー 14 • エンドポイント毎のレイテンシーとリクエスト数
15. レポートの仕組み 15 詳しくはこちら: BigQuery + Data Studioによるリクエストログのお⼿軽分析 https://zenn.dev/team_zenn/articles/analyze-access-log-with-bq-and-ds
16. Cloud SQLのQuery Insights 16 • 「平均実⾏時間」×「呼び出された回数」で負荷の⾼いクエリを抽出 • 実⾏プランも表⽰
17. まとめ
18. まとめ 18 • バンドルサイズを⼩さくしてページの初期描画時間を⼩さくしよう • Next.js（や周辺ツール）の最適化技術がすごい • 継続して⾒る習慣があると⼩さな変化にも気が付きやすい
19. さいごに告知
20. 告知1 記事投稿コンテストを開催中 20 • 記事投稿コンテストをやってい ます。技術記事であればどなた でも参加できます。 https://zenn.dev/contests/contest2024
21. 告知2 テックブログ運営⽀援を開始 • 投稿が継続しない、認知が進ま ない、などのお悩み解決をサ ポートします • ハッカソン開催、協賛スポン サーなどDevRel⽀援メニューも ご⽤意しています 21 https://zenn.dev/biz-lp または「zenn 法⼈」で検索
22. ありがとうございました。 おしまい 22