frontend-performancelisted

# Frontend Performance Skill ## 📋 目次 ### 基礎編（このファイル） 1. [概要](#概要) 2. [いつ使うか](#いつ使うか) 3. [Core Web Vitals](#core-web-vitals) 4. [バンドルサイズ削減](#バンドルサイズ削減) 5. [レンダリング最適化](#レンダリング最適化) 6. [画像最適化](#画像最適化) 7. [実践例](#実践例) 8. [計測ツール](#計測ツール) 9. [Agent連携](#agent連携) ### 詳細ガイド（完全版） 1. [Core Web Vitals完全ガイド](./guides/core-web-vitals/core-web-vitals-complete.md) - 30,000文字 2. [バンドル最適化完全ガイド](./guides/bundle/bundle-optimization-complete.md) - 26,000文字 3. [レンダリング最適化完全ガイド](./guides/rendering/rendering-optimization-complete.md) - 27,000文字 --- ## 概要 このSkillは、フロントエンドパフォーマンス最適化をカバーします： - **Core Web Vitals** - LCP, INP, CLS, TTFB - **バンドルサイズ削減** - Code Splitting, Tree Shaking - **レンダリング最適化** - SSR, SSG, ISR - **画像最適化** - WebP, Next/Image - **キャッシング** - CDN, Service Worker - **計測** - Lighthouse, Web Vitals ## 📚 公式ドキュメント・参考リソース **このガイドで学べること**: Core Web Vitals改善、バンドル最適化、レンダリング戦略、画像最適化、キャッシング戦略 **公式で確認すべきこと**: 最新のパフォーマンス指標、ブラウザアップデート、フレームワーク最適化機能 ### 主要な公式ドキュメント - **[web.dev Performance](https://web.dev/performance/)** - Googleパフォーマンスガイド - [Core Web Vitals](https://web.dev/vitals/) - [Optimize LCP](https://web.dev/optimize-lcp/) - [Optimize INP](https://web.dev/optimize-inp/) - **[Next.js Performance](https://nextjs.org/docs/app/building-your-application/optimizing)** - Next.js最適化ガイド - [Images](https://nextjs.org/docs/app/building-your-application/optimizing/images) - [Fonts](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) - **[Chrome DevTools](https://de