上級テクニック 上級 全ツール共通
パフォーマンス最適化プロンプト
Lighthouse スコア改善・Core Web Vitals 最適化を体系的に依頼するプロンプト。
プロンプト
このWebサイト/アプリのパフォーマンスを最適化してください。 ## 現状のスコア(Lighthouse) - Performance: [現在のスコア] - Accessibility: [現在のスコア] - Best Practices: [現在のスコア] - SEO: [現在のスコア] ## 目標スコア - Performance: 95以上 - Accessibility: 100 - Best Practices: 100 - SEO: 100 ## 主な問題点(Lighthouse レポートから) - [問題1: 例)Largest Contentful Paint が 3.2s] - [問題2: 例)未使用の JavaScript が 150KB] - [問題3: 例)画像が WebP 形式でない] ## 最適化してほしい項目 ### 画像最適化 - WebP / AVIF への変換 - lazy loading の適用 - 適切なサイズへのリサイズ ### JavaScript 最適化 - 未使用コードの削除 - コード分割(Dynamic Import) - Third-party スクリプトの遅延読み込み ### CSS 最適化 - Critical CSS のインライン化 - 未使用 CSS の削除 ### キャッシュ戦略 - Cache-Control ヘッダーの設定 - Service Worker の活用 ## 制約 - 機能を削除しないこと - ユーザー体験を損なわないこと - 変更前後でビルドが通ること
#パフォーマンス
#Lighthouse
#Core Web Vitals
Core Web Vitals の基準
| 指標 | 良い | 要改善 | 悪い |
|---|---|---|---|
| LCP(最大コンテンツ描画) | 2.5s以内 | 4.0s以内 | 4.0s超 |
| FID(初回入力遅延) | 100ms以内 | 300ms以内 | 300ms超 |
| CLS(累積レイアウトシフト) | 0.1以内 | 0.25以内 | 0.25超 |
| INP(次の描画までの遅延) | 200ms以内 | 500ms以内 | 500ms超 |
Lighthouse を実行する方法
Chrome DevTools(F12)→「Lighthouse」タブ → 「ページの読み込みを分析」
または CLI:
npx lighthouse https://example.com --output html --view