core(lantern): use rendererStartTime instead of networkRequestTime

core/lib/dependency-graph/network-node.js

@@ -26,7 +26,7 @@ class NetworkNode extends BaseNode {
    * @return {number}
    */
   get startTime() {
-    return this._record.networkRequestTime * 1000;
+    return this._record.rendererStartTime * 1000;
   }
 
   /**

core/test/audits/byte-efficiency/byte-efficiency-audit-test.js

@@ -261,7 +261,7 @@ describe('Byte efficiency base audit', () => {
     result = await MockAudit.audit(artifacts, {settings, computedCache});
     // expect lots of savings
     expect(result.numericValue).not.toBeLessThan(5000);
-    expect(result.numericValue).toMatchInlineSnapshot(`55880`);
+    expect(result.numericValue).toMatchInlineSnapshot(`55730`);
   });
 
   it('should compute TTI savings differently from load savings', async () => {

core/test/audits/byte-efficiency/duplicated-javascript-test.js

@@ -366,7 +366,7 @@ describe('DuplicatedJavascript computed artifact', () => {
     const results = await DuplicatedJavascript.audit(artifacts, context);
 
     // Without the `wastedBytesByUrl` this would be zero because the items don't define a url.
-    expect(results.details.overallSavingsMs).toBe(1830);
+    expect(results.details.overallSavingsMs).toBe(1680);
   });
 
   it('_getNodeModuleName', () => {

core/test/computed/page-dependency-graph-test.js

@@ -17,16 +17,16 @@ const sampleDevtoolsLog = readJson('../fixtures/traces/iframe-m79.devtoolslog.js
 function createRequest(
   requestId,
   url,
-  networkRequestTime = 0,
+  rendererStartTime = 0,
   initiator = null,
   resourceType = NetworkRequest.TYPES.Document,
   sessionTargetType = 'page'
 ) {
-  const networkEndTime = networkRequestTime + 50;
+  const networkEndTime = rendererStartTime + 50;
   return {
     requestId,
     url,
-    networkRequestTime,
+    rendererStartTime,
     networkEndTime,
     initiator,
     resourceType,

core/test/fixtures/lantern-baseline-accuracy.json

@@ -10,13 +10,13 @@
     "p95": 0.6406490583915669
   },
   "roughEstimateOfSI": {
-    "p50": 0.2646236166849082,
-    "p90": 0.6493506493506493,
-    "p95": 0.9006036782254668
+    "p50": 0.26426566884939195,
+    "p90": 0.6513486513486514,
+    "p95": 0.9026165650206571
   },
   "roughEstimateOfTTI": {
     "p50": 0.27676284306826177,
-    "p90": 0.6586020003352517,
+    "p90": 0.6565531544791597,
     "p95": 0.7422988097352994
   },
   "roughEstimateOfLCP": {

core/test/lib/dependency-graph/simulator/simulator-test.js

@@ -22,6 +22,10 @@ let nextTid = 1;
 function request(opts) {
   const scheme = opts.scheme || 'http';
   const url = `${scheme}://example.com`;
+  const rendererStartTime = opts.startTime;
+  const networkEndTime = opts.endTime;
+  delete opts.startTime;
+  delete opts.endTime;
 
   return Object.assign({
     requestId: opts.requestId || nextRequestId++,
@@ -30,6 +34,8 @@ function request(opts) {
     protocol: scheme,
     parsedURL: {scheme, host: 'example.com', securityOrigin: url},
     timing: opts.timing,
+    rendererStartTime,
+    networkEndTime,
   }, opts);
 }
 
@@ -89,10 +95,10 @@ describe('DependencyGraph/Simulator', () => {
     });
 
     it('should simulate basic network waterfall graphs', () => {
-      const nodeA = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 1}));
-      const nodeB = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 3}));
-      const nodeC = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 5}));
-      const nodeD = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 7}));
+      const nodeA = new NetworkNode(request({startTime: 0, endTime: 1}));
+      const nodeB = new NetworkNode(request({startTime: 0, endTime: 3}));
+      const nodeC = new NetworkNode(request({startTime: 0, endTime: 5}));
+      const nodeD = new NetworkNode(request({startTime: 0, endTime: 7}));
 
       nodeA.addDependent(nodeB);
       nodeB.addDependent(nodeC);
@@ -109,9 +115,9 @@ describe('DependencyGraph/Simulator', () => {
     });
 
     it('should simulate cached network graphs', () => {
-      const nodeA = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 1,
+      const nodeA = new NetworkNode(request({startTime: 0, endTime: 1,
         fromDiskCache: true}));
-      const nodeB = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 3,
+      const nodeB = new NetworkNode(request({startTime: 0, endTime: 3,
         fromDiskCache: true}));
       nodeA.addDependent(nodeB);
 
@@ -127,9 +133,9 @@ describe('DependencyGraph/Simulator', () => {
       const url = 'data:image/jpeg;base64,foobar';
       const protocol = 'data';
       const parsedURL = {scheme: 'data', host: '', securityOrigin: 'null'};
-      const nodeA = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 1, url,
+      const nodeA = new NetworkNode(request({startTime: 0, endTime: 1, url,
         parsedURL, protocol}));
-      const nodeB = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 3, url,
+      const nodeB = new NetworkNode(request({startTime: 0, endTime: 3, url,
         parsedURL, protocol, resourceSize: 1024 * 1024}));
       nodeA.addDependent(nodeB);
 
@@ -205,10 +211,10 @@ describe('DependencyGraph/Simulator', () => {
     });
 
     it('should not reuse connections', () => {
-      const nodeA = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 1}));
-      const nodeB = new NetworkNode(request({networkRequestTime: 2, networkEndTime: 3}));
-      const nodeC = new NetworkNode(request({networkRequestTime: 2, networkEndTime: 5}));
-      const nodeD = new NetworkNode(request({networkRequestTime: 2, networkEndTime: 7}));
+      const nodeA = new NetworkNode(request({startTime: 0, networkRequestTime: 0, endTime: 1}));
+      const nodeB = new NetworkNode(request({startTime: 2, networkRequestTime: 2, endTime: 3}));
+      const nodeC = new NetworkNode(request({startTime: 2, networkRequestTime: 2, endTime: 5}));
+      const nodeD = new NetworkNode(request({startTime: 2, networkRequestTime: 2, endTime: 7}));
 
       nodeA.addDependent(nodeB);
       nodeA.addDependent(nodeC);
@@ -244,14 +250,14 @@ describe('DependencyGraph/Simulator', () => {
     });
 
     it('should start network requests in startTime order', () => {
-      const rootNode = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 0.05,
+      const rootNode = new NetworkNode(request({startTime: 0, endTime: 0.05,
         connectionId: '1'}));
       const imageNodes = [
-        new NetworkNode(request({networkRequestTime: 5})),
-        new NetworkNode(request({networkRequestTime: 4})),
-        new NetworkNode(request({networkRequestTime: 3})),
-        new NetworkNode(request({networkRequestTime: 2})),
-        new NetworkNode(request({networkRequestTime: 1})),
+        new NetworkNode(request({startTime: 5})),
+        new NetworkNode(request({startTime: 4})),
+        new NetworkNode(request({startTime: 3})),
+        new NetworkNode(request({startTime: 2})),
+        new NetworkNode(request({startTime: 1})),
       ];
 
       for (const imageNode of imageNodes) {
@@ -273,15 +279,15 @@ describe('DependencyGraph/Simulator', () => {
       assertNodeTiming(result, imageNodes[0], {startTime: 4150, endTime: 4950});
     });
 
-    it('should start network requests in priority order to break networkRequestTime ties', () => {
-      const rootNode = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 0.05,
+    it('should start network requests in priority order to break startTime ties', () => {
+      const rootNode = new NetworkNode(request({startTime: 0, endTime: 0.05,
         connectionId: '1'}));
       const imageNodes = [
-        new NetworkNode(request({networkRequestTime: 0.1, priority: 'VeryLow'})),
-        new NetworkNode(request({networkRequestTime: 0.2, priority: 'Low'})),
-        new NetworkNode(request({networkRequestTime: 0.3, priority: 'Medium'})),
-        new NetworkNode(request({networkRequestTime: 0.4, priority: 'High'})),
-        new NetworkNode(request({networkRequestTime: 0.5, priority: 'VeryHigh'})),
+        new NetworkNode(request({startTime: 0.1, priority: 'VeryLow'})),
+        new NetworkNode(request({startTime: 0.2, priority: 'Low'})),
+        new NetworkNode(request({startTime: 0.3, priority: 'Medium'})),
+        new NetworkNode(request({startTime: 0.4, priority: 'High'})),
+        new NetworkNode(request({startTime: 0.5, priority: 'VeryHigh'})),
       ];
 
       for (const imageNode of imageNodes) {
@@ -334,13 +340,13 @@ describe('DependencyGraph/Simulator', () => {
     it('should maximize throughput with H2', () => {
       const simulator = new Simulator({serverResponseTimeByOrigin});
       const connectionDefaults = {protocol: 'h2', connectionId: '1'};
-      const nodeA = new NetworkNode(request({networkRequestTime: 0, networkEndTime: 1,
+      const nodeA = new NetworkNode(request({startTime: 0, endTime: 1,
         ...connectionDefaults}));
-      const nodeB = new NetworkNode(request({networkRequestTime: 1, networkEndTime: 2,
+      const nodeB = new NetworkNode(request({startTime: 1, endTime: 2,
         ...connectionDefaults}));
-      const nodeC = new NetworkNode(request({networkRequestTime: 2, networkEndTime: 3,
+      const nodeC = new NetworkNode(request({startTime: 2, endTime: 3,
         ...connectionDefaults}));
-      const nodeD = new NetworkNode(request({networkRequestTime: 3, networkEndTime: 4,
+      const nodeD = new NetworkNode(request({startTime: 3, endTime: 4,
         ...connectionDefaults}));
 
       nodeA.addDependent(nodeB);

core/test/results/sample_v2.json

@@ -2893,13 +2893,13 @@
       "id": "prioritize-lcp-image",
       "title": "Preload Largest Contentful Paint image",
       "description": "If the LCP element is dynamically added to the page, you should preload the image in order to improve LCP. [Learn more about preloading LCP elements](https://web.dev/articles/optimize-lcp#optimize_when_the_resource_is_discovered).",
-      "score": 0.5,
+      "score": 0,
       "scoreDisplayMode": "metricSavings",
-      "numericValue": 0,
+      "numericValue": 317.72400000000016,
       "numericUnit": "millisecond",
-      "displayValue": "",
+      "displayValue": "Potential savings of 320 ms",
       "metricSavings": {
-        "LCP": 0
+        "LCP": 300
       },
       "details": {
         "type": "opportunity",
@@ -2939,10 +2939,10 @@
               "nodeLabel": "Do better web tester page"
             },
             "url": "http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?redirected-lcp",
-            "wastedMs": 0
+            "wastedMs": 317.72400000000016
           }
         ],
-        "overallSavingsMs": 0,
+        "overallSavingsMs": 317.72400000000016,
         "sortedBy": [
           "wastedMs"
         ],
@@ -4600,7 +4600,7 @@
       "warnings": [],
       "metricSavings": {
         "FCP": 0,
-        "LCP": 600
+        "LCP": 650
       },
       "details": {
         "type": "opportunity",
@@ -4638,7 +4638,7 @@
           "type": "debugdata",
           "metricSavings": {
             "FCP": 0,
-            "LCP": 610
+            "LCP": 630
           }
         }
       },
@@ -4687,7 +4687,7 @@
       "displayValue": "Potential savings of 63 KiB",
       "metricSavings": {
         "FCP": 0,
-        "LCP": 300
+        "LCP": 350
       },
       "details": {
         "type": "opportunity",
@@ -4741,7 +4741,7 @@
           "type": "debugdata",
           "metricSavings": {
             "FCP": 0,
-            "LCP": 300
+            "LCP": 330
           }
         }
       },
@@ -4759,7 +4759,7 @@
       "warnings": [],
       "metricSavings": {
         "FCP": 0,
-        "LCP": 450
+        "LCP": 350
       },
       "details": {
         "type": "opportunity",
@@ -4860,7 +4860,7 @@
           "type": "debugdata",
           "metricSavings": {
             "FCP": 0,
-            "LCP": 450
+            "LCP": 330
           }
         }
       },
@@ -4910,7 +4910,7 @@
       "displayValue": "Potential savings of 143 KiB",
       "metricSavings": {
         "FCP": 150,
-        "LCP": 1050
+        "LCP": 950
       },
       "details": {
         "type": "opportunity",
@@ -4952,7 +4952,7 @@
           "type": "debugdata",
           "metricSavings": {
             "FCP": 150,
-            "LCP": 1060
+            "LCP": 930
           }
         }
       },
@@ -4996,7 +4996,7 @@
       "description": "Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. [Learn more about efficient video formats](https://developer.chrome.com/docs/lighthouse/performance/efficient-animated-content/)",
       "score": 0.5,
       "scoreDisplayMode": "metricSavings",
-      "numericValue": 3450,
+      "numericValue": 3300,
       "numericUnit": "millisecond",
       "displayValue": "Potential savings of 666 KiB",
       "metricSavings": {
@@ -5029,7 +5029,7 @@
             "wastedBytes": 682028
           }
         ],
-        "overallSavingsMs": 3450,
+        "overallSavingsMs": 3300,
         "overallSavingsBytes": 682028,
         "sortedBy": [
           "wastedBytes"
@@ -5087,7 +5087,7 @@
       "displayValue": "Potential savings of 26 KiB",
       "metricSavings": {
         "FCP": 0,
-        "LCP": 150
+        "LCP": 300
       },
       "details": {
         "type": "opportunity",
@@ -5156,7 +5156,7 @@
           "type": "debugdata",
           "metricSavings": {
             "FCP": 0,
-            "LCP": 150
+            "LCP": 300
           }
         }
       },
@@ -10178,6 +10178,20 @@
       "core/audits/prioritize-lcp-image.js | description": [
         "audits[prioritize-lcp-image].description"
       ],
+      "core/lib/i18n/i18n.js | displayValueMsSavings": [
+        {
+          "values": {
+            "wastedMs": 317.72400000000016
+          },
+          "path": "audits[prioritize-lcp-image].displayValue"
+        },
+        {
+          "values": {
+            "wastedMs": 0
+          },
+          "path": "audits[render-blocking-resources].displayValue"
+        }
+      ],
       "core/lib/i18n/i18n.js | columnWastedBytes": [
         "audits[prioritize-lcp-image].details.headings[2].label",
         "audits[render-blocking-resources].details.headings[2].label",
@@ -10641,14 +10655,6 @@
       "core/audits/byte-efficiency/render-blocking-resources.js | description": [
         "audits[render-blocking-resources].description"
       ],
-      "core/lib/i18n/i18n.js | displayValueMsSavings": [
-        {
-          "values": {
-            "wastedMs": 0
-          },
-          "path": "audits[render-blocking-resources].displayValue"
-        }
-      ],
       "core/audits/byte-efficiency/unminified-css.js | title": [
         "audits[unminified-css].title"
       ],