Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
gas-webpagetestで パフォーマンス計測を始めよう / get-started-m...
Search
howdy39
May 20, 2019
Programming
0
2.5k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
May 20, 2019
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
580
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
190
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.6k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
690
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
680
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.7k
Promise
howdy39
1
390
カラーユニバーサルデザイン / color universal design
howdy39
0
950
Geolocation API
howdy39
0
110
Other Decks in Programming
See All in Programming
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
CSC509 Lecture 06
javiergs
PRO
0
240
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
180
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
860
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Mobile First: as difficult as doing things right
swwweet
224
10k
What's in a price? How to price your products and services
michaelherold
246
12k
Producing Creativity
orderedlist
PRO
347
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Embracing the Ebb and Flow
colly
88
4.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Raft: Consensus for Rubyists
vanstee
139
7.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Transcript
gas-webpagetestで パフォーマンス計測を始めよう! 2019.05.20 【エンジニア交流会】 Google Apps Script 活用ミートアップ #4
中野 達也 (@howdy39) 2 フロントエンドエンジニア 自己紹介
3 技術書典 6 技術書典 5 https://techthetoaster.org からPDF購入できます! 本書いてます
話すこと 4 1. WebPageTest とは 2. gas-webpagetest を使うと何が嬉し いのか
1. WebPageTest とは
▣ Webサービス ◦ 無料 ◦ パフォーマンス計測の実行と結果表示 ▣ API ◦ 無料
◦ 1日200回まで ▣ OSS ◦ 自前で用意したサーバーで実行できる WebPageTest とは 6
Webサービス 7 https://www.webpagetest.org
Webサービスの弱点 8 ▣ スナップショットの計測である ◦ 定期的な実行はできない → APIを使う必要がある
API 9 https://sites.google.com/a/webpagetest.org/docs/adv anced-features/webpagetest-restful-apis
APIの弱点 10 ▣ 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 ▣ パフォーマンス計測をするだけ ◦ 計測結果の見える化(グラフ化)が必要
▣ 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要
2. gas-webpagetest を使うと何が嬉しいのか
12 APIの弱点を補ってくれます!
13 ▣ 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 → GAS ▣ パフォーマンス計測をするだけ ◦
計測結果の見える化(グラフ化)が必要 → Data Studio ▣ 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要 → SpreadSheets
gas-webpagetest とは 14 ▣ GASを使った、Webパフォーマンス の計測・可視化ツール ▣ 構成要素 ◦ GAS(clasp)
◦ Data Studio ◦ SpreadSheets ▣ OSS https://github.com/uknmr/gas-webpagetest
15 gas-webpagetest ① git clone ② clasp push ③ API実行
④ API結果書き込み ⑤ 読み込み 図解
SpreadSheets 16
Data Studio 17
まとめ gas-webpagetest を使うと何が嬉しいのか
19 ▣ パフォーマンス計測ができる! ◦ 数値化 ◦ 定期的な実行 ▣ 手軽に始められる! ◦
サーバーの用意不要 ▣ 無料で始められる! ◦ WebPageTestのAPI ◦ GAS ◦ SpreadsSheets ◦ Data Studio
20 gas-webpagetest で パフォーマンス計測を 手軽に無料で始めよう! まとめ
21 ご清聴ありがとうございました!