Lighthouse 11 の新機能

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse はウェブサイトの監査ツールです。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 が必要なくなったため、Lighthouse PWA カテゴリから service-worker チェックが削除されました。

リソースの概要

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() 関数、「以前のナビゲーション」チェックボックスがすべて削除されました。これで、ユーザーフローをサポートする 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 に関するディスカッションには次のような情報が含まれます。