フロントエンド最適化のためのClaude Code：88 PSIから100 PSIへ

ある開発者がClaude Codeをデバッグおよび実装パートナーとして活用し、自サイトのPageSpeed Insightsモバイルスコアを88から100に引き上げました（記事テンプレートは74から100）。r/ClaudeAIの投稿では、一度の修正ではなく、一連のターゲットを絞った介入の詳細なワークフローが紹介されています。

達成された主な最適化

• レスポンシブ画像 + srcset： Claudeがモバイルヒーロー画像が必要以上に大きいことを特定し、レスポンシブ画像バリアントを生成してsrcset属性を追加しました。
• LCPプリロード： <link rel="preload" as="image" imagesrcset="...">を使用してLCP画像のレスポンシブプリロードを追加。
• 強制リフローの修正： スクロール時に強制レイアウトを引き起こしていたヘッダーのスクロールリスナーをIntersectionObserverに置き換え。
• フォント監査： 実際に使用されているフォントウェイトを特定し、未使用のものを削除。
• ビルド時の画像サイズ指定： マークダウン画像にビルド時にwidthとheight属性を追加し、レイアウトシフトを防止。
• 記事ページでのフォントプリロード削除： 直感に反しますが効果的—プリロードされたフォントが、スロットリングされたモバイルでヒーロー画像と帯域を競合していました。フォントはfont-display: swapを使用していたため、プリロードを削除することでLCP画像の読み込みが高速化しました。

効果的なプロンプトパターン

開発者は、Claude Codeは具体的な診断スレッドで最も効果的に機能することを発見しました。漠然としたプロンプトではなく、PSIの結果を入力し、関連するコンポーネントを調査させ、広範なリファクタリングではなく最小限の修正を依頼します。例：PageSpeed Insightsの結果を渡し、Claudeに関連コンポーネントを検査させ、最小限の修正を依頼する。

人間の判断は依然として必要

一部の最適化は視覚的に過剰に感じられました—著者はスコア100を維持しつつロゴの品質を戻しました。ファーストビュー外の画像やスタイルのトレードオフには人間の判断が必要でした。Claude Codeは反復を加速しましたが、開発者はパフォーマンス、アクセシビリティ、デザイン品質のバランスを取る必要がありました。

詳細レポート

著者は、具体的なCWVの変更とbefore/afterの数値を含むより詳細な技術版をgoodrich.digitalで公開しています。