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

Transcript

1. gas-webpagetestで
   パフォーマンス計測を始めよう！
   2019.05.20
   【エンジニア交流会】
   Google Apps Script 活用ミートアップ #4
   

   View Slide

2. 中野 達也
   (@howdy39)
   2
   フロントエンドエンジニア
   自己紹介
   

   View Slide

3. 3
   技術書典 6 技術書典 5
   https://techthetoaster.org からPDF購入できます！
   本書いてます
   

   View Slide

4. 話すこと
   4
   1. WebPageTest とは
   2. gas-webpagetest を使うと何が嬉し
   いのか
   

   View Slide

5. 1. WebPageTest とは
   

   View Slide

6. ▣ Webサービス
   ○ 無料
   ○ パフォーマンス計測の実行と結果表示
   ▣ API
   ○ 無料
   ○ 1日200回まで
   ▣ OSS
   ○ 自前で用意したサーバーで実行できる
   WebPageTest とは
   6
   

   View Slide

7. Webサービス
   7
   https://www.webpagetest.org
   

   View Slide

8. Webサービスの弱点
   8
   ▣ スナップショットの計測である
   ○ 定期的な実行はできない
   → APIを使う必要がある
   

   View Slide

9. API
   9
   https://sites.google.com/a/webpagetest.org/docs/adv
   anced-features/webpagetest-restful-apis
   

   View Slide

10. APIの弱点
    10
    ▣ 実行環境は用意されていない
    ○ APIを定期的に叩く実行環境が必要
    ▣ パフォーマンス計測をするだけ
    ○ 計測結果の見える化（グラフ化）が必要
    ▣ 計測結果は1ヶ月で消える
    ○ 計測結果の保存が必要
    

    View Slide

11. 2. gas-webpagetest
    を使うと何が嬉しいのか
    

    View Slide

12. 12
    APIの弱点を補ってくれます！
    

    View Slide

13. 13
    ▣ 実行環境は用意されていない
    ○ APIを定期的に叩く実行環境が必要
    → GAS
    ▣ パフォーマンス計測をするだけ
    ○ 計測結果の見える化（グラフ化）が必要
    → Data Studio
    ▣ 計測結果は1ヶ月で消える
    ○ 計測結果の保存が必要
    → SpreadSheets
    

    View Slide

14. gas-webpagetest とは
    14
    ▣ GASを使った、Webパフォーマンス
    の計測・可視化ツール
    ▣ 構成要素
    ○ GAS（clasp）
    ○ Data Studio
    ○ SpreadSheets
    ▣ OSS
    https://github.com/uknmr/gas-webpagetest
    

    View Slide

15. 15
    gas-webpagetest
    ① git clone
    ② clasp push ③ API実行
    ④ API結果書き込み
    ⑤ 読み込み
    図解
    

    View Slide

16. SpreadSheets
    16
    

    View Slide

17. Data Studio
    17
    

    View Slide

18. まとめ
    gas-webpagetest
    を使うと何が嬉しいのか
    

    View Slide

19. 19
    ▣ パフォーマンス計測ができる！
    ○ 数値化
    ○ 定期的な実行
    ▣ 手軽に始められる！
    ○ サーバーの用意不要
    ▣ 無料で始められる！
    ○ WebPageTestのAPI
    ○ GAS
    ○ SpreadsSheets
    ○ Data Studio
    

    View Slide

20. 20
    gas-webpagetest で
    パフォーマンス計測を
    手軽に無料で始めよう！
    まとめ
    

    View Slide

21. 21
    ご清聴ありがとうございました！
    

    View Slide