灯台をプログラムで実行するための概要

公開: 2022-03-10

簡単な要約↬GoogleのLighthouse分析スイートをプログラムで実行できることは、特に大規模またはより複雑なWebアプリケーションに対して多くの利点を提供します。 Lighthouseをプログラムで使用すると、エンジニアは、Lighthouseの単純なアプリケーション（Lighthouse CIなど）よりも多くのカスタマイズが必要なサイトの品質監視を設定できます。この記事には、Lighthouseの簡単な紹介が含まれており、プログラムで実行することの利点について説明し、基本的な構成について説明します。

Lighthouseは、Googleのウェブサイト品質分析ツールのスイートです。それはあなたがあなたのサイトのパフォーマンス、アクセシビリティ、SEOなどを評価することを可能にします。また、高度に構成可能であるため、最も単純なものから非常に複雑なものまで、すべてのサイトで役立つように十分な柔軟性があります。この柔軟性には、テストを実行するいくつかの異なる方法が含まれており、サイトまたはアプリケーションに最適な方法を選択できます。

Lighthouseを実行する最も簡単な方法の1つは、ChromeのDevToolsLighthouseパネルを使用することです。 Chromeでサイトを開き、ChromeのDevToolsを開くと、[灯台]タブが表示されます。そこから[レポートの生成]をクリックすると、サイトの品質指標の完全なレポートが表示されます。

ただし、この記事で焦点を当てているのは、スペクトルの反対側です。 LighthouseをJavaScriptでプログラム的に実行すると、カスタム実行を構成し、テストする機能を選択して選択し、結果を収集して分析し、サイトとアプリケーションに固有の構成オプションを指定できます。

たとえば、複数のURLからアクセスできるサイトで作業している場合があります。各URLには独自のデータとスタイルがあり、分析できるようにしたいマークアップもあります。または、各テスト実行からデータを収集し、さまざまな方法でコンパイルまたは分析したい場合もあります。サイトまたはアプリケーションに最適なものに基づいてLighthouse分析を実行する方法を選択できるため、サイトの品質を監視し、サイトに問題が発生したり、問題が多すぎたりする前に、サイトに問題がある場所を特定しやすくなります。サイトのユーザー。

Lighthouseをプログラムで実行することは、すべてのサイトにとって最良の選択ではありません。Lighthouseチームがツールを使用するために構築したさまざまな方法をすべて調べることをお勧めします。ただし、プログラムでLighthouseを使用する場合は、以下の情報とチュートリアルで開始できれば幸いです。

灯台オプションのカスタマイズ

Lighthouseをプログラムで実行することの利点は、Lighthouse自体を構成できることだけでなく、Lighthouseテストの周りで実行したいまたは実行する必要のあるすべてのことです。 Lighthouseには、開始するための優れたドキュメントがいくつかあります。ただし、プログラムで実行することを最大限に活用するには、Lighthouseがどのように機能するかを掘り下げて学ぶ必要がある、主に2つの場所があります。テスト実行の構成とテスト結果の報告です。

灯台テスト実行構成

Lighthouseテスト実行の構成は、必要に応じて単純または複雑にすることができるタスクの1つです。

Lighthouseをプログラムで実行する場合、カスタムオプションを提供できる場所は3つあります。テストするURL、Chromeオプション、およびLighthouse構成オブジェクトです。これらの3つすべてが、LighthouseのドキュメントからLighthouseを実行するための関数のパラメーターであることがわかります。

 function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => { opts.port = chrome.port; return lighthouse(url, opts, config).then(results => { return chrome.kill().then(() => results.lhr) }); }); }

これらのパラメータを作成するために必要なコードを使用できます。たとえば、テストしたい複数のページまたはURLを持つサイトがあるとします。 CIタスクの一部としてCI環境でそのテストを実行し、タスクが実行されるたびに必要なすべてのページをチェックしたい場合があります。この設定を使用すると、JavaScriptを使用してURLを作成し、それぞれに対してLighthouseを実行するループを作成できます。

必要になる可能性のあるChromeオプションは、chrome-launcherに渡されるオブジェクトで指定できます。ドキュメントの例では、 optsオブジェクトには、chrome-launcherに渡すことができるchromeFlagsと呼ばれる配列と、chrome-launcherで使用されているポートを保存してLighthouseに渡すことができるポートが含まれています。

