Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

howdy39

May 20, 2019
Tweet

More Decks by howdy39

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 1. WebPageTest とは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. SpreadSheets
    16

    View full-size slide

  17. Data Studio
    17

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide