简易渐进式网络指标

原文：https://medium.com/hackernoon/easy-progressive-web-metrics-9afa5ed857c2

Lighthouse for Progressive Web Metrics

改善你的网页加载不是一件小事。这需要很多时间，需要很多知识。为了使它更容易，我们有 pwmetrics 库，它应该可以帮助你。

你总是怎么测量的？让我猜猜——你打开 chrome，时间轴标签等等，到目前为止。

我们为你提供什么？控制台中的命令— pwmetrics。

pwmetrics使用 Lighthouse API 获取度量值，如[First Contentful Paint](https://docs.google.com/document/d/1kKGZO3qlBBVOSZTf-T8BOMETzk3bY15SC-jsMJWv4IE/mobilebasic?pref=2&pli=1)、[First Meaningful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)、[First Interactive](https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit#heading=h.k1h25blerz3i),、Perceptual Speed Index ([more about it](https://www.instartlogic.com/blog/perceptual-speed-index-psi-measuring-above-fold-visual-performance-web-pages))、First Visual Changing、Visually Complete 100% 和Visually Complete 85%。

这些值可以用json格式获得

pwmetrics https://example.com --json。

{
  "runs": [
    {
      "timings": [{
        "title": "First Contentful Paint",
        "id": "ttfcp",
        "timestamp": 82750857804,
        "timing": 838.263,
        "color": "green"
      }, {
        "title": "First Meaningful Paint",
        "id": "ttfmp",
        "timestamp": 82750857814,
        "timing": 838.273,
        "color": "green"
      }, {
        "title": "Perceptual Speed Index",
        "id": "psi",
        "timestamp": 82750873600,
        "timing": 854.059,
        "color": "blue"
      }, {
        "title": "First Visual Change",
        "id": "fv",
        "timestamp": 82750873541,
        "timing": 854,
        "color": "blue"
      }, {
        "title": "Visually Complete 85%",
        "id": "vc85",
        "timestamp": 82750873600,
        "timing": 854.059,
        "color": "blue"
      }, {
        "title": "Visually Complete 100%",
        "id": "vc100",
        "timestamp": 82750873541,
        "timing": 854,
        "color": "blue"
      }, {
        "title": "First Interactive (vBeta)",
        "id": "ttfi",
        "timestamp": 82750859471,
        "timing": 839.93,
        "color": "yellow"
      }, {
        "title": "Time to Consistently Interactive (vBeta)",
        "id": "ttci",
        "timestamp": 82750859471,
        "timing": 839.93,
        "color": "yellow"
      }],
      "timestamps": [{"title": "Navigation Start", "id": "navstart", "timestamp": 82750019541}],
      "generatedTime": "2017-05-17T11:50:08.096Z",
      "lighthouseVersion": "2.1.0",
      "initialUrl": "http://example.com",
      "url": "http://example.com/"
    }
  ]
}

或者你可以使用

pwmetrics [http://example.com](http://example.com)

查看带有First Contentful Paint、First Meaningful Paint、Perceptual Speed Index、Time to Interactive值的花式图表。

Results of run “pwmetrics [http://example.com](http://example.com)" command

注:结果用 Nexus 5X 设备仿真、 *5x* CPU 节流、 *1.6 Mbps* 下载速度和 *750 Kbps* 上传速度测量。

要获得近似结果，请使用中值运行选项。

pwmetrics http://example.com --runs=3

它将获得 3 个不同的指标，并近似它们。

注意:至于 *pwmetrics* 依赖于 *Lighthouse* 你可以使用 CLI 将所有标志传递给它。可用的灯塔旗帜——这里描述的是。

例 : `pwmetrics --disableDeviceEmulation "chrome://history/" --save-assets`

CI 用法

让我们更进一步，决定在 CI 中使用它。你真的不想接受降低你的网站/应用性能的新变化。我们也处理好了。

奔跑

pwmetrics --expectations

在运行之前，你需要在你的package.json或者你自己的文件中设置一些配置吗？

除了package.json之外，还可以使用配置文件。更多信息请参见文档

pwmetrics --config=./path-to-file.js

package.json

*"pwmetrics": {
  "url": "http://example.com/",
  "expectations": {
    "ttfmp": {
      "warn": ">=500",
      "error": ">=1000"
    },
    "ttfcp": {
      "warn": ">=500",
      "error": ">=1000"
    }
  }
}*

其工作成果