最後に、Lighthouse構成オブジェクトを使用すると、Lighthouse固有のオプションを追加できます。 Lighthouseパッケージは、そのまま使用することも、拡張および変更することもできるデフォルトの構成オブジェクトを提供します。このオブジェクトを使用して、テストするLighthouseテストカテゴリの指定など、さまざまなことを実行できます。

ジャンプした後もっと！以下を読み続けてください↓

emulatedFormFactorを使用して、テストをモバイルエミュレーターとデスクトップエミュレーターのどちらで実行するかを指定できます。 extraHeadersを使用して、ブラウザで使用する必要のあるCookieを追加できます。たとえば、結果をHTMLとして出力するデスクトップエミュレーターでアクセシビリティカテゴリのみを実行するテストには、次のような構成オブジェクトが含まれる場合があります。

 const lighthouseOptions = { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html'], }, }

この例は、最小限の構成を表しています。できることはもっとたくさんあります。灯台の構成ドキュメントには、さらに多くの情報があります。また、いくつかのより複雑な実装用のサンプル構成オブジェクトのセットもあります。

カスタム結果レポート

Lighthouseをプログラムで実行すると、3つのフォーマットされたオプションの1つ以上で結果を返すことができます。これは、私の意見では最もエキサイティングな部分です。生のLighthouse Result（LHR）オブジェクトにアクセスできます。

HTML、JSON、CSV

Lighthouseは、HTML、JSON、CSVの3つの異なる方法で結果を自動的にフォーマットします。これらはすべて、基本的なLighthouseレポートテンプレートに基づいて事前構成された結果です。たとえば、ChromeDevTools内でLighthouseテストを実行した場合に表示されます。前のセクションのlighthouseOptions構成オブジェクトで、単一の文字列を持つ配列を含むoutputのキーを確認できます： html 。これは、返される結果のみをHTML形式でフォーマットすることを指定します。結果をHTMLとJSONの両方で表示したい場合、その配列は['html', 'json']ようになります。

Lighthouseが実行されると、 reportとlhrの2つのキーを含む結果オブジェクトが返されます。次のセクションでlhrキーの内容について説明しますが、 reportキーには、要求どおりにフォーマットされた結果を含む配列が含まれています。したがって、たとえば、 ['html', 'json']をリクエストした場合、 results.report[0]にはHTML形式の結果が含まれ、 results.report[1]にはJSON形式の結果が含まれます。

LHRオブジェクト

Lighthouseをプログラムで実行すると、はるかに柔軟な結果オブジェクトであるLHRオブジェクトにアクセスすることもできます。このオブジェクトには、Lighthouse実行からの生の結果といくつかのメタデータが含まれています。より完全なドキュメントは、LighthouseGithubリポジトリにあります。

これらの結果は、カスタムレポートの作成や、分析のための複数の実行からのデータの収集など、さまざまな方法で使用できます。

例：モバイルとデスクトップのアクセシビリティテストの実行

ユーザーが小さい画面を使用しているか大きい画面を使用しているかに応じて異なるコンポーネントをロードするサイトがあるとします。つまり、サイトの各バージョンのHTMLはわずかに異なります。サイトの両方のバージョンがLighthouseアクセシビリティテストで95のスコアを取得し、その基準を満たさないコードがmainブランチにコミットされないようにしたいです。

注： Sparkboxホームページを分析する以下のコードの実用的な例を見たい場合は、ここでリポジトリを見つけることができます。

アクセシビリティカテゴリを2回実行するようにLighthouseを構成し、それぞれに異なる構成オブジェクトを提供できます。1つはemulatedFormFactorをdesktopに設定し、もう1つはmobileに設定します。これを行う簡単な方法は、以下に示すように、両方のオブジェクトを含む配列を作成することです。

 const lighthouseOptionsArray = [ { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html', 'json'], }, }, { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'mobile', output: ['html', 'json'], }, }, ]

次に、この配列をループして、配列内にある各オブジェクトに対してLighthouseテストを実行する関数を作成できます。

注意すべき点の1つは、各実行の間に遅延を導入する必要があるということです。そうしないと、Chromiumが混乱し、実行がエラーになります。これを行うために、 setTimeout間隔が完了したときにpromiseを返すwait関数を追加しました。

 function wait(val) { return new Promise(resolve => setTimeout(resolve, val)); } function launchLighthouse(optionSet, opts, results) { return chromeLauncher .launch({ chromeFlags: opts.chromeFlags }) .then(async chrome => { opts.port = chrome.port; try { results = await lighthouse(url, opts, optionSet); } catch (e) { console.error("lighthouse", e); } if (results) reportResults(results, runEnvironment, optionSet, chrome); await wait(500); chrome.kill(); }); } async function runLighthouseAnalysis() { let results; const opts = { chromeFlags: ["--no-sandbox", "--headless"] }; for (const optionSet of lighthouseOptionsArray) { console.log("****** Starting Lighthouse analysis ******"); await launchLighthouse(optionSet, opts, results); } }

この場合、結果をreportResults関数に送信しています。そこから、結果をローカルファイルに保存し、結果をコンソールに出力して、テストがアクセシビリティのしきい値に合格するか失敗するかを判断する関数に結果を送信します。

 async function reportResults(results, runEnvironment, optionSet, chrome) { if (results.lhr.runtimeError) { return console.error(results.lhr.runtimeError.message); } await writeLocalFile(results, runEnvironment, optionSet); printResultsToTerminal(results.lhr, optionSet); return passOrFailA11y(results.lhr, optionSet, chrome); }

このプロジェクトでは、JSONの結果をCIテストの実行用に指定されたディレクトリに保存し、HTMLファイルをローカルのテスト実行用に指定されたディレクトリに保存できるようにしたいと考えています。 Lighthouseがこれらのさまざまなタイプの結果を返す方法は、要求された順序で配列になっています。

したがって、この例では、 lighthouseOptionsオブジェクトで、配列は最初にHTMLを要求し、次にJSONを要求します。したがって、 report配列には、最初にHTML形式の結果が含まれ、次にJSON形式の結果が含まれます。次に、 writeToLocalFile関数は、正しいバージョンの結果をカスタマイズされた名前のファイルに保存します。

 function createFileName(optionSet, fileType) { const { emulatedFormFactor } = optionSet.settings; const currentTime = new Date().toISOString().slice(0, 16); const fileExtension = fileType === 'json' ? 'json' : 'html'; return `${currentTime}-${emulatedFormFactor}.${fileExtension}`; } function writeLocalFile(results, runEnvironment, optionSet) { if (results.report) { const fileType = runEnvironment === 'ci' ? 'json' : 'html'; const fileName = createFileName(optionSet, fileType); fs.mkdirSync('reports/accessibility/', { recursive: true }, error => { if (error) console.error('error creating directory', error); }); const printResults = fileType === 'json' ? results.report[1] : results.report[0]; return write(printResults, fileType, `reports/accessibility/${fileName}`).catch(error => console.error(error)); } return null; }

また、テストの実行が終了したら、結果を端末に出力したいと思います。これにより、ファイルを開かなくても結果をすばやく簡単に表示できます。

 function printResultsToTerminal(results, optionSet) { const title = results.categories.accessibility.title; const score = results.categories.accessibility.score * 100; console.log('\n********************************\n'); console.log(`Options: ${optionSet.settings.emulatedFormFactor}\n`); console.log(`${title}: ${score}`); console.log('\n********************************'); }

そして最後に、アクセシビリティスコアが私のしきい値スコア95を満たさない場合、テストの実行に失敗できるようにしたいと思います。

 function passOrFailA11y(results, optionSet, chrome) { const targetA11yScore = 95; const { windowSize } = optionSet; const accessibilityScore = results.categories.accessibility.score * 100; if (accessibilityScore) { if (windowSize === 'desktop') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } if (windowSize === 'mobile') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } } }

Lighthouseがサイトの品質を監視するのに役立つさまざまな方法をすべて試してみてください。

ファイナルノート

上記の例は意図的に比較的単純にしていますが、Lighthouseをプログラムで実行したときに何が達成できるかについての概要がわかることを願っています。そして、この柔軟で強力なツールを使用する新しい方法を見つけるきっかけになることを願っています。

ピータードラッカーが言ったように：

「それを測定できなければ、それを改善することはできません。」

特に複雑なサイトの場合、Webサイトの品質を測定するだけでなく監視できることは、より良いWebの構築に大いに役立ちます。

SmashingMagの詳細：

モバイルファーストエクスペリエンスのA / Bテスト
有効性について設計コンセプトをテストする方法
手動アクセシビリティテストの重要性
Tensorflow.jsを使用したフロントエンド開発者向けの機械学習
ワークフローをスピードアップするためのこれらのヒントを使用してUIデザインを開始する