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

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

5abf9d4714b77a15beea063d08586560?s=128

howdy39

May 20, 2019
Tweet

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