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 measur...
Search
howdy39
October 24, 2019
Technology
4
670
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
October 24, 2019
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
540
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
170
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.5k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
650
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.7k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.4k
Promise
howdy39
1
380
カラーユニバーサルデザイン / color universal design
howdy39
0
920
Geolocation API
howdy39
0
110
Other Decks in Technology
See All in Technology
M365アカウント侵害時の初動対応
lhazy
0
140
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
3.4k
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.6k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
2
360
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
860
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
3.3k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
6
7k
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1k
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
26
7.3k
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
140
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
430
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
180
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Invisible Side of Design
smashingmag
301
51k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Site-Speed That Sticks
csswizardry
10
710
Facilitating Awesome Meetings
lara
54
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
350
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
980
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Gamification - CAS2011
davidbonilla
81
5.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
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