Lighthouse 介绍

Lighthouse 是谷歌基于 Apache 2.0 开源协议进行开源的一款Web应用与Web页面性能分析工具。

通过该工具，它能轻松得出你网站页面性能、PWA、最佳实践、无障碍访问、SEO等相关指标评分，并根据评分情况给出相应的优化建议。同时还能将分析数据生成PDF、JSON和HTML等文件格式进行导出使用。

Lighthouse 使用

Lighthouse有两种使用方式：

  1. 通过Google Chrome 浏览器直接使用
  2. 通过命令行的方式使用

方式1 比较适合非技术类网站运营人员，方式2 适用有编程技术基础的人员使用。

通过Google Chrome 浏览器直接使用

Lighthouse本身就已集成在谷歌浏览器之中。

直接使用谷歌浏览器，打开相应的网站页面（这里以 https://www.bookchat.net 为例），然后按F12，进入浏览器的调试模式，并切换到Lighthouse。如下图：

第 0001 荐：Google Lighthouse，强大的SEO和网页性能分析工具 - 图1

此时，你可以勾选要评估的类别和页面运行的设备环境。

Desktop表示分析的是你当前页面在PC端打开的评分，Mobile则表示移动端。

点击Generate report就可以生成相应的报告。如下图：

第 0001 荐：Google Lighthouse，强大的SEO和网页性能分析工具 - 图2

点击相应评分环即可跳到相应评分项，从而看到相应项的优化和改进建议。

如需导出报告，点击右上角的三个点即可。

出于好奇，我用该工具生成了份百度首页的评估报告，结果它的页面SEO评分一般，但是页面加载性能96分…

第 0001 荐：Google Lighthouse，强大的SEO和网页性能分析工具 - 图3

以命令行的方式使用

命令行的使用方式有着更为灵活和高级的用法，但是在这之前你需要安装 Node 12 LTS (12.x) 或更高版本。

我假装你已安装了相应的版本。

安装

执行如下命令，全局安装lighthouse：

  1. npm install -g lighthouse
  2. # 或用 yarn:
  3. # yarn global add lighthouse

npm安装慢的话，可使用cnpm.

使用

lighthouse的基本使用：

  1. lighthouse <url> <options>

如:

  1. lighthouse https://www.bookchat.net

默认情况下，Lighthouse将分析报告写入HTML文件。您可以通过指定options参数来控制输出格式。

更多使用参数

