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

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

5abf9d4714b77a15beea063d08586560?s=47 howdy39
October 24, 2019

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

5abf9d4714b77a15beea063d08586560?s=128

howdy39

October 24, 2019
Tweet

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