如何使用 Google Lighthouse 测试我的网站？

Google 的新工具测试并提供改进性能、SEO、安全性、最佳实践和可访问性的建议。

谷歌最近发布了Lighthouse，这是一个用于手动和自动审核网站的开源工具。

Google Lighthouse 测试哪些指标？

经过超过 75 个指标的测试，您可以得到总分。网站所有者、SEO 分析师和网站管理员可能对以下一些流行的内容感兴趣。

• 性能– 交互时间、延迟、速度指数、资源优化、TTFB、资产交付、脚本执行时间、DOM 大小等。
• SEO – 移动友好、元、爬行、规范、结构化等。
• 最佳实践– 图像优化、JS 库、浏览器错误日志记录、通过 HTTPS 访问、已知 JS 漏洞等。
• 可访问性– 页面元素、语言、ARIA 属性等。
• PWA （渐进式 Web 应用程序）- HTTP 到 HTTPS 重定向、响应代码正常、3G 上快速加载、启动屏幕、视口等。

这是一个很棒的工具，可以通过多种不同的方式使用。

这是正确的。有很多方法。如果您是开发人员，则可以使用 Node.js 以编程方式运行测试。市场上已经有几种由 Lighthouse 支持的工具可以提供持续的站点性能监控。

让我们看看如何在您的网站上运行 Lighthouse 测试。

从最简单的开始。

使用 web.dev 测量

谷歌几个月前发布了 web.dev 并获得了积极评价。在线测试很容易。

转至测量页面并输入 URL 以运行审核。这将需要几秒钟。将显示包含您的总体分数的详细报告。

结果还显示哪些审计成功指标测试已通过，以及任何需要注意的问题均已得到解决。

不要花太多时间试图获得 100 分。即使是 Google 网站也无法获得 100 分。

请考虑这些作为指导方针并尝试尽可能地改进。

注意：web.dev 使用移动设备模拟测试，但我在创作过程中没有看到使用桌面进行测试的选项。

铬

您知道 Lighthouse 可在 Chrome 浏览器上使用吗？好消息是您可以选择使用移动设备或桌面设备对其进行测试，并且可以在开发人员工具中使用。

• 打开 Chrome 浏览器
• 访问并测试您的网站
• 打开开发人员工具（如果您使用的是 Windows，请按 F12）或右键单击页面并单击“检查”。
• 转到审核选项卡。

正如您在上面看到的，您可以选择要测试的内容。这对于专注于您的目标并更快地获得审核结果非常有用。

Chome 和 web.dev 结果的外观几乎相似。

但如果你仔细观察，这里还有一个额外的指标组——Progressive Web App 。使用 Chrome 进行审核还有另一个原因。

灯塔API

您还可以使用 Lighthouse API 检索 Web 性能数据。只需单击一下，即可提取 HTML、JSON 或 CSV 格式的移动或桌面 Lighthouse 指标。

您还可以通过更改输出格式或关注 SEO 等特定指标来自定义报告。

 {
  "parameters": [
      "--output=html",
      "--only-categories=seo",
  ],
  "url": "example.com"
}

幸运的是，您有一个无条件免费套餐，每月可进行 3,000 次 API 调用。然而，付费服务增加了多地点支持、住宅代理和更高的请求费用，起价仅为每月 5 美元。

Node.js

Lighthouse 可作为节点模块使用。您可以将其安装在服务器上并以编程方式或在命令行上使用它。让我们快速了解一下如何安装 Lighthouse 并运行测试。

在 Ubuntu 18.x 上安装 Lighthouse

以下是在DigitalOcean服务器上测试的。 Lighthouse 需要 Node LTS 8.9 或更高版本。我认为它已经安装了。如果没有，请参阅此 Node.js 安装指南。

另外，服务器上必须安装Chrome浏览器。安装步骤已在此处说明。

安装 Lighthouse 与安装任何其他模块一样简单。

• 登录服务器
• 运行以下命令进行安装

npm install -g lighthouse

我们在这里使用-g ，因此它将作为全局模块安装。

 root@lab:~# npm install -g lighthouse
/usr/bin/lighthouse -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/usr/bin/chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> axe-core@3.1.2 postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core
> node build/utils/postinstall.js

+ lighthouse@4.0.0
added 179 packages from 119 contributors in 10.094s
root@lab:~#

安装后，运行lighthouse命令以验证其安装是否正确。

 root@lab:~# lighthouse
Please provide a url

Specify --help for available options
root@lab:~#

好的，灯塔已准备好执行审核。让我们尝试一些测试选项。

使用无头浏览器运行测试

