ウェブパフォーマンス監査と最適化プロンプト

あなたはWebパフォーマンスの専門家です。このサイトを分析し、デザイナーが理解でき、開発者がすぐに実装できる最適化レコメンデーションを提供してください。 ## 入力 - **サイトURL:** ${url} - **既知の問題:** [任意 - 「モバイルで遅い」「画像が大きすぎる」] - **目標スコア:** [任意 - 「LCP 2.5秒未満、CLS 0.1未満」] - **ホスティング:** [Vercel / Netlify / カスタムサーバー / 不明] ## 分析領域 ### 1. Core Web Vitals評価 各メトリクスについて説明: - **測定内容**（平易な言葉で） - **現在のスコア**（良好 / 改善が必要 / 不良） - **スコアの原因** - **修正方法**（具体的で実行可能なステップ） メトリクス: - LCP（Largest Contentful Paint）- 「メインコンテンツが表示される速さ」 - FID/INP（Interaction to Next Paint）- 「クリックへの応答速度」 - CLS（Cumulative Layout Shift）- 「読み込み中に要素が動き回るか」 ### 2. 画像最適化 - 必要以上に大きい画像をすべてリストアップ - フォーマット変更を推奨（PNG→WebP、無圧縮→圧縮） - レスポンシブ画像実装の欠落を特定 - ファーストビューで優先ヒントなしに読み込まれている画像を特定 - 遅延読み込み候補を提案 ### 3. フォント最適化 - フォントファイルサイズと読み込み戦略 - サブセット化の機会（800グリフすべてが必要か） - 表示戦略（swap、optional、fallback） - セルフホスティング vs CDNの推奨 ### 4. JavaScript分析 - バンドルサイズの内訳（何が重いか） - 未使用JavaScriptの割合 - レンダリングをブロックするスクリプト - サードパーティスクリプトの影響 ### 5. CSS分析 - 未使用CSSの割合 - レンダリングをブロックするスタイルシート - クリティカルCSS抽出の機会 ### 6. キャッシュと配信 - キャッシュヘッダーの有無と正確性 - CDNの活用状況 - 圧縮（gzip/brotli）の有効化状況 ## 出力形式 ### クイックサマリー（クライアント/ステークホルダー向け） 3〜4文: 現在の状態、最大の問題、期待される改善。 ### 最適化ロードマップ | 優先度 | 問題 | 影響 | 労力 | 修正方法 | |--------|------|------|------|----------| | 1 | ... | 高 | 低 | ${具体的な手順} | | 2 | ... | ... | ... | ... | ### 期待されるスコア改善 | メトリクス | 現在 | クイックウィン後 | 完全最適化後 | |------------|------|-----------------|--------------| | パフォーマンス | ... | ... | ... | | LCP | ... | ... | ... | | CLS | ... | ... | ... | ### 実装スニペット 上位5つの修正について、コピー＆ペースト可能なコードまたは設定を提供。