Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
gas-webpagetestで パフォーマンス計測を始めよう! 2019.05.20 【エンジニア交流会】 Google Apps Script 活用ミートアップ #4
Slide 2
Slide 2 text
中野 達也 (@howdy39) 2 フロントエンドエンジニア 自己紹介
Slide 3
Slide 3 text
3 技術書典 6 技術書典 5 https://techthetoaster.org からPDF購入できます! 本書いてます
Slide 4
Slide 4 text
話すこと 4 1. WebPageTest とは 2. gas-webpagetest を使うと何が嬉し いのか
Slide 5
Slide 5 text
1. WebPageTest とは
Slide 6
Slide 6 text
▣ Webサービス ○ 無料 ○ パフォーマンス計測の実行と結果表示 ▣ API ○ 無料 ○ 1日200回まで ▣ OSS ○ 自前で用意したサーバーで実行できる WebPageTest とは 6
Slide 7
Slide 7 text
Webサービス 7 https://www.webpagetest.org
Slide 8
Slide 8 text
Webサービスの弱点 8 ▣ スナップショットの計測である ○ 定期的な実行はできない → APIを使う必要がある
Slide 9
Slide 9 text
API 9 https://sites.google.com/a/webpagetest.org/docs/adv anced-features/webpagetest-restful-apis
Slide 10
Slide 10 text
APIの弱点 10 ▣ 実行環境は用意されていない ○ APIを定期的に叩く実行環境が必要 ▣ パフォーマンス計測をするだけ ○ 計測結果の見える化(グラフ化)が必要 ▣ 計測結果は1ヶ月で消える ○ 計測結果の保存が必要
Slide 11
Slide 11 text
2. gas-webpagetest を使うと何が嬉しいのか
Slide 12
Slide 12 text
12 APIの弱点を補ってくれます!
Slide 13
Slide 13 text
13 ▣ 実行環境は用意されていない ○ APIを定期的に叩く実行環境が必要 → GAS ▣ パフォーマンス計測をするだけ ○ 計測結果の見える化(グラフ化)が必要 → Data Studio ▣ 計測結果は1ヶ月で消える ○ 計測結果の保存が必要 → SpreadSheets
Slide 14
Slide 14 text
gas-webpagetest とは 14 ▣ GASを使った、Webパフォーマンス の計測・可視化ツール ▣ 構成要素 ○ GAS(clasp) ○ Data Studio ○ SpreadSheets ▣ OSS https://github.com/uknmr/gas-webpagetest
Slide 15
Slide 15 text
15 gas-webpagetest ① git clone ② clasp push ③ API実行 ④ API結果書き込み ⑤ 読み込み 図解
Slide 16
Slide 16 text
SpreadSheets 16
Slide 17
Slide 17 text
Data Studio 17
Slide 18
Slide 18 text
まとめ gas-webpagetest を使うと何が嬉しいのか
Slide 19
Slide 19 text
19 ▣ パフォーマンス計測ができる! ○ 数値化 ○ 定期的な実行 ▣ 手軽に始められる! ○ サーバーの用意不要 ▣ 無料で始められる! ○ WebPageTestのAPI ○ GAS ○ SpreadsSheets ○ Data Studio
Slide 20
Slide 20 text
20 gas-webpagetest で パフォーマンス計測を 手軽に無料で始めよう! まとめ
Slide 21
Slide 21 text
21 ご清聴ありがとうございました!