WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest

Transcript

1. WebPagetest で始める パフォーマンス計測 STORES.jp Meetup for Front-end Engineers #1 2019.10.24 1
2. • フロントエンドエンジニア • 本書いてます ◦ 技術書典 5, 6, 7 ◦ 技書博 1 中野 達也 (@howdy39) 2 自己紹介
3. 話すこと 1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES でやってきたパフォーマンス改善 3
4. 1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES でやってきたパフォーマンス改善 4
5. 5 パフォーマンス改善ができたのかどうかを 体感 のような曖昧なものにしない パフォーマンス計測が必要な理由 数値化 していないと改善できたとは言えない 目に見える形にすることで パフォーマンス改善の工数を確保する
6. 1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES でやってきたパフォーマンス改善 6
7. WebPagetest とは • Webサービス ◦ 無料 ◦ パフォーマンス計測の実行と結果表示 • API ◦ 無料 ◦ 1日200回まで • OSS ◦ 自前で用意したサーバーで実行できる 7
8. Webサービス 8
9. Webサービスの弱点 • スナップショットの計測 • 定期的な実行はできない → 定期的な実行をするにはAPIを使う必要がある 9
10. APIの弱点 10 • 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 • パフォーマンス計測をするだけ ◦ 計測結果の見える化（グラフ化）が必要 • 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要
11. つまり 11 やること が多い！
12. 1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES でやってきたパフォーマンス改善 12
13. 13 gas-webpagetest が APIの弱点を補ってくれます！
14. gas-webpagetest で問題を解決 • API を定期的に叩く実行環境が必要 ◦ Google Apps Script (GAS) • 計測結果の見える化（グラフ化）が必要 ◦ Data Studio • 計測結果の保存が必要 ◦ SpreadSheets 14
15. • GAS で Webpagetest の API を叩く • SpreadSheets に結果を保存する • Data Studio でグラフを描画する • OSS のツール gas-webpagetest とは 15
16. 図解 gas-webpagetest ① git clone ② clasp push ③ 定期的に API実行 ④ API結果書き込み ⑤ 読み込み 16
17. 17 SpreadSheets
18. 18 Data Studio
19. • パフォーマンス計測ができる！ ◦ 定期的な実行と計測結果の数値化 • 手軽に始められる！ ◦ サーバーの用意は不要 • 無料で始められる！ gas-webpagetest を使うと 19
20. 20 BOOTH https://techthetoaster.booth.pm STORES https://techthetoaster.stores.jp で本が購入できます！ 導入方法を詳しく知りたい方！
21. 1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES でやってきたパフォーマンス改善 21
22. 22 主にショップトップページを改善！
23. 23 描画時間を表すグラフ speedIndex: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 表示速度を 表すスコア 低いほど良い
24. 24 主に3つの改善を行った ①画像の最適化 34 → 20 ②GTM改善 20 → 16 ③Lazy Load 16 → 14
25. ①画像の最適化 • 必要十分な画像サイズに最適化 ◦ アップロードされた画像をそのままだしているところ があった • スマートフォン用に画像サイズを最適化 ◦ PCとSPで使うサイズを分岐 • 商品のレイアウトごとに最適化 ◦ カラム数が多い場合はアイテム画像を小さく 25
26. 画像の通信量が半分以下に減った 26
27. 28 Googleタグマネージャで使っているタグを整理 全てのタグを洗い出して、必要なもの以外を削除し た。（タグの大掃除） ②GTM改善
28. リクエスト数が減った 29
29. 30 ③Lazy Load
30. 画像の通信量が半分ぐらい減った 31
31. これらの施策をやった結果 33 描画速度が 2倍に！ ※Speed Indexが 34 から14 にDown
32. まとめ • パフォーマンスを改善する前に まずは計測から始めよう！ • gas-webpagetest は始めるのにうってつけ！ • 改善を繰り返して爆速にしていきたい人STORES に来てくれ！ （フロントだけじゃなくてサーバーサイドも） 34
33. ご清聴ありがとうございました！ 35