Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
May 20, 2019
Programming
1
1.4k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
May 20, 2019
Tweet
Share
More Decks by howdy39
See All by howdy39
howdy39
4
320
howdy39
5
6.3k
howdy39
0
130
howdy39
0
190
howdy39
0
43
howdy39
0
70
howdy39
0
36
howdy39
0
90
howdy39
1
750
Other Decks in Programming
See All in Programming
makomakok
1
250
xrdnk
0
110
antonshilov
1
120
danilop
1
740
tourismgeek
1
130
dbrumann
0
110
prof18
0
1.3k
mizotake
2
310
grapecity_dev
0
190
legalforce
PRO
0
640
osyo
0
330
abeta
1
200
Featured
See All Featured
brad_frost
157
6.4k
hursman
106
9.3k
geeforr
332
29k
addyosmani
1346
190k
keithpitt
401
20k
lara
590
61k
geoffreycrofte
21
920
caitiem20
308
17k
rasmusluckow
318
18k
danielanewman
200
20k
brianwarren
82
4.7k
jnunemaker
PRO
40
4.6k
Transcript
gas-webpagetestで パフォーマンス計測を始めよう! 2019.05.20 【エンジニア交流会】 Google Apps Script 活用ミートアップ #4
中野 達也 (@howdy39) 2 フロントエンドエンジニア 自己紹介
3 技術書典 6 技術書典 5 https://techthetoaster.org からPDF購入できます! 本書いてます
話すこと 4 1. WebPageTest とは 2. gas-webpagetest を使うと何が嬉し いのか
1. WebPageTest とは
▣ Webサービス ◦ 無料 ◦ パフォーマンス計測の実行と結果表示 ▣ API ◦ 無料
◦ 1日200回まで ▣ OSS ◦ 自前で用意したサーバーで実行できる WebPageTest とは 6
Webサービス 7 https://www.webpagetest.org
Webサービスの弱点 8 ▣ スナップショットの計測である ◦ 定期的な実行はできない → APIを使う必要がある
API 9 https://sites.google.com/a/webpagetest.org/docs/adv anced-features/webpagetest-restful-apis
APIの弱点 10 ▣ 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 ▣ パフォーマンス計測をするだけ ◦ 計測結果の見える化(グラフ化)が必要
▣ 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要
2. gas-webpagetest を使うと何が嬉しいのか
12 APIの弱点を補ってくれます!
13 ▣ 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 → GAS ▣ パフォーマンス計測をするだけ ◦
計測結果の見える化(グラフ化)が必要 → Data Studio ▣ 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要 → SpreadSheets
gas-webpagetest とは 14 ▣ GASを使った、Webパフォーマンス の計測・可視化ツール ▣ 構成要素 ◦ GAS(clasp)
◦ Data Studio ◦ SpreadSheets ▣ OSS https://github.com/uknmr/gas-webpagetest
15 gas-webpagetest ① git clone ② clasp push ③ API実行
④ API結果書き込み ⑤ 読み込み 図解
SpreadSheets 16
Data Studio 17
まとめ gas-webpagetest を使うと何が嬉しいのか
19 ▣ パフォーマンス計測ができる! ◦ 数値化 ◦ 定期的な実行 ▣ 手軽に始められる! ◦
サーバーの用意不要 ▣ 無料で始められる! ◦ WebPageTestのAPI ◦ GAS ◦ SpreadsSheets ◦ Data Studio
20 gas-webpagetest で パフォーマンス計測を 手軽に無料で始めよう! まとめ
21 ご清聴ありがとうございました!