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
610
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
October 24, 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
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.5k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.3k
Promise
howdy39
1
340
カラーユニバーサルデザイン / color universal design
howdy39
0
840
Geolocation API
howdy39
0
99
Other Decks in Technology
See All in Technology
Windows の新しい管理者保護モード
murachiakira
0
200
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
1.5k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
150
AIエージェント元年
shukob
0
140
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
450
Pwned Labsのすゝめ
ken5scal
0
230
短縮URLをお手軽に導入しよう
nakasho
0
140
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
120
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
140
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
190
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
170
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
13
3.7k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Ace a Technical Interview
jacobian
276
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Automating Front-end Workflow
addyosmani
1368
200k
Building an army of robots
kneath
303
45k
Code Reviewing Like a Champion
maltzj
521
39k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Adaptive Systems
keathley
40
2.4k
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