Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
Search
howdy39
October 24, 2019
Technology
4
540
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
October 24, 2019
Tweet
Share
More Decks by howdy39
See All by howdy39
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
960
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
490
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.3k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.2k
Promise
howdy39
1
290
カラーユニバーサルデザイン / color universal design
howdy39
0
700
Geolocation API
howdy39
0
92
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
180
Media Queries
howdy39
0
77
Other Decks in Technology
See All in Technology
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
スレットハンティングについて知っておきたいこと
hacket
0
130
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
Featured
See All Featured
Teambox: Starting and Learning
jrom
130
8.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Making Projects Easy
brettharned
111
5.7k
Facilitating Awesome Meetings
lara
46
5.8k
Building Adaptive Systems
keathley
34
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
How STYLIGHT went responsive
nonsquared
93
5k
What the flash - Photography Introduction
edds
65
11k
A better future with KSS
kneath
231
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
What's new in Ruby 2.0
geeforr
338
31k
Being A Developer After 40
akosma
72
580k
Transcript
WebPagetest で始める パフォーマンス計測 STORES.jp Meetup for Front-end Engineers #1 2019.10.24
1
• フロントエンドエンジニア • 本書いてます ◦ 技術書典 5, 6, 7 ◦
技書博 1 中野 達也 (@howdy39) 2 自己紹介
話すこと 1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4.
STORES でやってきたパフォーマンス改善 3
1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES
でやってきたパフォーマンス改善 4
5 パフォーマンス改善ができたのかどうかを 体感 のような曖昧なものにしない パフォーマンス計測が必要な理由 数値化 していないと改善できたとは言えない 目に見える形にすることで パフォーマンス改善の工数を確保する
1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES
でやってきたパフォーマンス改善 6
WebPagetest とは • Webサービス ◦ 無料 ◦ パフォーマンス計測の実行と結果表示 • API
◦ 無料 ◦ 1日200回まで • OSS ◦ 自前で用意したサーバーで実行できる 7
Webサービス 8
Webサービスの弱点 • スナップショットの計測 • 定期的な実行はできない → 定期的な実行をするにはAPIを使う必要がある 9
APIの弱点 10 • 実行環境は用意されていない ◦ APIを定期的に叩く実行環境が必要 • パフォーマンス計測をするだけ ◦ 計測結果の見える化(グラフ化)が必要
• 計測結果は1ヶ月で消える ◦ 計測結果の保存が必要
つまり 11 やること が多い!
1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES
でやってきたパフォーマンス改善 12
13 gas-webpagetest が APIの弱点を補ってくれます!
gas-webpagetest で問題を解決 • API を定期的に叩く実行環境が必要 ◦ Google Apps Script (GAS)
• 計測結果の見える化(グラフ化)が必要 ◦ Data Studio • 計測結果の保存が必要 ◦ SpreadSheets 14
• GAS で Webpagetest の API を叩く • SpreadSheets に結果を保存する
• Data Studio でグラフを描画する • OSS のツール gas-webpagetest とは 15
図解 gas-webpagetest ① git clone ② clasp push ③ 定期的に
API実行 ④ API結果書き込み ⑤ 読み込み 16
17 SpreadSheets
18 Data Studio
• パフォーマンス計測ができる! ◦ 定期的な実行と計測結果の数値化 • 手軽に始められる! ◦ サーバーの用意は不要 • 無料で始められる!
gas-webpagetest を使うと 19
20 BOOTH https://techthetoaster.booth.pm STORES https://techthetoaster.stores.jp で本が購入できます! 導入方法を詳しく知りたい方!
1. パフォーマンス計測がなぜ必要なのか 2. WebPagetest とは 3. gas-webpagetest で問題を解決 4. STORES
でやってきたパフォーマンス改善 21
22 主にショップトップページを改善!
23 描画時間を表すグラフ speedIndex: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 表示速度を 表すスコア 低いほど良い
24 主に3つの改善を行った ①画像の最適化 34 → 20 ②GTM改善 20 → 16
③Lazy Load 16 → 14
①画像の最適化 • 必要十分な画像サイズに最適化 ◦ アップロードされた画像をそのままだしているところ があった • スマートフォン用に画像サイズを最適化 ◦ PCとSPで使うサイズを分岐
• 商品のレイアウトごとに最適化 ◦ カラム数が多い場合はアイテム画像を小さく 25
画像の通信量が半分以下に減った 26
28 Googleタグマネージャで使っているタグを整理 全てのタグを洗い出して、必要なもの以外を削除し た。(タグの大掃除) ②GTM改善
リクエスト数が減った 29
30 ③Lazy Load
画像の通信量が半分ぐらい減った 31
これらの施策をやった結果 33 描画速度が 2倍に! ※Speed Indexが 34 から14 にDown
まとめ • パフォーマンスを改善する前に まずは計測から始めよう! • gas-webpagetest は始めるのにうってつけ! • 改善を繰り返して爆速にしていきたい人STORES に来てくれ!
(フロントだけじゃなくてサーバーサイドも) 34
ご清聴ありがとうございました! 35