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