srcmini本文概述
Google推出了一项新工具, 可以测试并向你提供建议, 以提高性能, SEO, 安全性, 最佳做法和可访问性。
Google最近推出了Lighthouse(灯塔), 这是一种开放源代码工具, 可以手动和自动审核你的网站。
Google Lighthouse测试了哪些指标？
它测试超过75种指标, 并为你提供整体评分。作为网站所有者, SEO分析师, 网站管理员, 你可能会对以下一些受欢迎的网站感兴趣。
- 性能–交互时间, 延迟, 速度指标, 资源优化, TTFB, 资产交付, 脚本执行时间, DOM大小等。
- SEO –移动友好, 元, 爬网, 规范, 结构等
- 最佳实践-图像优化, JS库, 浏览器错误日志记录, 可通过HTTPS访问, 已知的JS漏洞等
- 可访问性–页面元素, 语言, ARIA属性等。
- PWA(渐进式Web应用程序)–将HTTP重定向到HTTPS, 确定响应代码, 在3G上快速加载, 启动屏幕, 视口等。
它出色的工具, 你可以以多种方式使用。
没错-很多方法。如果你是开发人员, 则可以将其与Node.js结合使用以编程方式运行测试。由Lighthouse提供支持的市场上已经很少有工具可以提供连续的站点性能监控。
让我们了解一下如何对你的网站进行灯塔测试。
从最简单的开始。
通过web.dev测量
Google几个月前发布了web.dev并获得了良好的普及。在线测试很容易。
转到度量页面, 然后输入URL以运行审核。这将需要几秒钟, 你应该会看到带有整体评分的详细报告。
结果还表明, 对于通过的审核, 成功指标测试做得很好, 并且需要注意这些方面的工作。
不要花太多时间获得100分。即使是Google的网站也没有得分。
将它们视为准则, 并尝试尽可能多地改进。
注意：web.dev使用移动设备模拟测试, 在编写时, 我看不到使用桌面进行测试的选项。
Chrome
你是否知道Chrome浏览器中可以使用Lighthouse？而且, 好消息是, 你可以选择使用移动或台式机进行测试。在开发人员工具中可用。
- 开启Chrome浏览器
- 访问你的网站进行测试
- 打开开发人员工具(如果使用Windows, 请按F12键)或右键单击页面, 然后单击检查
- 转到审核标签
如上所示, 你可以选择要测试的内容。这非常好, 因为你可以专注于目标并更快地获得审核结果。
Chome和web.dev的结果外观几乎相似。
但是, 如果仔细看, 这里还有一个额外的指标组-Progressive Web App。这是使用Chrome进行审核的另一个原因。
Node.js
Lighthouse可作为Node模块使用。你可以将其安装在服务器上, 并以编程方式或命令行使用它。让我们快速检查一下如何安装Lighthouse进行测试。
在Ubuntu 18.x上安装Lighthouse
以下, 我已经在DigitalOcean服务器上进行了测试。 Lighthouse需要Node LTS 8.9或更高版本, 我假设你已经安装了它。如果不是, 请参阅此Node.js安装指南。
你还需要在服务器上安装Chrome浏览器。我在这里介绍了安装说明。
与其他模块一样, 安装Lighthouse非常简单。
- 登录到你的服务器
- 运行以下命令进行安装
npm install -g lighthouse我在这里使用-g, 因此它将作为全局模块安装。
[email protected]:~# 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
> [email protected] postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core
> node build/utils/postinstall.js
+ [email protected]
added 179 packages from 119 contributors in 10.094s
[email protected]:~#安装完成后, 运行lighthouse命令以确保已正确安装。
[email protected]:~# lighthouse
Please provide a url
Specify --help for available options
[email protected]:~#很好, 灯塔已准备好进行审核。让我们尝试一些测试选项。
使用无头浏览器运行测试
lighthouse URL --chrome-flags="--headless"你需要提供一个包括http或https的绝对URL。
例如：
[email protected]:~$ lighthouse https://geekflare.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 about:blank +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 about:blank +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 about:blank +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: Eliminate render-blocking resources +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/geekflare.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, 你可以完全控制使用所需的方式。我强烈建议你查看GitHub存储库, 以了解有关使用CLI或以编程方式的更多信息。
总结
Google Lighthouse看起来很有前途, 可以执行连续性测试以提高网站性能和可用性。如果你正在使用WordPress, 并希望使你的网站加载速度更快, 请查看Rocket。
评论前必须登录！
注册