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