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 ご清聴ありがとうございました！