lighthouse URL --chrome-flags="--headless"

您必须指定包含 HTTP 或 HTTPS 的绝对 URL。

原来的：

 chandan@lab:~$ lighthouse https://.com --chrome-flags="--headless"
  ChromeLauncher Waiting for browser. +0ms
  ChromeLauncher Waiting for browser... +1ms
  ChromeLauncher Waiting for browser..... +511ms
  ChromeLauncher Waiting for browser.....✓ +2ms
  status Connecting to browser +176ms
  status Resetting state with <a href="https://.com/aboutblank-in-chrome-firefox-safari/">about:blank</a> +24ms
  status Benchmarking machine +30ms
  status Initializing… +508ms
  status Loading page & waiting for onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FontSize, CrawlableLinks, MetaRobots, Hreflang, EmbeddedContent, Canonical, RobotsTxt +27ms
  status Retrieving in-page: Scripts +2s
  status Retrieving in-page: CSSUsage +0ms
  status Retrieving in-page: Viewport +0ms
  status Retrieving in-page: ViewportDimensions +0ms
  status Retrieving in-page: ThemeColor +0ms
  status Retrieving in-page: Manifest +0ms
  status Retrieving in-page: RuntimeExceptions +0ms
  status Retrieving in-page: ChromeConsoleMessages +0ms
  status Retrieving in-page: ImageUsage +0ms
  status Retrieving in-page: Accessibility +0ms
  status Retrieving in-page: LinkElements +0ms
  status Retrieving in-page: AnchorsWithNoRelNoopener +1ms
  status Retrieving in-page: AppCacheManifest +0ms
  status Retrieving in-page: Doctype +0ms
  status Retrieving in-page: DOMStats +0ms
  status Retrieving in-page: JSLibraries +0ms
  status Retrieving in-page: OptimizedImages +0ms
  status Retrieving in-page: PasswordInputsWithPreventedPaste +0ms
  status Retrieving in-page: ResponseCompression +0ms
  status Retrieving in-page: TagsBlockingFirstPaint +0ms
  status Retrieving in-page: MetaDescription +0ms
  status Retrieving in-page: FontSize +0ms
  status Retrieving in-page: CrawlableLinks +0ms
  status Retrieving in-page: MetaRobots +0ms
  status Retrieving in-page: Hreflang +0ms
  status Retrieving in-page: EmbeddedContent +0ms
  status Retrieving in-page: Canonical +0ms
  status Retrieving in-page: RobotsTxt +0ms
  status Retrieving trace +1ms
  status Retrieving devtoolsLog & network records +110ms
  status Retrieving: Scripts +27ms
  status Retrieving: CSSUsage +53ms
  status Retrieving: Viewport +192ms
  status Retrieving: ViewportDimensions +5ms
  status Retrieving: ThemeColor +13ms
  status Retrieving: Manifest +2ms
  status Retrieving: RuntimeExceptions +295ms
  status Retrieving: ChromeConsoleMessages +1ms
  status Retrieving: ImageUsage +2ms
  status Retrieving: Accessibility +22ms
  status Retrieving: LinkElements +526ms
  status Retrieving: AnchorsWithNoRelNoopener +10ms
  status Retrieving: AppCacheManifest +6ms
  status Retrieving: Doctype +20ms
  status Retrieving: DOMStats +4ms
  status Retrieving: JSLibraries +50ms
  status Retrieving: OptimizedImages +25ms
  status Retrieving: PasswordInputsWithPreventedPaste +234ms
  status Retrieving: ResponseCompression +3ms
  status Retrieving: TagsBlockingFirstPaint +7ms
  status Retrieving: MetaDescription +6ms
  status Retrieving: FontSize +7ms
  status Retrieving: CrawlableLinks +245ms
  status Retrieving: MetaRobots +6ms
  status Retrieving: Hreflang +2ms
  status Retrieving: EmbeddedContent +2ms
  status Retrieving: Canonical +3ms
  status Retrieving: RobotsTxt +6ms
  status Resetting state with <a href="https://.com/aboutblank-in-chrome-firefox-safari/">about:blank</a> +19ms
  status Loading page & waiting for onload ServiceWorker, Offline, StartUrl +24ms
  status Retrieving in-page: ServiceWorker +59ms
  status Retrieving in-page: Offline +0ms
  status Retrieving in-page: StartUrl +1ms
  status Retrieving devtoolsLog & network records +0ms
  status Retrieving: ServiceWorker +2ms
  status Retrieving: Offline +1ms
  status Retrieving: StartUrl +1ms
  status Resetting state with <a href="https://.com/aboutblank-in-chrome-firefox-safari/">about:blank</a> +5ms
  status Loading page & waiting for onload HTTPRedirect, HTMLWithoutJavaScript +48ms
  status Retrieving in-page: HTTPRedirect +260ms
  status Retrieving in-page: HTMLWithoutJavaScript +0ms
  status Retrieving devtoolsLog & network records +0ms
  status Retrieving: HTTPRedirect +7ms
  status Retrieving: HTMLWithoutJavaScript +12ms
  status Disconnecting from browser... +7ms
  status Analyzing and running audits... +6ms
  status Evaluating: Uses HTTPS +3ms
  status Evaluating: Redirects HTTP traffic to HTTPS +24ms
  status Evaluating: Registers a service worker that controls page and start_url +1ms
  status Evaluating: Current page responds with a 200 when offline +0ms
  status Evaluating: Has a `<meta name="viewport">` tag with `width` or `initial-scale` +1ms
  status Evaluating: Contains some content when JavaScript is not available +1ms
  status Evaluating: First Contentful Paint +6ms
  status Evaluating: First Meaningful Paint +54ms
  status Evaluating: Page load is fast enough on mobile networks +10ms
  status Evaluating: Speed Index +33ms
  status Evaluating: Screenshot Thumbnails +529ms
  status Evaluating: Final Screenshot +287ms
  status Evaluating: Estimated Input Latency +2ms
  status Evaluating: No browser errors logged to the console +16ms
  status Evaluating: Server response times are low (TTFB) +1ms
  status Evaluating: First CPU Idle +1ms
  status Evaluating: Time to Interactive +30ms
  status Evaluating: User Timing marks and measures +0ms
  status Evaluating: Minimize Critical Requests Depth +2ms
  status Evaluating: Avoid multiple page redirects +3ms
  status Evaluating: Web app manifest meets the installability requirements +2ms
  status Evaluating: Configured for a custom splash screen +1ms
  status Evaluating: Sets an address-bar theme color +0ms
  status Evaluating: Content is sized correctly for the viewport +1ms
  status Evaluating: Displays images with correct aspect ratio +0ms
  status Evaluating: Avoids deprecated APIs +1ms
  status Evaluating: Minimizes main-thread work +0ms
  status Evaluating: JavaScript execution time +11ms
  status Evaluating: Preload key requests +3ms
  status Evaluating: Preconnect to required origins +2ms
  status Evaluating: All text remains visible during webfont loads +2ms
  status Evaluating: Network Requests +1ms
  status Evaluating: Metrics +2ms
  status Evaluating: start_url responds with a 200 when offline +1ms
  status Evaluating: Site works cross-browser +1ms
  status Evaluating: Page transitions don't feel like they block on the network +0ms
  status Evaluating: Each page has a URL +0ms
  status Evaluating: `[aria-*]` attributes match their roles +1ms
  status Evaluating: `[role]`s have all required `[aria-*]` attributes +1ms
  status Evaluating: Elements with `[role]` that require specific children `[role]`s, are present +0ms
  status Evaluating: `[role]`s are contained by their required parent element +1ms
  status Evaluating: `[role]` values are valid +1ms
  status Evaluating: `[aria-*]` attributes have valid values +0ms
  status Evaluating: `[aria-*]` attributes are valid and not misspelled +1ms
  status Evaluating: `<audio>` elements contain a `<track>` element with `[kind="captions"]` +1ms
  status Evaluating: Buttons have an accessible name +1ms
  status Evaluating: The page contains a heading, skip link, or landmark region +1ms
  status Evaluating: Background and foreground colors have a sufficient contrast ratio +1ms
  status Evaluating: `<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>` or `<template>` elements. +1ms
  status Evaluating: Definition list items are wrapped in `<dl>` elements +0ms
  status Evaluating: Document has a `<title>` element +1ms
  status Evaluating: `[id]` attributes on the page are unique +1ms
  status Evaluating: `<frame>` or `<iframe>` elements have a title +1ms
  status Evaluating: `<html>` element has a `[lang]` attribute +0ms
  status Evaluating: `<html>` element has a valid value for its `[lang]` attribute +1ms
  status Evaluating: Image elements have `[alt]` attributes +1ms
  status Evaluating: `<input type="image">` elements have `[alt]` text +1ms
  status Evaluating: Form elements have associated labels +0ms
  status Evaluating: Presentational `<table>` elements avoid using `<th>`, `<caption>` or the `[summary]` attribute. +1ms
  status Evaluating: Links have a discernible name +1ms
  status Evaluating: Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). +1ms
  status Evaluating: List items (`<li>`) are contained within `<ul>` or `<ol>` parent elements +1ms
  status Evaluating: The document does not use `<meta http-equiv="refresh">` +0ms
  status Evaluating: `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5. +1ms
  status Evaluating: `<object>` elements have `[alt]` text +1ms
  status Evaluating: No element has a `[tabindex]` value greater than 0 +1ms
  status Evaluating: Cells in a `<table>` element that use the `[headers]` attribute only refer to other cells of that same table. +1ms
  status Evaluating: `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. +0ms
  status Evaluating: `[lang]` attributes have a valid value +1ms
  status Evaluating: `<video>` elements contain a `<track>` element with `[kind="captions"]` +1ms
  status Evaluating: `<video>` elements contain a `<track>` element with `[kind="description"]` +1ms
  status Evaluating: `[accesskey]` values are unique +1ms
  status Evaluating: Custom controls have associated labels +0ms
  status Evaluating: Custom controls have ARIA roles +1ms
  status Evaluating: User focus is not accidentally trapped in a region +0ms
  status Evaluating: Interactive controls are keyboard focusable +0ms
  status Evaluating: Headings don't skip levels +0ms
  status Evaluating: Interactive elements indicate their purpose and state +1ms
  status Evaluating: The page has a logical tab order +0ms
  status Evaluating: The user's focus is directed to new content added to the page +1ms
  status Evaluating: Offscreen content is hidden from assistive technology +0ms
  status Evaluating: HTML5 landmark elements are used to improve navigation +0ms
  status Evaluating: Visual order on the page follows DOM order +0ms
  status Evaluating: Uses efficient cache policy on static assets +1ms
  status Evaluating: Avoids enormous network payloads +3ms
  status Evaluating: Defer offscreen images +1ms
  status Evaluating: <a href="https://.com/eliminate-render-blocking-wordpress-plugins/">Eliminate render-blocking resources</a> +12ms
  status Evaluating: Minify CSS +28ms
  status Evaluating: Minify JavaScript +64ms
  status Evaluating: Defer unused CSS +69ms
  status Evaluating: Serve images in next-gen formats +12ms
  status Evaluating: Efficiently encode images +11ms
  status Evaluating: Enable text compression +6ms
  status Evaluating: Properly size images +6ms
  status Evaluating: Use video formats for animated content +7ms
  status Evaluating: Avoids Application Cache +11ms
  status Evaluating: Page has the HTML doctype +0ms
  status Evaluating: Avoids an excessive DOM size +1ms
  status Evaluating: Links to cross-origin destinations are safe +2ms
  status Evaluating: Avoids requesting the geolocation permission on page load +1ms
  status Evaluating: Avoids `document.write()` +0ms
  status Evaluating: Avoids front-end JavaScript libraries with known security vulnerabilities +0ms
  status Evaluating: Detected JavaScript libraries +9ms
  status Evaluating: Avoids requesting the notification permission on page load +1ms
  status Evaluating: Allows users to paste into password fields +0ms
  status Evaluating: Uses HTTP/2 for its own resources +0ms
  status Evaluating: Uses passive listeners to improve scrolling performance +1ms
  status Evaluating: Document has a meta description +0ms
  status Evaluating: Page has successful HTTP status code +1ms
  status Evaluating: Document uses legible font sizes +5ms
  status Evaluating: Links have descriptive text +1ms
  status Evaluating: Page isn’t blocked from indexing +1ms
  status Evaluating: robots.txt is valid +2ms
  status Evaluating: Document has a valid `hreflang` +1ms
  status Evaluating: Document avoids plugins +1ms
  status Evaluating: Document has a valid `rel=canonical` +0ms
  status Evaluating: Page is mobile friendly +1ms
  status Evaluating: Structured data is valid +0ms
  status Generating results... +0ms
  ChromeLauncher Killing Chrome instance 7098 +59ms
  Printer html output written to /home/chandan/.com_2019-01-20_19-29-35.report.html +46ms
  CLI Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser +1ms

您可以看到倒数第二行打印了查找报告的路径。默认情况下，报告以 HTML 格式生成，可以通过将其下载到您的 PC 或通过 Web 服务器提供服务来查看。

但是如果您需要生成JSON格式的报告怎么办？

可以如下执行。

 lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json

Lighthouse CLI 让您可以自由地使用 Lighthouse CLI。有关 CLI 或编程使用的更多信息，我们强烈建议您查看 GitHub 存储库。

结论

Google Lighthouse 看起来是一个很有前途的工具，用于执行连续性测试以提高站点性能和可用性。如果您使用 WordPress 并希望您的网站加载速度更快，请查看 Rocket。