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
680
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
October 24, 2019
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
570
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
180
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.6k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
680
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
940
Geolocation API
howdy39
0
110
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
540
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
560
AWSで始める実践Dagster入門
kitagawaz
1
680
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
440
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
370
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Producing Creativity
orderedlist
PRO
347
40k
Unsuck your backbone
ammeep
671
58k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A designer walks into a library…
pauljervisheath
207
24k
The World Runs on Bad Software
bkeepers
PRO
70
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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