web-performance-audit について
Webの性能測定、ボトルネック分析、最適化を支援するテストスキルです。読み込み速度の監視、遅さへの対応、性能ベースラインの設定に取り組むチーム向けです。
主な機能
- 01性能指標ガイド
- 02監査プロセス
- 03最適化戦略
- 04継続的な監視ガイド
活用シーン
- 01大規模な変更後の性能確認
- 02ページが遅いという報告の調査
- 03性能ベースラインの設定
- 04モバイル性能の改善
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/web-performance-auditを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/monitoring-continuous-improvement.mdoptimization-strategies.mdperformance-analysis-process.mdperformance-metrics.mdscripts/health-check.shtemplates/dashboard-config.yaml詳細
Web パフォーマンス監査
目次
概要
Web パフォーマンス監査では、読み込み時間を測定し、ボトルネックを特定して、より高速で優れたユーザーエクスペリエンスを実現するための最適化を進めます。
使用するタイミング
- 定期的なパフォーマンス監視
- 大規模な変更の後
- 動作が遅いというユーザーからの苦情
- SEO の最適化
- モバイル向けの最適化
- パフォーマンスのベースライン設定
クイックスタート
最小限の実行可能な例：
Core Web Vitals (Google):
Largest Contentful Paint (LCP):
Measure: Time to load largest visible element
Good: <2.5 seconds
Poor: >4 seconds
Impacts: User perception of speed
First Input Delay (FID):
Measure: Time from user input to response
Good: <100 milliseconds
Poor: >300 milliseconds
Impacts: Responsiveness
Cumulative Layout Shift (CLS):
Measure: Visual stability (unexpected layout shifts)
Good: <0.1
Poor: >0.25
Impacts: User frustration
---
Additional Metrics:
First Contentful Paint (FCP):
// ... (see reference guides for full implementation)
リファレンスガイド
references/ ディレクトリにある詳細な実装ガイド：
| ガイド | 内容 |
|---|---|
| パフォーマンス指標 | パフォーマンス指標 |
| パフォーマンス分析プロセス | パフォーマンス分析プロセス |
| 最適化戦略 | 最適化戦略 |
| 監視と継続的な改善 | 監視と継続的な改善 |
ベストプラクティス
✅ DO
- 定期的に測定する（一度だけで済ませない）
- 実ユーザーのフィールドデータとラボデータを活用する
- Core Web Vitals を重視する
- 現実的な目標を設定する
- 影響度に基づいて優先順位を付ける
- 継続的に監視する
- パフォーマンス予算を設定する
- 低速なネットワークでテストする
- テストにモバイルを含める
- 改善内容を文書化する
❌ DON'T
- フィールドデータを無視する
- 1 つの指標だけを重視する
- 実現不可能な目標を設定する
- 測定せずに最適化する
- 画像のことを忘れる
- JavaScript のコストを無視する
- モバイルのパフォーマンスを確認しない
- 早まって過剰に最適化する
- 監視を忘れる
- 努力せずに改善を期待する
コメント
Markdown 対応