performance-audit

パフォーマンス監査スキル

Web Vitals とネットワークのタイミング指標を使用して、Web ページのパフォーマンスを分析します。

使用するタイミング

このスキルは、以下の場合に有効になります。

• ユーザーがページのパフォーマンスや速度について質問した場合
• ユーザーが読み込み時間の最適化を希望する場合
• ユーザーがページや API の遅さ、またはユーザーエクスペリエンスの低さについて言及した場合
• ユーザーが Core Web Vitals の指標を必要とする場合
• ユーザーがバックエンドのボトルネックや TTFB について質問した場合
• ユーザーが SEO のパフォーマンス要因について質問した場合

機能

Web Vitals の分析

browser-devtools-cli o11y get-web-vitals
browser-devtools-cli --json o11y get-web-vitals
browser-devtools-cli --json o11y get-web-vitals --wait-ms 3000
browser-devtools-cli --json o11y get-web-vitals --include-debug

ネットワークパフォーマンス

browser-devtools-cli --json o11y get-http-requests
browser-devtools-cli --json o11y get-http-requests --resource-type script
browser-devtools-cli --json o11y get-http-requests --resource-type stylesheet
browser-devtools-cli --json o11y get-http-requests --status '{"min":400}'

視覚的な分析

browser-devtools-cli content take-screenshot --name "above-fold"
browser-devtools-cli content take-screenshot --name "full-page" --full-page

パフォーマンスのしきい値

指標	良好	要改善	不良
LCP	≤2.5s	2.5-4s	>4s
INP	≤200ms	200-500ms	>500ms
CLS	≤0.1	0.1-0.25	>0.25
TTFB	≤800ms	800-1800ms	>1800ms
FCP	≤1.8s	1.8-3s	>3s

監査ワークフロー

SESSION="--session-id perf-audit"

# 1. Navigate to page
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"

# 2. Wait for page to settle
browser-devtools-cli $SESSION sync wait-for-network-idle

# 3. Get Web Vitals
browser-devtools-cli $SESSION --json o11y get-web-vitals --wait-ms 2000

# 4. Analyze network requests
browser-devtools-cli $SESSION --json o11y get-http-requests

# 5. Check for console errors
browser-devtools-cli $SESSION --json o11y get-console-messages --type warning

# 6. Take screenshot for reference
browser-devtools-cli $SESSION content take-screenshot --name "performance-audit"

# 7. Cleanup
browser-devtools-cli session delete perf-audit

詳細分析

大きなリソースを確認する

# Filter by type (one at a time: document, stylesheet, image, script, xhr, fetch, etc.)
browser-devtools-cli --json o11y get-http-requests --resource-type script
browser-devtools-cli --json o11y get-http-requests --resource-type stylesheet
browser-devtools-cli --json o11y get-http-requests --resource-type image

遅いリクエストを確認する

browser-devtools-cli --json o11y get-http-requests
# Look for requests with high timing values

バックエンドのパフォーマンス（node-devtools-cli）

TTFB や API のレイテンシからバックエンドのボトルネックが疑われる場合は、Node.js プロセスを調査します。

# Connect to API/server process
node-devtools-cli --session-id perf debug connect --pid 12345

# Tracepoint on slow handler to capture call context
node-devtools-cli --session-id perf debug put-tracepoint \
  --url-pattern "routes/heavy.ts" \
  --line-number 30

よくある問題

• 最適化されていない大きな画像
• レンダリングを妨げる CSS/JS
• HTTP リクエストが多すぎる
• サーバーの応答が遅い（TTFB）
• 動的コンテンツによるレイアウトシフト
• 圧縮されていないリソース
• キャッシュヘッダーが設定されていない
• メインスレッドをブロックするサードパーティ製スクリプト

ベストプラクティス

1. 一貫した結果を得るため、複数回実行します
2. 測定前にネットワークがアイドル状態になるまで待ちます
3. LCP/CLS が安定するように、--wait-ms を使用します
4. 遅いリソースや大きなリソースがないか、ネットワークリクエストを確認します
5. 読み込みの異なる段階でスクリーンショットを撮影します
6. 異なるネットワーク環境でテストします（必要に応じて速度を制限します）
7. 最適化の効果を検証するため、変更前後を比較します