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 としてインストール可能なページにサービス ワーカーが不要になったため、Lighthouse の PWA カテゴリから service-worker チェックが削除されました。

リソースの概要

resource-summary 監査は Lighthouse レポートから削除されました。ネットワーク リクエストの統計情報は、非表示の 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 の実行

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 に関連するその他の事項について話し合うには: