Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Zennのパフォーマンスモニタリングでやっていること
Search
igarashi
November 21, 2024
Technology
0
1k
Zennのパフォーマンスモニタリングでやっていること
2024-11-21に行われた「
クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング
」の発表資料です。
igarashi
November 21, 2024
Tweet
Share
More Decks by igarashi
See All by igarashi
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
1.1k
Other Decks in Technology
See All in Technology
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
130
OpenHands🤲にContributeしてみた
kotauchisunsun
1
410
実践! AIエージェント導入記
1mono2prod
0
160
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
350
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
10k
A2Aのクライアントを自作する
rynsuke
1
170
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.8k
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
650
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1k
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
エンジニア向け技術スタック情報
kauche
1
250
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A designer walks into a library…
pauljervisheath
206
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
For a Future-Friendly Web
brad_frost
179
9.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Transcript
2024/11/21 クラスメソッド株式会社 新規事業部 Igarashi Ryosuke Zennのパフォーマンスモニタリングで やっていること クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング
お話すること 2 • サイトのパフォーマンス(速さ = Zennのアイデンティティ)を損なわな いようにするため、⽇々の開発で⾏っている 計測 と 改善
について ◦ Next.jsのバンドルサイズ ◦ サーバーのレイテンシー なにか1つでも持ち帰っていただけると幸いです 🙏 「うちではこんなことをやっているよ」とかも聞けたら嬉しいです ✨
Next.jsのバンドルサイズの計測と改善
バンドルサイズの計測 • バンドルファイルはNext.jsのビルドで⽣成される成果物 ◦ ページ描画の際にブラウザに読み込まれ実⾏される ◦ 速さの体験(= First Contentful Paint)に直結する
• PR毎にGitHub ActionsでNext.js Bundle Analysisを実⾏ ◦ バンドルサイズが肥⼤化していないことを確認 ◦ 特にグローバル‧ページのサイズ 4
バンドルサイズの計測 5
バンドルサイズを⼤きくしてみる 6
• さらに巨⼤な依存モジュールを追加してみる • ツリーシェイキングされてしまい思うように⼤きくできない ◦ ツリーシェイキングとは、ビルド時に未使⽤のソースコードを除外する処理のこと ◦ 依存関係のソースコードにも適⽤される バンドルサイズを⼤きくしてみる 7
バンドルサイズの基準値は? 8 • Next.js Bundle Analysisのデフォルトのバジェットサイズ ◦ グローバルとページを合わせて350KB • next
build first load JS colors #16647 ◦ https://github.com/vercel/next.js/discussions/16647
バンドルサイズの改善 9 • 初期描画に不要なコンポーネントは Dynamic Import にすることで、バン ドルファイルを分割し、遅延読み込みにする。 ◦ コメントのエディタ
◦ EmojiのPicker など
バンドルサイズの改善 10 • オーバースペックなライブラリを置き換え ◦ recoil -> jotai(-20KB) ◦ axios
-> fetch(-10KB)
サイトのレイテンシーの計測と改善
レイテンシー 12 • frontend(Next.js) / backend(Ruby on Rails) のレイテンシーの変化を 把握
• 毎週メールでレポートが届く • 問題が起きていれば変化があるので調べる ◦ レコード数増加に伴うDBの負荷増 ◦ キャッシュの設定ミス ◦ 外部環境の変化 ◦ など
レイテンシー 13 • frontend / backend のレイテンシーを直近の7⽇間と、1週間前とで⽐較し て表⽰
レイテンシー 14 • エンドポイント毎のレイテンシーとリクエスト数
レポートの仕組み 15 詳しくはこちら: BigQuery + Data Studioによるリクエストログのお⼿軽分析 https://zenn.dev/team_zenn/articles/analyze-access-log-with-bq-and-ds
Cloud SQLのQuery Insights 16 • 「平均実⾏時間」×「呼び出された回数」で負荷の⾼いクエリを抽出 • 実⾏プランも表⽰
まとめ
まとめ 18 • バンドルサイズを⼩さくしてページの初期描画時間を⼩さくしよう • Next.js(や周辺ツール)の最適化技術がすごい • 継続して⾒る習慣があると⼩さな変化にも気が付きやすい
さいごに告知
告知1 記事投稿コンテストを開催中 20 • 記事投稿コンテストをやってい ます。技術記事であればどなた でも参加できます。 https://zenn.dev/contests/contest2024
告知2 テックブログ運営⽀援を開始 • 投稿が継続しない、認知が進ま ない、などのお悩み解決をサ ポートします • ハッカソン開催、協賛スポン サーなどDevRel⽀援メニューも ご⽤意しています
21 https://zenn.dev/biz-lp または「zenn 法⼈」で検索
ありがとうございました。 おしまい 22