エージェント向けの 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 監査を実行し、さまざまな監査のスコアを改善できる変更を提案します。エージェントがソースコードのコンテキストを完全に把握している場合は、修正を直接提案できます。適切なコンテキストにアクセスできる場合は、サーバー構成やその他のバックエンド構成を改善する方法も提案できます。