WebPagetest で始めるパフォーマンス計測STORES.jp Meetupfor Front-end Engineers #12019.10.241
View Slide
● フロントエンドエンジニア● 本書いてます○ 技術書典 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
13gas-webpagetest がAPIの弱点を補ってくれます!
gas-webpagetest で問題を解決● API を定期的に叩く実行環境が必要○ Google Apps Script (GAS)● 計測結果の見える化(グラフ化)が必要○ Data Studio● 計測結果の保存が必要○ SpreadSheets14
● GAS で Webpagetest の API を叩く● SpreadSheets に結果を保存する● Data Studio でグラフを描画する● OSS のツールgas-webpagetest とは15
図解gas-webpagetest① git clone② clasp push③ 定期的にAPI実行④ API結果書き込み⑤ 読み込み16
17SpreadSheets
18Data Studio
● パフォーマンス計測ができる!○ 定期的な実行と計測結果の数値化● 手軽に始められる!○ サーバーの用意は不要● 無料で始められる!gas-webpagetest を使うと19
20BOOTHhttps://techthetoaster.booth.pmSTOREShttps://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 Load16 → 14
①画像の最適化● 必要十分な画像サイズに最適化○ アップロードされた画像をそのままだしているところがあった● スマートフォン用に画像サイズを最適化○ PCとSPで使うサイズを分岐● 商品のレイアウトごとに最適化○ カラム数が多い場合はアイテム画像を小さく25
画像の通信量が半分以下に減った26
28Googleタグマネージャで使っているタグを整理全てのタグを洗い出して、必要なもの以外を削除した。(タグの大掃除)②GTM改善
リクエスト数が減った29
30③Lazy Load
画像の通信量が半分ぐらい減った31
これらの施策をやった結果33描画速度が2倍に!※Speed Indexが34 から14 にDown
まとめ● パフォーマンスを改善する前にまずは計測から始めよう!● gas-webpagetest は始めるのにうってつけ!● 改善を繰り返して爆速にしていきたい人STORESに来てくれ!(フロントだけじゃなくてサーバーサイドも)34
ご清聴ありがとうございました!35