微信号:gh_b206cf608d16

介绍:爆米兔,是一个H5营销在线制作工具.

Lighthouse与Google的移动端最佳实践

2018-02-11 11:55 任乃千

编者按:本文由任乃千发表于掘金,作者已授权分享到奇舞周刊。

Lighthouse是一个Google开源的自动化工具,主要用于改进网络应用(移动端)的质量。目前测试项包括页面性能PWA可访问性(无障碍)最佳实践SEO。Lighthouse会对各个测试项的结果打分,并给出优化建议,这些打分标准和优化建议可以视为Google的网页最佳实践。

使用入门


运行Lighthouse的方式有三种:在开发者工具(Devtools)的Audits,作为Chrome拓展程序使用,或者作为命令行工具使用。Chrome开发者工具不需要额外安装,和扩展程序一样提供了一个用户友好的界面,方便读取报告;扩展程序相对于开发者工具的优势是更及时,不用等待Chrome发版就能体验到最新的功能;命令行工具可以将Lighthouse集成到持续集成系统。

开发者工具

仅能在Chrome60及以上使用,因为之前版本的Chrome的开发者工具的audits面板还不是Lighthouse。

通过右上角的菜单或者快捷键(command+option+i)打开开发者工具,然后选择audits面板,点击Perform an audits会弹出一个options面板勾选测试项然后点击Run audits即可。

Chrome拓展程序

安装地址(需要梯子)

在右上角或者菜单里点击图中图标,Options可以配置测试项目,点击Generate report即可测试。

命令行工具

安装:

npm install -g lighthouse

# or use yarn:

# yarn global add lighthouse

使用:

lighthouse https://example.com

配置项:

$ lighthouse --help


lighthouse <url>


Logging:

  --verbose Displays verbose logging [boolean]

  --quiet Displays no progress, debug logs or errors [boolean]


Configuration:

  --save-assets Save the trace contents & screenshots to disk [boolean]

  --list-all-audits Prints a list of all available audits and exits [boolean]

  --list-trace-categories Prints a list of all required trace categories and exits [boolean]

  --additional-trace-categories Additional categories to capture with the trace (comma-delimited).

  --config-path The path to the config JSON.

  --chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see

                                 http://peter.sh/experiments/chromium-command-line-switches/.


                                 Environment variables:

                                 CHROME_PATH: Explicit path of intended Chrome binary. If set must point to an executable of a build of

                                 Chromium version 54.0 or later. By default, any detected Chrome Canary or Chrome (stable) will be launched.

                                                                                                                                       [default: ""]

  --perf Use a performance-test-only configuration [boolean]

  --port The port to use for the debugging protocol. Use 0 for a random port [default: 0]

  --hostname The hostname to use for the debugging protocol. [default: "localhost"]

  --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 [default: 45000]

  --enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More:

                                 https://git.io/vFFTO

  --gather-mode, -G Collect artifacts from a connected browser and save to disk. If audit-mode is not also enabled, the run will quit

                                 early. [boolean]

  --audit-mode, -A Process saved artifacts from disk [boolean]


Output:

  --output Reporter for the results, supports multiple values [choices: "json", "html", "domhtml"] [default: "domhtml"]

  --output-path The file path to output the results. Use 'stdout' to write to stdout.

                 If using JSON output, default is stdout.

                 If using HTML output, default is a file in the working directory with a name based on the test URL and date.

                 If using multiple outputs, --output-path is ignored.

                 Example: --output-path=./lighthouse-results.html

  --view Open HTML report in your browser [boolean]


Options:

  --help Show help [boolean]

  --version Show version number [boolean]

  --blocked-url-patterns Block any network requests to the specified URL patterns [array]

  --disable-storage-reset Disable clearing the browser cache and other storage APIs before a run [boolean]

  --disable-device-emulation Disable Nexus 5X emulation [boolean]

  --disable-cpu-throttling Disable CPU throttling [boolean] [default: false]

  --disable-network-throttling Disable network throttling [boolean]

  --extra-headers Set extra HTTP Headers to pass with request [string]


Examples:

  lighthouse <url> --view Opens the HTML report in a browser after the run completes

  lighthouse <url> --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report

                                                                            generation, etc.

  lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.

  lighthouse <url> --disable-device-emulation --disable-network-throttling Disable device emulation

  lighthouse <url> --chrome-flags="--window-size=412,732" Launch Chrome with a specific window size

  lighthouse <url> --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging

  lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\"}" Stringify\'d JSON HTTP Header key/value pairs to send in requests

  lighthouse <url> --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests


For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.

测试结果示例



最佳实践


这些最佳实践主要针对移动端或者Web应用。某些技术对浏览器版本要求较高,用之前最好在Can I useMDN上查一下浏览器支持情况

打开外部链接使用rel="noopener"

当页面使用 target="_blank" 跳转至另一个页面时,新页面将与您的页面在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript,您的页面性能可能会受影响。最重要的是target="_blank”也是一个安全漏洞。新页面可以通过window.opener访问旧页面的window对象,并且它可以使用window.opener.location=newURL将旧页面导航至不同的网址。所以当在新窗口或标签中打开一个外部链接时,应该始终加上rel="noopener",例如:

<a href="https://examplepetstore.com" target="_blank" rel="noopener">...</a>

地址栏颜色应该和品牌颜色、网页主题匹配

就是地址栏的背景颜色应该和品牌颜色一致 通过meta标签实现的:

<meta name="theme-color" content="#ff6633">

不过仅在认可这个meta的浏览器上有效,比如Chrome for Android,实测pc、ios的Chrome、Safari无效。

如果场景能用上还是能提高一些用户体验的,避免了地址栏突兀。

避免使用AppCache

AppCache已被废弃 考虑使用service worker的Cache API,另外现在ios 11.3也支持了service worker,未来一两年应该有很大发展。

避免使用console.time()

如果使用console.time()测试页面性能,请考虑使用User Timing API。其优势包括:

  • 高分辨率时间戳

  • 可导出的计时数据

  • 与Chrome Devtools TImeline相集成。在 Timeline 录制期间调用 User Timing 函数 performance.measure() 时,DevTools 自动将此测量结果添加到 Timeline 的结果中。 将console.time()替换为performance.mark()。如果需要测量两个label之间经过的时间,则使用performance.measure()。User Timing API

// 获得命名时间戳

window.performance.mark('mark_fully_loaded');

// 获得命名时间戳之间的时间间隔或者与PerformanceTiming的时间间隔

window.performance.measure('measure_load_from_dom', <