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
Webサイトパフォーマンスを継続的に計測したい!!! / I want to continuo...
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Kentaro Matsushita
December 26, 2020
Programming
2
600
Webサイトパフォーマンスを継続的に計測したい!!! / I want to continuously measure my website performance!!!
Kanazawa.js Remote Meetup #09
https://kanazawajs.connpass.com/event/197989/
Kentaro Matsushita
December 26, 2020
Tweet
Share
More Decks by Kentaro Matsushita
See All by Kentaro Matsushita
開発のアジリティ向上のためのシステムリプレイス ~DMM GAMESの事例~
kentarom
0
840
Denoで簡単なCLIツールを作ってみる / Try to make a simple CLI tool with Deno
kentarom
0
1.1k
GatsbyJSで作った個人ブログの構成を色々見直してみた / Improve my personal blog made with GatsbyJS
kentarom
1
450
Actions ToolkitではじめるGitHub Action開発 / Getting started creating a GitHub Action with Actions Toolkit
kentarom
2
2k
GitHub Gistを使って、アクティビティを可視化しよう / Let's try visualizing your activity using the GitHub Gist
kentarom
1
890
OGP画像を生成するNode.jsのライブラリを作ってみた / Create a Node.js module for generating Open Graph image
kentarom
1
7.6k
チームをよしなにする立場を経験して学んだこと / Things I have learned in leading the team
kentarom
0
820
AWSの既存サービスを活用して、 障害検知・復旧を迅速化するカラクリ / JAWS-UG Kanazawa x OpsJAWS
kentarom
2
4.8k
DMM.comの認証基盤を支えるエラー通知の仕組み / AWS Dev Day Tokyo 2018 Lightning Talk
kentarom
2
14k
Other Decks in Programming
See All in Programming
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
tanishiking
0
130
エンジニアの「手元の自動化」を加速するn8n 2026.02.27
symy2co
0
180
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
ya_ma23
0
1.2k
Rethinking API Platform Filters
vinceamstoutz
0
980
Java 21/25 Virtual Threads 소개
debop
0
280
Understanding Apache Lucene - More than just full-text search
spinscale
0
140
今年もTECHSCOREブログを書き続けます!
hiraoku101
0
180
Codex の「自走力」を高める
yorifuji
0
1.3k
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
o8n
4
1.4k
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
masasuzu
0
200
それはエンジニアリングの糧である:AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
nrslib
1
600
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記:那些困在 Alpha 加護病房太久的 Metrics
tico88612
0
240
Featured
See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.1k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
86
The untapped power of vector embeddings
frankvandijk
2
1.6k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
440
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
ラッコキーワード サービス紹介資料
rakko
1
2.8M
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
89
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
190
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.5k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
140
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
96
It's Worth the Effort
3n
188
29k
Transcript
Webサイトパフォーマンスを継続的に 計測したい!!! Kanazawa.js Meetup #09 2020.12.26 @_kentaro_m
⾃⼰紹介 @_kentaro_m ⾦沢市内のゲーム会社で働くフロントエンドエンジニア レガシーなシステムを新しくする仕事をしてます 最近触っている技術 Next.js / GraphQL / Kubernetes
今⽇話すこと Webサイトパフォーマンスを継続的に計測する基盤をサーバー レスアーキテクチャで作った話 - Qiita アドベントカレンダーの内容を簡潔に話します。
Q. みなさんの職場ではWebサイトパ フォーマンス計測していますか?
A. うちは計測してます (但し書きあり)
A. うちは計測してます ⼤きなリリースなどの節⽬のタイミングでは⼈⼒で計測 継続的に計測できていない ※ 現状Chrome DevToolsからLighthouse⼿動実⾏
閑話休題:パフォーマンス計測⼿法 Synthetic Monitoring Real User Monitoring ⽬的に応じて、使い分ける必要がある。
Synthetic Monitoring Synthetic Monitoring 定められた環境からWebサイトにリクエストを送信して、 パフォーマンス計測 計測環境はばらつきが少ないが、ユーザー環境との剥離が ある可能性 ツール例:WebPageTestやLighthouse
Real User Monitoring Real User Monitoring ユーザー閲覧環境で何らかの仕組みが実⾏され、計測サー バーにパフォーマンスが送信される ユーザー環境によって、結果にばらつきが出る ツール例:Datadog
RUM
パフォーマンス計測する理由 パフォーマンスはユーザー体験に⼤きな影響を与える要素 GoogleはCore Web Vitalsを発表 Webサイトのユーザー体験の質を定量的に⽰す指標 ⾃社サイトのユーザー体験改善のために時系列でパフォーマ ンス変化を分かるようにしたい 継続的に計測しないと良し悪しがわからない
パフォーマンス計測基盤を作ってみる (アドベントカレンダーのネタにちょうどいい!)
システム要件 特定の複数URLに対して、Lighthouseを定期実⾏ 実⾏結果のストレージ保存や外部サービス送信サポート 外部サービスはDatadogやSlackなどを想定 何らかのツールを使って、実⾏結果が可視化できること 各指標ごとにグラフを作れて、時系列で推移が確認できる ものをイメージ
システム構成 (画⾯共有します。図が⼤きくて収まらなかった...)
処理フロー . 複数のURLのLighthouse実⾏命令をキューに送信 . キューからメッセージ受信、ワークフロー呼び出し . Lighthouseを実⾏ . Lighthouse実⾏結果を外部サービスに送信
定期実⾏管理 CloudWatch Eventsに登録のcron式ベースで定期実⾏ サイトリストベースでLighthouse実⾏命令をSQSに送信 SQSからメッセージ受信し、ワークフロー並列呼び出し sites: - title: Foo url:
https://foo.example.com/ - title: Bar url: https://bar.example.com/ - title: Baz url: https://baz.example.com/
Lighthouse実⾏ Chromiumをヘッドレス起動、対象URLへLighthouse実⾏ Lambda向けに最適化されたChromiumバイナリ使⽤ Lambdaメモリ割り当て1GB、タイムアウト600秒
外部サービス連携
外部サービス連携 Lighthouseの実⾏と実⾏結果の外部サービス連携 実⾏結果をS3やスプレッドシートへの送信サポート 複数のLambda連携はStep Functionsを利⽤ Lambdaの呼び出し順序や⼊出⼒値の調整 JSON形式の⾔語で定義 責務ベースでLambda分割、疎結合な連携を実現 Lambdaを増やすと、他のサービスと連携可能
データ可視化
データ可視化 Data PortalでLighthouse実⾏結果を可視化 実⾏結果データセットへBigQueryを実⾏ BigQuery Data Transfer ServiceでS3からデータ取り込み 実⾏結果はJSON形式でS3に保存 1⽇1回定期実⾏でBigQueryに取り込み
さいごに Lighthouse実⾏結果の各指標をData Portalで可視化できた まずは今後の改善に向けて、現状把握に利⽤していきたい サーバーレスアーキテクチャでやりたいことが実現できた Lighthouseの並列実⾏ 拡張性を有した外部サービス連携 Auto Web Perfというパフォーマンス計測ツールを統合する
便利なやつが最近出た これで良いのではという気持ちになっている
パフォーマンス改善の道のりはまだ始 まったばかりだ... 終