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

Transcript

1. 1.

   WebPagetest で始める パフォーマンス計測 STORES.jp Meetup for Front-end Engineers #1 2019.10.24

   1
2. 2.

   • フロントエンドエンジニア • 本書いてます ◦ 技術書典 5, 6, 7 ◦

   技書博 1 中野 達也 (@howdy39) 2 自己紹介
3. 3.

   話すこと 1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4.

   STORES でやってきたパフォーマンス改善 3
4. 4.

   1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES

   でやってきたパフォーマンス改善 4
5. 5.

   5 パフォーマンス改善ができたのかどうかを 体感 のような曖昧なものにしない パフォーマンス計測が必要な理由 数値化 していないと改善できたとは言えない 目に見える形にすることで パフォーマンス改善の工数を確保する

6. 6.

   1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES

   でやってきたパフォーマンス改善 6
7. 7.

   WebPagetest とは • Webサービス ◦ 無料 ◦ パフォーマンス計測の実行と結果表示 • API

   ◦ 無料 ◦ 1日200回まで • OSS ◦ 自前で用意したサーバーで実行できる 7
8. 8.

   Webサービス 8

9. 9.

   Webサービスの弱点 • スナップショットの計測 • 定期的な実行はできない → 定期的な実行をするにはAPIを使う必要がある 9

10. 10.

    APIの弱点 10 • 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 • パフォーマンス計測をするだけ ◦ 計測結果の見える化（グラフ化）が必要

    • 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要
11. 11.

    つまり 11 やること が多い！

12. 12.

    1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES

    でやってきたパフォーマンス改善 12
13. 13.

    13 gas-webpagetest が APIの弱点を補ってくれます！

14. 14.

    gas-webpagetest で問題を解決 • API を定期的に叩く実行環境が必要 ◦ Google Apps Script (GAS)

    • 計測結果の見える化（グラフ化）が必要 ◦ Data Studio • 計測結果の保存が必要 ◦ SpreadSheets 14
15. 15.

    • GAS で Webpagetest の API を叩く • SpreadSheets に結果を保存する

    • Data Studio でグラフを描画する • OSS のツール gas-webpagetest とは 15
16. 16.

    図解 gas-webpagetest ① git clone ② clasp push ③ 定期的に

    API実行 ④ API結果書き込み ⑤ 読み込み 16
17. 17.

    17 SpreadSheets

18. 18.

    18 Data Studio

19. 19.

    • パフォーマンス計測ができる！ ◦ 定期的な実行と計測結果の数値化 • 手軽に始められる！ ◦ サーバーの用意は不要 • 無料で始められる！

    gas-webpagetest を使うと 19
20. 20.

    20 BOOTH https://techthetoaster.booth.pm STORES https://techthetoaster.stores.jp で本が購入できます！ 導入方法を詳しく知りたい方！

21. 21.

    1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES

    でやってきたパフォーマンス改善 21
22. 22.

    22 主にショップトップページを改善！

23. 23.

    23 描画時間を表すグラフ speedIndex: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 表示速度を 表すスコア 低いほど良い

24. 24.

    24 主に3つの改善を行った ①画像の最適化 34 → 20 ②GTM改善 20 → 16

    ③Lazy Load 16 → 14
25. 25.

    ①画像の最適化 • 必要十分な画像サイズに最適化 ◦ アップロードされた画像をそのままだしているところ があった • スマートフォン用に画像サイズを最適化 ◦ PCとSPで使うサイズを分岐

    • 商品のレイアウトごとに最適化 ◦ カラム数が多い場合はアイテム画像を小さく 25
26. 26.

    画像の通信量が半分以下に減った 26

27. 27.

    28 Googleタグマネージャで使っているタグを整理 全てのタグを洗い出して、必要なもの以外を削除し た。（タグの大掃除） ②GTM改善

28. 28.

    リクエスト数が減った 29

29. 29.

    30 ③Lazy Load

30. 30.

    画像の通信量が半分ぐらい減った 31

31. 31.

    これらの施策をやった結果 33 描画速度が 2倍に！ ※Speed Indexが 34 から14 にDown

32. 32.

    まとめ • パフォーマンスを改善する前に まずは計測から始めよう！ • gas-webpagetest は始めるのにうってつけ！ • 改善を繰り返して爆速にしていきたい人STORES に来てくれ！

    （フロントだけじゃなくてサーバーサイドも） 34
33. 33.

    ご清聴ありがとうございました！ 35