Add time to first byte audit #2126

wardpeet · 2017-05-02T21:17:54Z

Succes:

Error:

patrickhulce

this is awesome! we've been sorely missing more server-side-ish audits and love the direction 🎉

patrickhulce · 2017-05-02T21:22:34Z

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

+const Formatter = require('../report/formatter');
+const URL = require('../lib/url-shim');
+
+const TTFB_THRESHOLD = 200;


we should probably use a variable threshold since throttling could easily make every request look like a "failure", maybe we determine a threshold based on the minimum TTFB?

either way we should probably just mark as informative: true in the meta and give the top X requests sorted by slowness

Do you mean to go through all requests? Or just sort the critical ones?
🤔 throttling shouldn't mess up the ttfb as it's a server side metric? So what variable are we thinking of? 10%?

TIL: informative: true , didn't know we had these options 😛

well kinda receiveHeadersEnd - sendEnd will be at least RTT/2 + server response time, right? if we're emulating RTT to 400ms for example everything would start to be flagged

seems right indeed, I believe we're not able to calculate real TTFB. I could do an estimate of a roundtrip as you calculate download time

patrickhulce · 2017-05-02T21:23:52Z

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

+  static audit(artifacts) {
+    const networkRecords = artifacts.networkRecords[Audit.DEFAULT_PASS];
+    const results = [];
+    const walk = (node) => {


unfortunate that all consumers have to do the walk, I wonder if we should offer a flattened list as a computed artifact too?

would be easier though as we only need the tree for the critical request chain.

should I create an artifact named requestCriticalRequest or requestFlattenedCriticalRequestChains

I was thinking just expose as a flattened property of the existing computed artifact so we don't bother with the computation twice although if you're feeling fancy we could refactor the existing one to call requestCriticalRequests and then build the tree :)

sounds good to me

patrickhulce · 2017-05-02T21:25:51Z

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

+      name: 'time-to-firstbyte',
+      description: 'Time To FirstByte',
+      helpText: 'Time To First Byte identifies the time at which your server sends a response.',
+      requiredArtifacts: ['URL', 'networkRecords']


I don't think we actually use the URL artifact do we? Just the url-shim?

no sorry forgot to remove it, at first I used this to calculate ttfb of the main document but moved to critical assets later on

patrickhulce · 2017-05-02T21:26:56Z

lighthouse-core/config/default.js

@@ -615,6 +620,7 @@ module.exports = {
        {"id": "first-meaningful-paint", "weight": 5},
        {"id": "speed-index-metric", "weight": 1},
        {"id": "estimated-input-latency", "weight": 1},
+        {"id": "time-to-firstbyte", "weight": 1},


going forward we're only going to be scoring the actual metrics in performance, so we can set this weight to 0

nit: could you move this down below with the other 'informative' audits so we don't split the metrics

patrickhulce · 2017-05-02T21:27:27Z

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

+    artifacts.requestCriticalRequestChains = () => {
+      return Promise.resolve(
+        {
+          '0': {


offering a flattened version would make the tests prettier too :)

ebidel · 2017-05-03T04:15:26Z

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

+      category: 'Performance',
+      name: 'time-to-firstbyte',
+      description: 'Time To FirstByte',
+      helpText: 'Time To First Byte identifies the time at which your server sends a response.',


Maybe a Leare more link to https://developers.google.com/web/tools/chrome-devtools/network-performance/issues

thanks for this! Was looking for one but didn't find one immediately

ebidel · 2017-05-03T04:36:04Z

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

+    return {
+      category: 'Performance',
+      name: 'time-to-firstbyte',
+      description: 'Time To FirstByte',


'Time To First Byte (TTFB)'

ebidel · 2017-05-03T04:43:57Z

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

+        displayValue = recordsOverBudget.length +
+        ` critical request(s) went over the ${TTFB_THRESHOLD}ms threshold`;
+      } else {
+        displayValue = 'All critical server requests are fast.';


Let's just omit this if the audit is passing? We usually provide extra context only when the audit is failing.

ebidel · 2017-05-03T05:00:39Z

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

+  static caclulateTTFB(record) {
+    const timing = record._timing;
+
+    return timing.receiveHeadersEnd - timing.sendEnd;


Curious...do we want sendEnd - sendStart? Seeing Souders and other articles calculate TTFB that way.

I've copied these headers from devtools. Not sure which to follow

yeah this is measuring more like response time than TTFB responseStart - startTime is true TTFB but that doesn't seem to be the primary thing we want to be auditing, perhaps we should rename the audit?

It would be sweet if DT had the same names as resource timing. Alas. Do we have access to responseStart or is that the same as sendEnd? https://chromedevtools.github.io/devtools-protocol/tot/Network/#type-ResourceTiming

I believe we don't have true TTFB in devtools.

ebidel · 2017-05-03T05:01:14Z

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

+        const child = node[id];
+
+        const networkRecord = networkRecords.find(record => {
+          return record._requestId === id;


nit: use one line.

ebidel · 2017-05-03T05:05:35Z

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

+          const ttfb = TTFBMetric.caclulateTTFB(networkRecord);
+          results.push({
+            url: URL.getDisplayName(networkRecord._url),
+            ttfb: `${Math.round(ttfb)}ms`,


${Math.round(ttfb)} ms

nit: and maybe throw in .toLocaleString() for good measure :)

ebidel · 2017-05-03T05:06:03Z

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

+      walk(tree);
+
+      const recordsOverBudget = results.filter(row =>
+        row.rawTTFB > TTFB_THRESHOLD + TTFB_THRESHOLD_BUFFER);


4 space indent

ebidel · 2017-05-03T05:06:06Z

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

+
+      if (recordsOverBudget.length) {
+        displayValue = recordsOverBudget.length +
+        ` critical request(s) went over the ${TTFB_THRESHOLD}ms threshold`;


4 space indent

space before "ms": ${TTFB_THRESHOLD} ms

ebidel · 2017-05-03T05:07:34Z

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

+          formatter: Formatter.SUPPORTED_FORMATS.TABLE,
+          value: {
+            results,
+            tableHeadings: {


For the v2 report, you'll want to put this in a details table. @paulirish is working on that in #2019

oh i'll have a look

ebidel · 2017-05-03T05:07:52Z

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

@@ -0,0 +1,89 @@
+/**
+ * Copyright 2016 Google Inc. All rights reserved.


paulirish

approving early for extra testing.

i'm open to disabling if its not ready.

wardpeet · 2017-05-09T19:33:31Z

I had a few changes ready to go, was fixing the details export of audit and cleaning up the criticalRequestChains but I can open an extra PR just for that 😄

paulirish · 2017-05-09T19:53:18Z

@wardpeet sounds good. let's do that in a new one.

wardpeet added 2 commits May 2, 2017 23:15

Add time to first byte audit

f8ac5bc

Add time to first byte audit to the config

08c93ad

patrickhulce suggested changes May 2, 2017

View reviewed changes

ebidel reviewed May 3, 2017

View reviewed changes

ebidel suggested changes May 3, 2017

View reviewed changes

wardpeet and others added 2 commits May 3, 2017 22:16

Review changes

28fcba5

Merge branch 'master' into feature/audit-ttfb

aaba8d2

paulirish approved these changes May 9, 2017

View reviewed changes

paulirish merged commit 0e80b61 into master May 9, 2017

paulirish deleted the feature/audit-ttfb branch May 9, 2017 19:28

paulirish mentioned this pull request May 9, 2017

TTFB Audit followup #2192

Closed

This was referenced May 7, 2020

Proposal: rename time-to-first-byte to server-response-time #10720

Closed

core: change ttfb audit name to server-response-time #10735

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add time to first byte audit #2126

Add time to first byte audit #2126

wardpeet commented May 2, 2017

patrickhulce left a comment

patrickhulce May 2, 2017

wardpeet May 3, 2017

patrickhulce May 3, 2017

wardpeet May 3, 2017

patrickhulce May 2, 2017

wardpeet May 3, 2017 •

edited

Loading

patrickhulce May 3, 2017

wardpeet May 3, 2017

patrickhulce May 2, 2017

wardpeet May 3, 2017

patrickhulce May 2, 2017

patrickhulce May 2, 2017

ebidel May 3, 2017

wardpeet May 3, 2017

ebidel May 3, 2017 •

edited

Loading

ebidel May 3, 2017

ebidel May 3, 2017

wardpeet May 3, 2017

patrickhulce May 3, 2017

ebidel May 3, 2017

wardpeet May 3, 2017

ebidel May 3, 2017

ebidel May 3, 2017

patrickhulce May 3, 2017

ebidel May 3, 2017

ebidel May 3, 2017

ebidel May 3, 2017

ebidel May 3, 2017

wardpeet May 3, 2017

ebidel May 3, 2017

paulirish left a comment

wardpeet commented May 9, 2017 •

edited

Loading

paulirish commented May 9, 2017

		@@ -0,0 +1,89 @@
		/**
		* Copyright 2016 Google Inc. All rights reserved.

Add time to first byte audit #2126

Add time to first byte audit #2126

Conversation

wardpeet commented May 2, 2017

patrickhulce left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wardpeet May 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ebidel May 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulirish left a comment

Choose a reason for hiding this comment

wardpeet commented May 9, 2017 • edited Loading

paulirish commented May 9, 2017

wardpeet May 3, 2017 •

edited

Loading

ebidel May 3, 2017 •

edited

Loading

wardpeet commented May 9, 2017 •

edited

Loading