Add time to first byte audit

lighthouse-core/audits/time-to-firstbyte.js

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const Audit = require('./audit');
+const Formatter = require('../report/formatter');
+const URL = require('../lib/url-shim');
+
+const TTFB_THRESHOLD = 200;
+const TTFB_THRESHOLD_BUFFER = 15;
+
+class TTFBMetric extends Audit {
+  /**
+   * @return {!AuditMeta}
+   */
+  static get meta() {
+    return {
+      category: 'Performance',
+      name: 'time-to-firstbyte',
+      description: 'Time To First Byte (TTFB)',
+      informative: true,
+      helpText: 'Time To First Byte identifies the time at which your server sends a response.' +
+        '[Learn more](https://developers.google.com/web/tools/chrome-devtools/network-performance/issues).',
+      requiredArtifacts: ['networkRecords']
+    };
+  }
+
+  static caclulateTTFB(record) {
+    const timing = record._timing;
+
+    return timing.receiveHeadersEnd - timing.sendEnd;
+  }
+
+  /**
+   * @param {!Artifacts} artifacts
+   * @return {!AuditResult}
+   */
+  static audit(artifacts) {
+    const networkRecords = artifacts.networkRecords[Audit.DEFAULT_PASS];
+    const results = [];
+    const walk = (node) => {
+      const children = Object.keys(node);
+
+      children.forEach(id => {
+        const child = node[id];
+
+        const networkRecord = networkRecords.find(record => record._requestId === id);
+
+        if (networkRecord) {
+          const ttfb = TTFBMetric.caclulateTTFB(networkRecord);
+          results.push({
+            url: URL.getDisplayName(networkRecord._url),
+            ttfb: `${Math.round(ttfb).toLocaleString()} ms`,
+            rawTTFB: ttfb
+          });
+        }
+
+        if (child.children) {
+          walk(child.children);
+        }
+      });
+    };
+
+    return artifacts.requestCriticalRequestChains(networkRecords).then(tree => {
+      walk(tree);
+
+      const recordsOverBudget = results.filter(row =>
+          row.rawTTFB > TTFB_THRESHOLD + TTFB_THRESHOLD_BUFFER);
+      let displayValue;
+
+      if (recordsOverBudget.length) {
+        displayValue = recordsOverBudget.length +
+          ` critical request(s) went over the ${TTFB_THRESHOLD} ms threshold`;
+      }
+
+      return {
+        rawValue: recordsOverBudget.length === 0,
+        displayValue,
+        extendedInfo: {
+          formatter: Formatter.SUPPORTED_FORMATS.TABLE,
+          value: {
+            results,
+            tableHeadings: {
+              url: 'Request URL',
+              ttfb: 'Time To First Byte',
+            },
+          },
+        },
+      };
+    });
+  }
+}
+
+module.exports = TTFBMetric;

lighthouse-core/config/default.js

@@ -68,6 +68,7 @@ module.exports = {
     "load-fast-enough-for-pwa",
     "speed-index-metric",
     "estimated-input-latency",
+    "time-to-firstbyte",
     "first-interactive",
     "time-to-interactive",
     "user-timings",
@@ -175,6 +176,10 @@ module.exports = {
           "expectedValue": 100,
           "weight": 1
         },
+        "time-to-firstbyte": {
+          "expectedValue": true,
+          "weight": 1
+        },
         "time-to-interactive": {
           "expectedValue": 100,
           "weight": 1
@@ -670,10 +675,12 @@ module.exports = {
         {"id": "uses-optimized-images", "weight": 0, "group": "perf-hint"},
         {"id": "uses-request-compression", "weight": 0, "group": "perf-hint"},
         {"id": "uses-responsive-images", "weight": 0, "group": "perf-hint"},
+        {"id": "time-to-firstbyte", "weight": 0, "group": "perf-hint"},
         {"id": "total-byte-weight", "weight": 0, "group": "perf-info"},
         {"id": "dom-size", "weight": 0, "group": "perf-info"},
         {"id": "critical-request-chains", "weight": 0, "group": "perf-info"},
         {"id": "user-timings", "weight": 0, "group": "perf-info"}
+
       ]
     },
     "accessibility": {

lighthouse-core/test/audits/time-to-firstbyte-test.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+const TimeToFirstByte = require('../../audits/time-to-firstbyte.js');
+const assert = require('assert');
+
+/* eslint-env mocha */
+describe('Performance: time-to-firstbyte audit', () => {
+  it('fails when ttfb is higher than 215ms', () => {
+    const networkRecords = [
+      {_url: 'https://google.com/', _requestId: '0', _timing: {receiveHeadersEnd: 500, sendEnd: 200}},
+      {_url: 'https://google.com/styles.css', _requestId: '1', _timing: {receiveHeadersEnd: 414, sendEnd: 200}},
+      {_url: 'https://google.com/image.jpg', _requestId: '2', _timing: {receiveHeadersEnd: 600, sendEnd: 400}},
+    ];
+    const artifacts = {networkRecords: {defaultPass: networkRecords}};
+
+    artifacts.requestCriticalRequestChains = () => {
+      return Promise.resolve(
+        {
+          '0': {
+            request: {url: networkRecords[0]._url},
+            children: {
+              '1': {
+                request: {url: networkRecords[1]._url},
+                children: {},
+              }
+            },
+          },
+          '1': {
+            request: {url: networkRecords[2]._url},
+            children: {},
+          }
+        }
+      );
+    };
+
+    TimeToFirstByte.audit(artifacts).then(result => {
+      assert.strictEqual(result.rawValue, false);
+      assert.ok(result.displayValue.includes('1 request(s)'));
+    });
+  });
+
+  it('succeeds when no request is under 215ms', () => {
+    const networkRecords = [
+      {_url: 'https://google.com/', _requestId: '0', _timing: {receiveHeadersEnd: 300, sendEnd: 200}},
+      {_url: 'https://google.com/styles.css', _requestId: '1', _timing: {receiveHeadersEnd: 414, sendEnd: 200}},
+      {_url: 'https://google.com/image.jpg', _requestId: '2', _timing: {receiveHeadersEnd: 600, sendEnd: 400}},
+    ];
+    const artifacts = {networkRecords: {defaultPass: networkRecords}};
+
+    artifacts.requestCriticalRequestChains = () => {
+      return Promise.resolve(
+        {
+          '0': {
+            request: {url: networkRecords[0]._url},
+            children: {
+              '1': {
+                request: {url: networkRecords[1]._url},
+                children: {},
+              }
+            },
+          },
+          '1': {
+            request: {url: networkRecords[2]._url},
+            children: {},
+          }
+        }
+      );
+    };
+
+    TimeToFirstByte.audit(artifacts).then(result => {
+      assert.strictEqual(result.rawValue, true);
+    });
+  });
+});