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
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
270
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
230
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
430
TypeScript 上達の道
ysknsid25
11
1.4k
SAE J1939シミュレーション環境構築
daikiokazaki
0
160
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
180
OpenTelemetry の Log を使いこなそう
biwashi
5
1k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
スプリントレビューを効果的にするために
miholovesq
9
1.6k
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.6k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.1k
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
220
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
For a Future-Friendly Web
brad_frost
179
9.8k
Six Lessons from altMBA
skipperchong
28
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Designing Experiences People Love
moore
142
24k
BBQ
matthewcrist
89
9.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