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

by howdy39

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