エージェント向けの Chrome DevTools の Lighthouse を使用すると、コーディング エージェントは、ユーザー補助、SEO、ベスト プラクティス、エージェント ブラウジングのライブ ヘルスチェックを実行して、ウェブサイトの品質を評価できます。
エージェント ワークフローでは、コーディング エージェントは Lighthouse 監査を使用して、一般的な改善のためにコードベースをランダムに検索するのではなく、具体的で測定可能なランタイムの問題を特定します。
このターゲットを絞ったアプローチにより、エージェントのコンテキスト内で直接、実用的なアドバイスを提供できます。これにより、コーディング エージェントは、コードベース全体に対する広範で静的な検索よりも正確にバグを見つけて修正できます。
Lighthouse 監査は、次の主なカテゴリに重点を置いています。
- ユーザー補助（a11y）: スクリーン リーダーを使用する ユーザーを含め、すべてのユーザーがサイトを使用できるようにします。
- SEO: 検索エンジンがコンテンツを見つけて 理解できるように、技術的なチェックを実行します。
- ベスト プラクティス: サイトが最新のウェブ開発 標準に準拠していることを確認します。
- エージェント ブラウジング: AI アシスタントがウェブサイトをどの程度理解して 操作できるかを測定します。
Lighthouse を使用する際は、次の点に注意してください。
- ローカルとステージングのサポート: エージェントは、
Chrome に表示される任意のページを監査できます。これには、ローカル開発サーバーや
file://プロトコルでアクセスするローカル HTML ファイルも含まれます。 - ブラウザの動作: 監査によってビューが一時的に中断されることがあります。ツールがさまざまなデバイスをシミュレートすると、ページのサイズ変更や再読み込みが行われることがあります。
ウェブの品質を監査する
Lighthouse を開発プロセスに統合するには、次のワークフローと例を使用します。
ユーザー補助を確認する
UI を変更したら、ページに引き続きアクセスできることを確認するようエージェントに指示します。
プロンプトの例:
How can I improve accessibility on this page as measured by Lighthouse?
エージェントの実行例: エージェントは、formFactor が mobile に設定された Lighthouse 監査をトリガーします。色のコントラストが不十分である、ARIA
ラベルがないなどの結果を分析し、具体的なコード修正を提案します。
検索結果の表示に関する SEO を監査する
技術的な SEO 要件は、開発サイクルの後半で検出されることがよくあります。 ビルド中に、技術的なブロッカーを見つけて修正するようエージェントに依頼できます。
プロンプトの例:
According to Lighthouse audit, how can I improve this page for better discoverability in search?
エージェントの実行例: エージェントは SEO 監査を実行し、メタタグ、正規リンク、説明テキストがないことを特定します。その後、ソースコードを更新して監査の失敗を解決することを提案できます。
ベスト プラクティスを検証する
ローカル サーバーまたはステージング サイトが、セキュリティと技術に関するベスト プラクティスに準拠していることを確認します。
プロンプトの例:
Does my site follow best practices as measured by Lighthouse?
エージェントの実行例: エージェントは、Lighthouse によって報告された HTTPS の使用状況、コンソール エラー、非推奨の API 呼び出しなどの技術的な側面を確認します。
サイトの全般的な改善
サイトの完全な Lighthouse 監査を実行して、開発の初期段階で改善領域を定義できます。
プロンプトの例:
Run a full Lighthouse audit of my site, in mobile and desktop, and suggest improvement areas and possible fixes for any problems you find.
エージェントの実行例: エージェントは、モバイルとパソコンの両方でサイトの完全な Lighthouse 監査を実行し、さまざまな監査のスコアを改善できる変更を提案します。エージェントがソースコードのコンテキストを完全に把握している場合は、修正を直接提案することがあります。適切なコンテキストにアクセスできる場合は、サーバー構成やその他のバックエンド構成を改善する方法も提案できます。