一覧に戻る
CLIClaude
Claude Code でフロントエンドパフォーマンスを一括改善
Lighthouse指標を基準に、Core Web Vitals・バンドルサイズ・レンダリングを最適化
このプロジェクトのフロントエンドパフォーマンスを最適化してください。
【最適化対象】
1. Core Web Vitals
- LCP(Largest Contentful Paint)→ 画像最適化、フォント読み込み
- CLS(Cumulative Layout Shift)→ レイアウトシフト防止
- INP(Interaction to Next Paint)→ インタラクション応答速度
2. バンドルサイズ
- 不要な依存パッケージの特定と削除
- 動的importによるコード分割
- Tree shakingの確認
3. レンダリング最適化
- 不要なre-renderの検出と修正
- React.memo / useMemo / useCallback の適切な使用
- Server Components と Client Components の分離
【現在の問題(あれば)】
{{例: 初回読み込みが3秒以上、画像が重い、など}}
各改善のbefore/after(推定値)を一覧で出力してください。
#パフォーマンス#最適化#ClaudeCode
シェア:Xでシェア