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

Transcript

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

   View Slide

2. ● フロントエンドエンジニア
   ● 本書いてます
   ○ 技術書典 5, 6, 7
   ○ 技書博 1 中野 達也
   (@howdy39)
   2
   自己紹介
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. WebPagetest とは
   ● Webサービス
   ○ 無料
   ○ パフォーマンス計測の実行と結果表示
   ● API
   ○ 無料
   ○ 1日200回まで
   ● OSS
   ○ 自前で用意したサーバーで実行できる
   7
   

   View Slide

8. Webサービス
   8
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. gas-webpagetest で問題を解決
    ● API を定期的に叩く実行環境が必要
    ○ Google Apps Script (GAS)
    ● 計測結果の見える化（グラフ化）が必要
    ○ Data Studio
    ● 計測結果の保存が必要
    ○ SpreadSheets
    14
    

    View Slide

15. ● GAS で Webpagetest の API を叩く
    ● SpreadSheets に結果を保存する
    ● Data Studio でグラフを描画する
    ● OSS のツール
    gas-webpagetest とは
    15
    

    View Slide

16. 図解
    gas-webpagetest
    ① git clone
    ② clasp push
    ③ 定期的に
    API実行
    ④ API結果書き込み
    ⑤ 読み込み
    16
    

    View Slide

17. 17
    SpreadSheets
    

    View Slide

18. 18
    Data Studio
    

    View Slide

19. ● パフォーマンス計測ができる！
    ○ 定期的な実行と計測結果の数値化
    ● 手軽に始められる！
    ○ サーバーの用意は不要
    ● 無料で始められる！
    gas-webpagetest を使うと
    19
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. ①画像の最適化
    ● 必要十分な画像サイズに最適化
    ○ アップロードされた画像をそのままだしているところ
    があった
    ● スマートフォン用に画像サイズを最適化
    ○ PCとSPで使うサイズを分岐
    ● 商品のレイアウトごとに最適化
    ○ カラム数が多い場合はアイテム画像を小さく
    25
    

    View Slide

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

    View Slide

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

    View Slide

28. リクエスト数が減った
    29
    

    View Slide

29. 30
    ③Lazy Load
    

    View Slide

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

    View Slide

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

    View Slide

32. まとめ
    ● パフォーマンスを改善する前に
    まずは計測から始めよう！
    ● gas-webpagetest は始めるのにうってつけ！
    ● 改善を繰り返して爆速にしていきたい人STORES
    に来てくれ！
    （フロントだけじゃなくてサーバーサイドも）
    34
    

    View Slide

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

    View Slide