パフォーマンスプロファイリング
測定し、分析し、最適化します。この順序で行ってください。
🔧 ランタイムスクリプト
このバンドル済みヘルパーは使用前にコードを確認し、許可された URL に対してのみ実行してください。Lighthouse はブラウザーを起動し、サードパーティーのリソースを読み込む場合があります。ラボスコアは実際のフィールドデータにおける Core Web Vitals を示すものではありません。このヘルパーは、コマンド／JSON の失敗とスコアを取得できない状態を個別に報告します。返されたエラーを確認し、取得できないカテゴリをスコア 0 として扱わないでください。
| スクリプト | 目的 | 使用方法 |
|---|
scripts/lighthouse_audit.py | Lighthouse パフォーマンス監査 | python scripts/lighthouse_audit.py https://example.com |
1. Core Web Vitals
目標値
| 指標 | 良好 | 不良 | 測定対象 |
|---|
| LCP | < 2.5s | > 4.0s | 読み込み |
| INP | < 200ms | > 500ms | インタラクティブ性 |
| CLS | < 0.1 | > 0.25 | 安定性 |
測定するタイミング
| ステージ | ツール |
|---|
| 開発 | ローカル Lighthouse |
| CI/CD | Lighthouse CI |
| 本番環境 | RUM（リアルユーザーモニタリング） |
2. プロファイリングのワークフロー
4 ステップのプロセス
1. BASELINE → Measure current state
2. IDENTIFY → Find the bottleneck
3. FIX → Make targeted change
4. VALIDATE → Confirm improvement
プロファイリングツールの選択
| 問題 | ツール |
|---|
| ページの読み込み | Lighthouse |
| バンドルサイズ | バンドルアナライザー |
| ランタイム | DevTools Performance |
| メモリ | DevTools Memory |
| ネットワーク | DevTools Network |
3. バンドル分析
確認する項目
| 問題 | 指標 |
|---|
| 大きな依存関係 | バンドルの先頭 |
| 重複コード | 複数のチャンク |
| 未使用コード | カバレッジの低さ |
| 分割の不足 | 単一の大きなチャンク |
最適化のアクション
| 発見事項 | アクション |
|---|
| 大きなライブラリ | 必要なモジュールだけをインポートする |
| 依存関係の重複 | 重複を排除し、バージョンを更新する |
| メインに含まれるルート | コード分割する |
| 未使用のエクスポート | ツリーシェイキングする |
4. ランタイムプロファイリング
Performance タブの分析
| パターン | 意味 |
|---|
| 長いタスク（>50ms） | UI をブロックしている |
| 小さなタスクが多い | バッチ処理の機会がある可能性 |
| レイアウト／ペイント | レンダリングのボトルネック |
| スクリプト | JavaScript の実行 |
Memory タブの分析
| パターン | 意味 |
|---|
| ヒープの増加 | メモリリークの可能性 |
| 保持されるオブジェクトが大きい | 参照を確認する |
| 切り離された DOM | クリーンアップされていない |
5. よくあるボトルネック
症状別
| 症状 | 考えられる原因 |
|---|
| 初回読み込みが遅い | 大きな JS、レンダリングをブロックする処理 |
| 操作への反応が遅い | 重いイベントハンドラー |
| スクロール中にカクつく | レイアウトの過剰な再計算 |
| メモリが増加する | メモリリーク、参照による保持 |
6. すぐに効果が出る施策の優先順位
| 優先度 | アクション | 影響 |
|---|
| 1 | 圧縮を有効にする | 高 |
| 2 | 画面外の画像を遅延読み込みする。LCP 画像は遅延読み込みしない | ワークロードによる |
| 3 | ルートをコード分割する | 高 |
| 4 | 静的アセットをキャッシュする | 中 |
| 5 | 画像を最適化する | 中 |
7. アンチパターン
| ❌ しないこと | ✅ すること |
|---|
| 問題を推測する | まずプロファイリングする |
| 細かな最適化を行う | 最大の問題を解決する |
| 早すぎる最適化 | 必要になったときに最適化する |
| 実際のユーザーを無視する | RUM データを使用する |
覚えておいてください： 最速のコードとは、実行されないコードです。最適化する前に取り除きましょう。
使用するタイミング
このスキルは、概要に記載されたワークフローやアクションを実行する場合に適用できます。
制限事項
- このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。
