Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Webサービス 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 SpreadSheets

Slide 18

Slide 18 text

18 Data Studio

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

リクエスト数が減った 29

Slide 29

Slide 29 text

30 ③Lazy Load

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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