メインコンテンツへスキップ
上級テクニック 上級 全ツール共通

パフォーマンス最適化プロンプト

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