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.2k
Other Decks in Technology
See All in Technology
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
630
Wasmで社内ツールを作って配布しよう
askua
0
130
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
150
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
660
PHPでResult型やってみよう
higaki_program
0
190
そもそも AWS FIS について。なぜ今 FIS のハンズオンなのか?などなど
kazzpapa3
2
120
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
220
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
210
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
240
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
260
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
710
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Being A Developer After 40
akosma
90
590k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Raft: Consensus for Rubyists
vanstee
140
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