web效能檢測工具lighthouse

蟲師發表於2021-10-30
Web

About Automated auditing, performance metrics, and best practices for the web.

Lighthouse 可以自動檢查Web頁面的效能。

你可以以多種方式使用它。

瀏覽器外掛

作為瀏覽器外掛，訪問chrome網上商店 搜尋Lighthouse 外掛安裝。以兩種方式使用。

  • 方式一

安裝成功後，訪問想要檢查的頁面，開發外掛，點選Generate report，稍等片刻，你將會得到一份頁面的檢查報告。

  • 方式二

訪問想要檢查的頁面，開啟開發者工具，切換到Lighthouse 標籤使用。

Node CLI

以Node CLI方式使用Lighthouse可以得到最大靈活性，Lighthouse提供了許多引數使用。

Linghthouse 需要Node 14 LTS（14.x） 或更高版本。

  • 安裝
> npm install -g lighthouse
  • 檢視幫助
> lighthouse --help
  • 使用
> lighthouse https://www.baidu.com --output html --output-path ./report.html
√ We're constantly trying to improve Lighthouse and its reliability.
...

--output 指定報告的型別；--output-path 指定報告的路徑。

以程式設計模式使用

建立lighthouse_demo.js 檔案，指令碼如下：

const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
  const runnerResult = await lighthouse('https://www.baidu.com/', options);

  // `.report` is the HTML report as a string
  const reportHtml = runnerResult.report;
  fs.writeFileSync('lhreport.html', reportHtml);

  // `.lhr` is the Lighthouse Result as a JS object
  console.log('Report is done for', runnerResult.lhr.finalUrl);
  console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

  await chrome.kill();
})();

有沒有自動化既視感，還可以設定 headless模式。

  • 執行
> node lighthouse_demo.js

最終，會在當前目錄下生成 lhreport.html 結果檔案。

Web網站

有一些Web網站基於lighthouse 提供服務，你可以登入這些網站輸入URL檢測網路效能。

...

以 web page test 為例：

相關文章