このガイドは、次のような Lighthouse v2 ユーザーを対象としています。
- Node またはコマンドラインから Lighthouse を実行します。
- Lighthouse の JSON 出力を使用する。
上記に当てはまらない場合、Lighthouse の実行のワークフローはほぼ同じです。 新機能の概要については、Lighthouse 3.0 のお知らせをご覧ください。 説明します。
呼び出しの変更
Lighthouse は、デフォルトでシミュレートされたパフォーマンスを計算するようになり、スロットリング設定が大幅に変更されました。
CLI フラグ
| シナリオ | v2 フラグ | v3 フラグ |
|---|---|---|
| DevTools の 3G スロットリング | なし（デフォルトの動作） | --throttling-method=devtools |
| スロットリングなし | --disable-network-throttling --disable-cpu-throttling |
--throttling-method=provided |
| ネットワーク スロットリング、CPU スロットリングなし | --disable-cpu-throttling |
--throttling-method=devtools --throttling.cpuSlowdownMultiplier=1 |
| パフォーマンス監査を実行する | --perf |
--preset=perf |
| 混合コンテンツの監査を実行する | --mixed-content |
--preset=mixed-content |
Node モジュール
Lighthouse v3 の Node モジュールでは、CLI と同じ設定オプションを使用できます。これは これらのオプションの多くは V2 では無視されていましたが、 Lighthouse の実行方法に影響します
const fs = require('fs');
const lighthouse = require('lighthouse');
async function run() {
// `onlyCategories` was previously only available as a config setting.
// `output` was previously only available in CLI.
const flags = {onlyCategories: ['performance'], output: 'html'};
const html = (await lighthouse('https://google.com/', flags)).report;
fs.writeFileSync('report.html', html);
}
出力の変更
JSON 出力の新しいトップレベル形式
Lighthouse v3 が返す JSON オブジェクトには、次の 3 つのトップレベル プロパティが含まれるようになりました。
lhr。監査の結果。「Lighthouse Results」の略。これは基本的に V2 では最上位オブジェクトとなっていますが、V3 ではこのオブジェクトの形状に互換性を破る変更が行われています。詳しくは、 結果オブジェクトの変更。artifacts。監査中に Chrome から収集されたデータ。以前は混同されていました 必要がありますreport。フォーマットされたレポートの HTML/JSON/CSV（文字列）。
結果オブジェクトの変更
JSON 出力の新しい最上位形式で説明したように、監査の結果は
lhr プロパティから取得できます。V2 では、このオブジェクトのコンテンツは基本的に
JSON 出力です。ただし、このオブジェクト自体の形状は v3 で変更されています。以下の表に、すべての変更を示します。
- 行の v2 列と v3 列の両方に値がある場合は、 コード内の v2 プロパティへの参照を、v3 と同等のものに置き換える必要があります。
- 行の v3 列に値がない場合、メモ列はそれを表します。 選択できます。
- ID などの項目はプレースホルダ テキストを表します。
| v2 プロパティ | v3 と同等の機能 | メモ |
|---|---|---|
initialUrl |
requestedUrl |
|
url |
finalUrl |
|
generatedTime |
fetchedTime |
|
reportCategories |
categories |
配列からキー付きオブジェクトに変更されました。 |
reportGroups |
categoryGroups |
|
audits.ID.name |
audits.ID.id |
|
audits.ID.description |
audits.ID.title |
|
audits.ID.helpText |
audits.ID.description |
|
audits.ID.scoringMode |
audits.ID.scoreDisplayMode |
指定可能な値は、
numeric|binary|manual|informative|not-applicable|error。
|
audits.ID.score |
audits.ID.score |
scoreDisplayMode の場合、スコアは常に 0 ～ 1 の数値です（0 ～ 100 ではありません）。
数値またはバイナリです他の表示モードではスコアが常に null になるため、
概念を見ていきましょう。
|
audits.ID.displayValue |
audits.ID.displayValue |
文字列補間用に printf スタイルの引数の配列を指定できるようになりました。 |
audits.ID.debugString |
audits.ID.explanation
audits.ID.errorMessage
audits.ID.warnings
|
debugString 値は、上記の 3 つのプロパティのいずれかに変換されています。
表示することもできます。
|
audits.ID.details |
audits.ID.details |
詳細の構造がより使いやすくなりました。.items の各エントリは、any[] ではなく信頼できるキーを持つオブジェクトです。 |
audits.ID.error |
audits.ID.scoreDisplayMode === 'error' |
|
audits.ID.notApplicable |
audits.ID.scoreDisplayMode === 'not-applicable' |
|
audits.ID.informative |
audits.ID.scoreDisplayMode === 'informative' |
|
audits.ID.manual |
audits.ID.scoreDisplayMode === 'manual' |
|
audits.ID.extendedInfo |
削除しました。details を代わりに使用してください。
|