Lighthouse 11 の新機能

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse はウェブサイトの監査ツールで、デベロッパーの皆様がサイトのユーザー エクスペリエンスを改善するための最適化案や診断情報を提供します。

Lighthouse 11 は、npm を使用するコマンドライン、Chrome Canary、PageSpeed Insights ですぐにご利用いただけます。Chrome 118 で Chrome Stable 版が提供されます。

変更点の一覧については、11.0 変更履歴をご覧ください。

ユーザー補助カテゴリの更新

今回のカテゴリの更新では、新しい自動監査、重み付けの改善、手動監査の優先順位付けなどにより、サイトのアクセシビリティを向上できます。

新しい監査と重み付け

Lighthouse 10.0 以降、13 の新しいユーザー補助監査が追加されました。

  • aria-allowed-role
  • aria-dialog-name
  • aria-text
  • html-xml-lang-mismatch
  • image-redundant-alt
  • input-button-name
  • label-content-name-mismatch
  • link-in-text-block
  • select-name
  • skip-link
  • table–duplicate-name
  • table-fake-caption
  • td-has-header

新しい監査に加えて、すべての監査の重み付けが、対応する aXe ルールの影響レベルに合わせて更新されました。新しい監査と重み付けについて詳しくは、Lighthouse のユーザー補助スコアリングに関するドキュメントをご覧ください。

手動での監査の可視性

Lighthouse では、手動での監査が常に含まれているため、自動的にテストすることはできませんが、重要な機能を確認するためのチェックリストとして含まれています。すべての自動監査に合格すると、手動監査セクションが自動的に展開されるようになりました。

展開されたユーザー補助カテゴリの手動監査を示す Lighthouse レポート

つまり、すべての自動監査に合格し、ユーザー補助機能で 100 点を獲得しても、監査対象のページにアクセスできることは保証されず、手動テストが引き続き重要であることを強調しています。手動の監査も、最もわかりやすいチェックから順に並べ替えられました。

既存の監査の変更

Interaction to Next Paint（INP）

INP は試験運用版ではなくなったため、指標は experimental-interaction-to-next-paint から interaction-to-next-paint に移動しました。

Service Worker

Chrome でページを PWA としてインストール可能にするために Service Worker が不要になったため、service-worker チェックは Lighthouse PWA カテゴリから削除されました。

リソースの概要

Lighthouse レポートから resource-summary 監査が削除されました。ネットワーク リクエストの統計情報は、非表示の network-requests 監査を使用して引き続きコンパイルできます。

const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};

for (const request of networkRequests) {
  let total = resourceSummary[request.resourceType] || 0;
  total += request.resourceSize;
  resourceSummary[request.resourceType] = total;
}

console.log(resourceSummary);

以前のナビゲーション

CLI の --legacy-navigation フラグ、Node API の legacyNavigation() 関数、DevTools パネルの [以前のナビゲーション] チェックボックスはすべて削除されました。これで、ユーザーフローをサポートするための Lighthouse のインフラストラクチャへの移行が完了します。

ランニング用灯台

Lighthouse は、Chrome DevTools、npm（Node モジュールおよび CLI ツール）、およびブラウザ拡張機能（Chrome と Firefox）で入手できます。また、PageSpeed Insights などの Google サービスも活用しています。

Lighthouse Node CLI を試すには、次のコマンドを使用します。

npm install -g lighthouse
lighthouse https://www.example.com --view

Lighthouse チームへのお問い合わせ

新機能、Lighthouse 11 リリースでの変更点、その他 Lighthouse に関連する情報については: