Core Web Vitals に基づくパフォーマンス分析
アプリケーションのパフォーマンスをユーザー体験の観点から分析し、改善による体感速度向上を定量化します。Core Web Vitals に基づく UX スコアを算出し、優先順位付けされた最適化戦略を提案します。
UX パフォーマンススコア
ユーザー体験スコア: B+ (78/100)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱️ Core Web Vitals
├─ LCP (読み込み): 2.3 秒 [Good] 目標<2.5 秒 ✅
├─ INP (操作反応): 95ms [Good] 目標<200ms ✅
├─ CLS (視覚安定): 0.08 [Good] 目標<0.1 ✅
├─ FCP (初回描画): 1.8 秒 [Good] 目標<1.8 秒 ✅
├─ TTFB (サーバー): 450ms [Needs Work] 目標<200ms ⚠️
└─ TTI (操作可能): 3.5 秒 [Needs Work] 目標<3.8 秒 ⚠️
📊 ユーザー体感速度
├─ 初回表示体感: 2.3 秒 [業界平均: 3.0 秒]
├─ ページ遷移: 1.1 秒 [業界平均: 1.5 秒]
├─ 検索結果表示: 0.8 秒 [業界平均: 1.2 秒]
├─ フォーム送信: 1.5 秒 [業界平均: 2.0 秒]
└─ 画像読み込み: 遅延ロード実装済み ✅
😊 ユーザー満足度予測
├─ 離脱率予測: 12% (業界平均: 20%)
├─ 完了率予測: 78% (目標: 85%)
├─ 推奨 NPS: +24 (業界平均: +15)
└─ リピート率: 65% (目標: 70%)
📊 ユーザー体験への影響
├─ 表示速度 0.5 秒短縮 → 離脱率 -7%
├─ 離脱率 5% 削減 → セッション長 +15%
├─ 検索改善 → 滞在時間 +15%
└─ 総合的な UX 改善度: +25%
🎯 改善による期待効果 (優先順位順)
├─ [P0] TTFB 改善 (CDN 導入) → LCP -0.3 秒 = 体感速度 +15%
├─ [P1] JS バンドル最適化 → TTI -0.8 秒 = 操作可能時間 -20%
├─ [P2] 画像最適化 (WebP) → 転送量 -40% = ロード時間 -25%
└─ [P3] キャッシュ戦略 → リピート訪問時 50% 高速化
使い方
# UX スコアの包括的分析
find . -name "*.js" -o -name "*.ts" | xargs wc -l | sort -rn | head -10
「UX パフォーマンススコアを算出し、Core Web Vitals を評価して」
# パフォーマンスボトルネックの検出
grep -r "for.*await\|forEach.*await" . --include="*.js"
「非同期処理のボトルネックを検出し、ユーザー体感への影響を分析して」
# ユーザー体験への影響分析
grep -r "addEventListener\|setInterval" . --include="*.js" | grep -v "removeEventListener\|clearInterval"
「パフォーマンス問題がユーザー体験に与える影響を分析して」
基本例
# バンドルサイズとロード時間
npm ls --depth=0 && find ./public -name "*.js" -o -name "*.css" | xargs ls -lh
"バンドルサイズとアセット最適化の改善点を特定して"
# データベースパフォーマンス
grep -r "SELECT\|findAll\|query" . --include="*.js" | head -20
"データベースクエリの最適化ポイントを分析して"
# 依存関係のパフォーマンス影響
npm outdated && npm audit
"古い依存関係がパフォーマンスに与える影響を評価して"
分析観点
1. コードレベルの問題
- O(n²) アルゴリズム: 非効率な配列操作の検出
- 同期 I/O: ブロッキング処理の特定
- 重複処理: 不要な計算やリクエストの削除
- メモリリーク: イベントリスナーやタイマーの管理
2. アーキテクチャレベルの問題
- N+1 クエリ: データベースアクセスパターン
- キャッシュ不足: 繰り返し計算や API 呼び出し
- バンドルサイズ: 不要なライブラリやコード分割
- リソース管理: 接続プールやスレッド使用量
3. 技術的負債による影響
- レガシーコード: 古い実装による性能劣化
- 設計の問題: 責任分散不足による結合度の高さ
- テスト不足: パフォーマンス回帰の検出漏れ
- 監視不足: 問題の早期発見体制
パフォーマンス改善 ROI マトリクス
改善 ROI = (時間削減効果 + 品質向上) ÷ 実装工数
| 優先度 |
ユーザー体験向上 |
実装難易度 |
時間削減効果 |
具体例 |
工数 |
効果 |
| [P0] 即実装すべき |
高 |
低 |
> 50% |
CDN 導入 |
8h |
応答 -60% |
| [P1] 早期実装推奨 |
高 |
中 |
20-50% |
画像最適化 |
16h |
ロード -30% |
| [P2] 計画的実装 |
低 |
高 |
10-20% |
コード分割 |
40h |
初回 -15% |
| [P3] 保留/様子見 |
低 |
低 |
< 10% |
微細な最適化 |
20h |
部分 -5% |
優先度判定基準
- P0(即実装): UX 向上「高」× 難易度「低」= ROI 最大
- P1(早期実装): UX 向上「高」× 難易度「中」= ROI 高
- P2(計画的): UX 向上「低」× 難易度「高」= ROI 中
- P3(保留): UX 向上「低」× 難易度「低」= ROI 低
パフォーマンス指標と UX 改善相関
| 指標 |
改善幅 |
体感速度向上 |
ユーザー満足度 |
実装工数 |
| LCP (読み込み) |
-0.5 秒 |
+30% |
離脱率 -7% |
16h |
| INP (操作反応) |
-50ms |
+15% |
ストレス -20% |
8h |
| CLS (視覚安定) |
-0.05 |
+10% |
誤操作 -50% |
4h |
| TTFB (サーバー) |
-200ms |
+25% |
体感速度 +40% |
24h |
| TTI (操作可能) |
-1.0 秒 |
+35% |
完了率 +15% |
32h |
| バンドルサイズ |
-30% |
+20% |
初回訪問 +25% |
16h |
測定とツール
Node.js / JavaScript
# プロファイリング
node --prof app.js
clinic doctor -- node app.js
# バンドル分析
npx webpack-bundle-analyzer
lighthouse --chrome-flags="--headless"
データベース
-- クエリ分析
EXPLAIN ANALYZE SELECT ...
SHOW SLOW LOG;
フロントエンド
# React パフォーマンス
grep -r "useMemo\|useCallback" . --include="*.jsx"
# リソース分析
find ./src -name "*.png" -o -name "*.jpg" | xargs ls -lh
継続的改善
- 定期監査: 週次パフォーマンステスト実行
- メトリクス収集: レスポンス時間、メモリ使用量の追跡
- アラート設定: 閾値超過時の自動通知
- チーム共有: 改善事例とアンチパターンの文書化
wasabeef