Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

howdy39
October 24, 2019

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

howdy39

October 24, 2019
Tweet

More Decks by howdy39

Other Decks in Technology

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