web-performance-optimization は何をしますか？
ウェブサイトおよびウェブアプリケーションのパフォーマンス最適化（ローディング速度、Core Web Vitals、バンドルサイズ、キャッシュ戦略、ランタイムパフォーマンスを含む）
概要
このスキルは、ウェブサイトとウェブアプリケーションのパフォーマンスを最適化するための包括的なツールです。以下の主要な領域をカバーします：
- ローディング速度: 初回表示時間（FCP）やLCP（Largest Contentful Paint）の改善
- Core Web Vitals: LCP、FID/INP、CLSの最適化
- バンドルサイズ: JavaScriptおよびCSSのバンドルサイズ削減
- キャッシュ戦略: ブラウザキャッシュ、CDNキャッシュ、サービスワーカー
- ランタイムパフォーマンス: メモリ使用量、レンダリングパフォーマンス、アニメーションの最適化
使用方法
# プロジェクトのパフォーマンスを分析
npx sickn33/web-performance-optimization analyze
# 最適化の提案を生成
npx sickn33/web-performance-optimization suggest
# 自動最適化を実行
npx sickn33/web-performance-optimization optimize
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIエージェント
機能一覧
| 機能 | 説明 |
|---|---|
| パフォーマンス監査 | LighthouseやWebPageTestを使用した詳細な分析 |
| 画像最適化 | 次世代フォーマット（WebP/AVIF）への変換、遅延読み込み |
| コード分割 | 動的インポートとコード分割の設定 |
| キャッシュ戦略 | Service Workerによる戦略の実装 |
| バンドル分析 | バンドルサイズの可視化と改善提案 |
| Core Web Vitals改善 | 各指標の具体的な改善手法 |
設定
performance.config.js ファイルで動作をカスタマイズできます：
module.exports = {
target: 'web',
budget: {
performance: 90,
accessibility: 90,
'best-practices': 90,
seo: 90,
},
optimization: {
images: true,
fonts: true,
javascript: true,
css: true,
},
};
環境変数
PERFORMANCE_API_KEY- 外部パフォーマンスサービスのAPIキーPERFORMANCE_DEBUG- デバッグモードを有効にする（trueに設定）
詳細ドキュメント
詳細なドキュメントと例については、公式ドキュメントを参照してください。