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

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

4. 4.

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

5. 5.

   1. WebPageTest とは

6. 6.

   ▣ Webサービス ◦ 無料 ◦ パフォーマンス計測の実行と結果表示 ▣ API ◦ 無料

   ◦ 1日200回まで ▣ OSS ◦ 自前で用意したサーバーで実行できる WebPageTest とは 6
7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

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

    ▣ 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要
11. 11.

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

12. 12.

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

13. 13.

    13 ▣ 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 → GAS ▣ パフォーマンス計測をするだけ ◦

    計測結果の見える化（グラフ化）が必要 → Data Studio ▣ 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要 → SpreadSheets
14. 14.

    gas-webpagetest とは 14 ▣ GASを使った、Webパフォーマンス の計測・可視化ツール ▣ 構成要素 ◦ GAS（clasp）

    ◦ Data Studio ◦ SpreadSheets ▣ OSS https://github.com/uknmr/gas-webpagetest
15. 15.

    15 gas-webpagetest ① git clone ② clasp push ③ API実行

    ④ API結果書き込み ⑤ 読み込み 図解
16. 16.

    SpreadSheets 16

17. 17.

    Data Studio 17

18. 18.

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

19. 19.

    19 ▣ パフォーマンス計測ができる！ ◦ 数値化 ◦ 定期的な実行 ▣ 手軽に始められる！ ◦

    サーバーの用意不要 ▣ 無料で始められる！ ◦ WebPageTestのAPI ◦ GAS ◦ SpreadsSheets ◦ Data Studio
20. 20.

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

21. 21.

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