gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest

Transcript

1. gas-webpagetestで パフォーマンス計測を始めよう！ 2019.05.20 【エンジニア交流会】 Google Apps Script 活用ミートアップ #4
2. 中野 達也 (@howdy39) 2 フロントエンドエンジニア 自己紹介
3. 3 技術書典 6 技術書典 5 https://techthetoaster.org からPDF購入できます！ 本書いてます
4. 話すこと 4 1. WebPageTest とは 2. gas-webpagetest を使うと何が嬉し いのか
5. 1. WebPageTest とは
6. ▣ Webサービス ◦ 無料 ◦ パフォーマンス計測の実行と結果表示 ▣ API ◦ 無料 ◦ 1日200回まで ▣ OSS ◦ 自前で用意したサーバーで実行できる WebPageTest とは 6
7. Webサービス 7 https://www.webpagetest.org
8. Webサービスの弱点 8 ▣ スナップショットの計測である ◦ 定期的な実行はできない → APIを使う必要がある
9. API 9 https://sites.google.com/a/webpagetest.org/docs/adv anced-features/webpagetest-restful-apis
10. APIの弱点 10 ▣ 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 ▣ パフォーマンス計測をするだけ ◦ 計測結果の見える化（グラフ化）が必要 ▣ 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要
11. 2. gas-webpagetest を使うと何が嬉しいのか
12. 12 APIの弱点を補ってくれます！
13. 13 ▣ 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 → GAS ▣ パフォーマンス計測をするだけ ◦ 計測結果の見える化（グラフ化）が必要 → Data Studio ▣ 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要 → SpreadSheets
14. gas-webpagetest とは 14 ▣ GASを使った、Webパフォーマンス の計測・可視化ツール ▣ 構成要素 ◦ GAS（clasp） ◦ Data Studio ◦ SpreadSheets ▣ OSS https://github.com/uknmr/gas-webpagetest
15. 15 gas-webpagetest ① git clone ② clasp push ③ API実行 ④ API結果書き込み ⑤ 読み込み 図解
16. SpreadSheets 16
17. Data Studio 17
18. まとめ gas-webpagetest を使うと何が嬉しいのか
19. 19 ▣ パフォーマンス計測ができる！ ◦ 数値化 ◦ 定期的な実行 ▣ 手軽に始められる！ ◦ サーバーの用意不要 ▣ 無料で始められる！ ◦ WebPageTestのAPI ◦ GAS ◦ SpreadsSheets ◦ Data Studio
20. 20 gas-webpagetest で パフォーマンス計測を 手軽に無料で始めよう！ まとめ
21. 21 ご清聴ありがとうございました！