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
960
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
890
Other Decks in Technology
See All in Technology
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
710
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
570
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
160
Road to Go Gem #rubykaigi
sue445
0
390
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
700
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
1
140
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
800
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
5
520
SREの視点で考えるSIEM活用術 〜AWS環境でのセキュリティ強化〜
coconala_engineer
1
290
Automatically generating types by running tests
sinsoku
2
2.6k
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
140
MCPを活用した検索システムの作り方/How to implement search systems with MCP #catalks
quiver
11
6.4k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Documentation Writing (for coders)
carmenintech
69
4.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How STYLIGHT went responsive
nonsquared
99
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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