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.3k
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
460
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
84
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.2k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
590
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
610
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.5k
Promise
howdy39
1
340
カラーユニバーサルデザイン / color universal design
howdy39
0
840
Geolocation API
howdy39
0
99
Other Decks in Programming
See All in Programming
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
260
Domain-Driven Transformation
hschwentner
2
1.9k
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Jakarta EE meets AI
ivargrimstad
0
180
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2.2k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
280
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
950
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
900
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Optimizing for Happiness
mojombo
376
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Cult of Friendly URLs
andyhume
78
6.2k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
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 ご清聴ありがとうございました!