デバッグとパフォーマンス最適化

JavaScriptでエラーが出ています：

エラーメッセージ：[コンソールの正確なエラー]
エラー発生箇所：[ファイル名、利用可能なら行番号]
該当コード：
[関連する関数やセクションを貼り付け——ファイル全体ではなく]

期待した動作：[何が起きるべきか]
実際の動作：[代わりに何が起きているか]
試したこと：[既に試した修正]

ブラウザ：[Chrome/Firefox/Safari/Edge]
最近の変更：[エラーが出る前に何を変えたか？]

問題を診断し修正を提供してください。

CSSレイアウトが期待通りに動きません：

期待：[望むレイアウトを説明またはスケッチ]
実際：[代わりに何が起きているか]

HTML構造：
[関連するHTMLを貼り付け]

CSS：
[関連するCSSを貼り付け]

レイアウトが崩れるビューポート幅：[具体的なブレークポイントまたは範囲]
ブラウザ：[どのブラウザ]

チェックすべき一般的な問題：
- Flexboxのアラインメントとラップ動作
- Gridトラックのサイジングとオーバーフロー
- ボックスモデル（パディング/ボーダーが予期しない幅を引き起こしていないか？）
- ポジションコンテキスト（親要素にpositionが設定されているか？）
- z-indexのスタッキングコンテキスト問題

このコードは[ブラウザA]では動くが[ブラウザB]では壊れます：

コード：
[関連するHTML/CSS/JSを貼り付け]

正常に動作：[ブラウザ＋バージョン]
壊れる：[ブラウザ＋バージョン]
何が壊れるか：[具体的な動作の違い]

確認項目：
1. ベンダープレフィックスが必要なCSSプロパティ
2. ターゲットブラウザで未サポートのJavaScript API
3. レンダリングエンジン間のCSSレイアウトの違い
4. 異なるデフォルトブラウザスタイル

ウェブサイトの画像をパフォーマンス最適化：

現状：
- ページに[数]枚の画像
- 最大画像：[KB/MBでのサイズ]
- 画像フォーマット：[jpg/png/svg]

生成してほしいもの：
1. srcsetとsizes属性によるレスポンシブ画像HTML
2. 遅延読み込みの実装（折り返し以下の画像にloading="lazy"）
3. 適切な画像フォーマット推奨（フォールバック付きWebP）
4. レイアウトシフト防止のwidthとheight属性（CLS対策）
5. 異なるスクリーンサイズ向けのpicture要素によるアートディレクション

最適化する画像の例：[画像の1つを説明]

このJavaScriptのパフォーマンス問題をレビュー：

[JavaScriptを貼り付け]

確認項目：
1. ループ内のDOMクエリ（参照をキャッシュすべき）
2. scroll/resizeハンドラーのデバウンス/スロットル不足
3. 同期処理される大きな配列（チャンク化すべきか？）
4. クリーンアップされないイベントリスナー（メモリリーク）
5. 非同期にできる同期操作
6. 不必要な再レンダーやDOM更新

各問題について現在のコードと最適化版を表示。

ウェブサイトのHTML/CSS/JSをCore Web Vitalsパフォーマンスで監査：

[HTMLを貼り付け、またはページ構造を説明]

チェックと最適化：

LCP（Largest Contentful Paint——目標：< 2.5秒）：
- ヒーロー画像または最大要素はプリロードされているか？
- レンダーブロックリソースは最小化されているか？
- クリティカルCSSはインライン化または優先されているか？

CLS（Cumulative Layout Shift——目標：< 0.1）：
- すべての画像にwidthとheight属性があるか？
- フォントはfont-display: swapで読み込まれているか？
- 動的要素（広告、埋め込み）に予約スペースがあるか？

INP（Interaction to Next Paint——目標：< 200ms）：
- イベントハンドラーは効率的か？
- 重いJavaScriptはdeferされているか？
- 長いタスクはより小さなチャンクに分割されているか？

見つかった各問題の具体的なコード修正を提供。

このページのアクセシビリティ問題を監査：

[HTMLを貼り付け]

WCAG 2.1 AAに対して確認：
1. カラーコントラスト（テキスト対背景——4.5:1の比率が必要）
2. キーボードナビゲーション（すべてのインタラクティブ要素に到達・操作可能か？）
3. スクリーンリーダー互換性（ランドマーク、ラベル、ライブリージョン）
4. フォーカス管理（可視フォーカスインジケーター、論理的なタブ順序）
5. 代替テキスト（情報的画像に意味のあるもの、装飾的画像は空）
6. フォームのアクセシビリティ（ラベル、エラーメッセージ、必須表示）
7. モーション感度（prefers-reduced-motionを尊重）

問題を重要度で優先順位付け：クリティカル→メジャー→マイナー。