命令行的更多使用方式，可通过lighthouse --help查询：

  1. $ lighthouse --help
  3. lighthouse <url> <options>
  5. Logging:
  6.   --verbose  Displays verbose logging  [boolean] [default: false]
  7.   --quiet    Displays no progress, debug logs, or errors  [boolean] [default: false]
  9. Configuration:
  10.   --save-assets                  Save the trace contents & devtools logs to disk  [boolean] [default: false]
  11.   --list-all-audits              Prints a list of all available audits and exits  [boolean] [default: false]
  12.   --list-trace-categories        Prints a list of all required trace categories and exits  [boolean] [default: false]
  13.   --print-config                 Print the normalized config for the given config and options, then exit.  [boolean] [default: false]
  14.   --additional-trace-categories  Additional categories to capture with the trace (comma-delimited).  [string]
  15.   --config-path                  The path to the config JSON.
  16.                                  An example config file: lighthouse-core/config/lr-desktop-config.js  [string]
  17.   --preset                       Use a built-in configuration.
  18.                                  WARNING: If the --config-path flag is provided, this preset will be ignored.  [string] [choices: "perf", "experimental", "desktop"]
  19.   --chrome-flags                 Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags
  20.                                  Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used.  [string] [default: ""]
  21.   --port                         The port to use for the debugging protocol. Use 0 for a random port  [number] [default: 0]
  22.   --hostname                     The hostname to use for the debugging protocol.  [string] [default: "localhost"]
  23.   --form-factor                  Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead.  [string] [choices: "mobile", "desktop"]
  24.   --screenEmulation              Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
  25.   --emulatedUserAgent            Sets useragent emulation  [string]
  26.   --max-wait-for-load            The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability  [number]
  27.   --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://git.io/vFFTO  [boolean]
  28.   --gather-mode, -G              Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
  29.   --audit-mode, -A               Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
  30.   --only-audits                  Only run the specified audits  [array]
  31.   --only-categories              Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo  [array]
  32.   --skip-audits                  Run everything except these audits  [array]
  33.   --budget-path                  The path to the budget.json file for LightWallet.  [string]
  35. Output:
  36.   --output       Reporter for the results, supports multiple values. choices: "json", "html", "csv"  [array] [default: ["html"]]
  37.   --output-path  The file path to output the results. Use 'stdout' to write to stdout.
  38.                    If using JSON output, default is stdout.
  39.                    If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date.
  40.                    If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc.
  41.                    Example: --output-path=./lighthouse-results.html  [string]
  42.   --view         Open HTML report in your browser  [boolean] [default: false]
  44. Options:
  45.   --version                            Show version number  [boolean]
  46.   --help                               Show help  [boolean]
  47.   --cli-flags-path                     The path to a JSON file that contains the desired CLI flags to apply. Flags specified at the command line will still override the file-based ones.
  48.   --locale                             The locale/language the report should be formatted in
  49.   --blocked-url-patterns               Block any network requests to the specified URL patterns  [array]
  50.   --disable-storage-reset              Disable clearing the browser cache and other storage APIs before a run  [boolean]
  51.   --throttling-method                  Controls throttling method  [string] [choices: "devtools", "provided", "simulate"]
  52.   --throttling
  53.   --throttling.rttMs                   Controls simulated network RTT (TCP layer)
  54.   --throttling.throughputKbps          Controls simulated network download throughput
  55.   --throttling.requestLatencyMs        Controls emulated network RTT (HTTP layer)
  56.   --throttling.downloadThroughputKbps  Controls emulated network download throughput
  57.   --throttling.uploadThroughputKbps    Controls emulated network upload throughput
  58.   --throttling.cpuSlowdownMultiplier   Controls simulated + emulated CPU throttling
  59.   --extra-headers                      Set extra HTTP Headers to pass with request
  60.   --precomputed-lantern-data-path      Path to the file where lantern simulation data should be read from, overwriting the lantern observed estimates for RTT and server latency.  [string]
  61.   --lantern-data-output-path           Path to the file where lantern simulation data should be written to, can be used in a future run with the `precomputed-lantern-data-path` flag.  [string]
  62.   --plugins                            Run the specified plugins  [array]
  63.   --channel  [string] [default: "cli"]
  64.   --chrome-ignore-default-flags  [boolean] [default: false]
  66. Examples:
  67.   lighthouse <url> --view                                                                          Opens the HTML report in a browser after the run completes
  68.   lighthouse <url> --config-path=./myconfig.js                                                     Runs Lighthouse with your own configuration: custom audits, report generation, etc.
  69.   lighthouse <url> --output=json --output-path=./report.json --save-assets                         Save trace, screenshots, and named JSON report.
  70.   lighthouse <url> --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent  Disable device emulation and all throttling
  71.   lighthouse <url> --chrome-flags="--window-size=412,660"                                          Launch Chrome with a specific window size
  72.   lighthouse <url> --quiet --chrome-flags="--headless"                                             Launch Headless Chrome, turn off logging
  73.   lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\", \"x-men\":\"wolverine\"}"        Stringify'd JSON HTTP Header key/value pairs to send in requests
  74.   lighthouse <url> --extra-headers=./path/to/file.json                                             Path to JSON file of HTTP Header key/value pairs to send in requests
  75.   lighthouse <url> --only-categories=performance,pwa                                               Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo
  77. For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.

使用示例

  1. lighthouse
  2. # saves `./<HOST>_<DATE>.report.html`
  4. lighthouse --output json
  5. # json output sent to stdout
  7. lighthouse --output html --output-path ./report.html
  8. # saves `./report.html`
  10. # NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
  11. lighthouse --output json --output html --output-path ./myfile.json
  12. # saves `./myfile.report.json` and `./myfile.report.html`
  14. lighthouse --output json --output html
  15. # saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
  17. lighthouse --output-path=~/mydir/foo.out --save-assets
  18. # saves `~/mydir/foo.report.html`
  19. # saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
  21. lighthouse --output-path=./report.json --output json
  22. # saves `./report.json`

总结

记得以前的CNZZ和百度统计也有网页版的网站网页性能和SEO评分工具,并可以导出报告，但是目前没有再看到相应的入口。

不过现在有了Lighthouse，基本就足够了。

Lighthouse开源地址：https://github.com/GoogleChrome/lighthouse/