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.4k
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
500
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
150
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.4k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
620
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
640
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.6k
Promise
howdy39
1
340
カラーユニバーサルデザイン / color universal design
howdy39
0
860
Geolocation API
howdy39
0
110
Other Decks in Programming
See All in Programming
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
gen_statem - OTP's Unsung Hero
whatyouhide
1
190
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
140
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.7k
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
180
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
100
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
3.3k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
230
List とは何か? / PHPerKaigi 2025
meihei3
0
620
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.5k
PHPのガベージコレクションを深掘りしよう
rinchoku
0
260
State of Namespace
tagomoris
3
530
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
640
Faster Mobile Websites
deanohume
306
31k
Code Review Best Practice
trishagee
67
18k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Automating Front-end Workflow
addyosmani
1369
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
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 ご清聴ありがとうございました!