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
WebPagetestで始めるパフォーマンス計測 / Performance measur...
Search
howdy39
October 24, 2019
Technology
4
690
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
October 24, 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
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.7k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.5k
Promise
howdy39
1
390
カラーユニバーサルデザイン / color universal design
howdy39
0
950
Geolocation API
howdy39
0
110
Other Decks in Technology
See All in Technology
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
250
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
450
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
520
React19.2のuseEffectEventを追う
maguroalternative
2
500
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
540
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
350
ソースを読むプロセスの例
sat
PRO
15
9.3k
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
1
460
Node.js 2025: What's new and what's next
ruyadorno
0
530
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Site-Speed That Sticks
csswizardry
13
910
Testing 201, or: Great Expectations
jmmastey
45
7.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Docker and Python
trallard
46
3.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Cost Of JavaScript in 2023
addyosmani
55
9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
How GitHub (no longer) Works
holman
315
140k
Transcript
WebPagetest で始める パフォーマンス計測 STORES.jp Meetup for Front-end Engineers #1 2019.10.24
1
• フロントエンドエンジニア • 本書いてます ◦ 技術書典 5, 6, 7 ◦
技書博 1 中野 達也 (@howdy39) 2 自己紹介
話すこと 1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4.
STORES でやってきたパフォーマンス改善 3
1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES
でやってきたパフォーマンス改善 4
5 パフォーマンス改善ができたのかどうかを 体感 のような曖昧なものにしない パフォーマンス計測が必要な理由 数値化 していないと改善できたとは言えない 目に見える形にすることで パフォーマンス改善の工数を確保する
1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES
でやってきたパフォーマンス改善 6
WebPagetest とは • Webサービス ◦ 無料 ◦ パフォーマンス計測の実行と結果表示 • API
◦ 無料 ◦ 1日200回まで • OSS ◦ 自前で用意したサーバーで実行できる 7
Webサービス 8
Webサービスの弱点 • スナップショットの計測 • 定期的な実行はできない → 定期的な実行をするにはAPIを使う必要がある 9
APIの弱点 10 • 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 • パフォーマンス計測をするだけ ◦ 計測結果の見える化(グラフ化)が必要
• 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要
つまり 11 やること が多い!
1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES
でやってきたパフォーマンス改善 12
13 gas-webpagetest が APIの弱点を補ってくれます!
gas-webpagetest で問題を解決 • API を定期的に叩く実行環境が必要 ◦ Google Apps Script (GAS)
• 計測結果の見える化(グラフ化)が必要 ◦ Data Studio • 計測結果の保存が必要 ◦ SpreadSheets 14
• GAS で Webpagetest の API を叩く • SpreadSheets に結果を保存する
• Data Studio でグラフを描画する • OSS のツール gas-webpagetest とは 15
図解 gas-webpagetest ① git clone ② clasp push ③ 定期的に
API実行 ④ API結果書き込み ⑤ 読み込み 16
17 SpreadSheets
18 Data Studio
• パフォーマンス計測ができる! ◦ 定期的な実行と計測結果の数値化 • 手軽に始められる! ◦ サーバーの用意は不要 • 無料で始められる!
gas-webpagetest を使うと 19
20 BOOTH https://techthetoaster.booth.pm STORES https://techthetoaster.stores.jp で本が購入できます! 導入方法を詳しく知りたい方!
1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES
でやってきたパフォーマンス改善 21
22 主にショップトップページを改善!
23 描画時間を表すグラフ speedIndex: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 表示速度を 表すスコア 低いほど良い
24 主に3つの改善を行った ①画像の最適化 34 → 20 ②GTM改善 20 → 16
③Lazy Load 16 → 14
①画像の最適化 • 必要十分な画像サイズに最適化 ◦ アップロードされた画像をそのままだしているところ があった • スマートフォン用に画像サイズを最適化 ◦ PCとSPで使うサイズを分岐
• 商品のレイアウトごとに最適化 ◦ カラム数が多い場合はアイテム画像を小さく 25
画像の通信量が半分以下に減った 26
28 Googleタグマネージャで使っているタグを整理 全てのタグを洗い出して、必要なもの以外を削除し た。(タグの大掃除) ②GTM改善
リクエスト数が減った 29
30 ③Lazy Load
画像の通信量が半分ぐらい減った 31
これらの施策をやった結果 33 描画速度が 2倍に! ※Speed Indexが 34 から14 にDown
まとめ • パフォーマンスを改善する前に まずは計測から始めよう! • gas-webpagetest は始めるのにうってつけ! • 改善を繰り返して爆速にしていきたい人STORES に来てくれ!
(フロントだけじゃなくてサーバーサイドも) 34
ご清聴ありがとうございました! 35