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
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.2k
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
530
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
250
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
100
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
720
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
生成AIでwebアプリケーションを作ってみた
tajimon
2
140
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
200
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
3
470
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Designing for Performance
lara
609
69k
Docker and Python
trallard
44
3.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Navigating Team Friction
lara
187
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Done Done
chrislema
184
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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