core(uses-rel-preconnect): add FCP and LCP savings

core/audits/uses-rel-preconnect.js

@@ -14,6 +14,7 @@ import {LoadSimulator} from '../computed/load-simulator.js';
 import {ProcessedNavigation} from '../computed/processed-navigation.js';
 import {PageDependencyGraph} from '../computed/page-dependency-graph.js';
 import {LanternLargestContentfulPaint} from '../computed/metrics/lantern-largest-contentful-paint.js';
+import {LanternFirstContentfulPaint} from '../computed/metrics/lantern-first-contentful-paint.js';
 
 // Preconnect establishes a "clean" socket. Chrome's socket manager will keep an unused socket
 // around for 10s. Meaning, the time delta between processing preconnect a request should be <10s,
@@ -126,6 +127,7 @@ class UsesRelPreconnectAudit extends Audit {
     const settings = context.settings;
 
     let maxWasted = 0;
+    let maxWastedFCP = 0;
     /** @type {Array<LH.IcuMessage>} */
     const warnings = [];
 
@@ -147,6 +149,13 @@ class UsesRelPreconnectAudit extends Audit {
       if (node.type === 'network' ) lcpGraphURLs.add(node.record.url);
     });
 
+    const fcpGraph =
+      await LanternFirstContentfulPaint.getPessimisticGraph(pageGraph, processedNavigation);
+    const fcpGraphURLs = new Set();
+    fcpGraph.traverse(node => {
+      if (node.type === 'network' ) fcpGraphURLs.add(node.record.url);
+    });
+
     /** @type {Map<string, LH.Artifacts.NetworkRequest[]>}  */
     const origins = new Map();
     networkRecords
@@ -217,6 +226,10 @@ class UsesRelPreconnectAudit extends Audit {
       }
 
       maxWasted = Math.max(wastedMs, maxWasted);
+
+      if (fcpGraphURLs.has(firstRecordOfOrigin.url)) {
+        maxWastedFCP = Math.max(wastedMs, maxWasted);
+      }
       results.push({
         url: securityOrigin,
         wastedMs: wastedMs,
@@ -240,6 +253,7 @@ class UsesRelPreconnectAudit extends Audit {
         score: 1,
         warnings: preconnectLinks.length >= 3 ?
           [...warnings, str_(UIStrings.tooManyPreconnectLinksWarning)] : warnings,
+        metricSavings: {LCP: maxWasted, FCP: maxWastedFCP},
       };
     }
 
@@ -261,6 +275,7 @@ class UsesRelPreconnectAudit extends Audit {
         '',
       warnings,
       details,
+      metricSavings: {LCP: maxWasted, FCP: maxWastedFCP},
     };
   }
 }

core/test/audits/uses-rel-preconnect-test.js

@@ -14,12 +14,14 @@ const mainResource = {
   url: 'https://www.example.com/',
   timing: {receiveHeadersEnd: 0.5},
   networkEndTime: 1000,
+  priority: 'High',
 };
 
 function buildArtifacts(networkRecords) {
   const trace = createTestTrace({
     timeOrigin: 0,
     largestContentfulPaint: 5000,
+    firstContentfulPaint: 5000,
     topLevelTasks: [{ts: 1000, duration: 50}],
   });
   const devtoolsLog = networkRecordsToDevtoolsLog(networkRecords);
@@ -177,6 +179,7 @@ describe('Performance: uses-rel-preconnect audit', () => {
           connectEnd: 300,
           receiveHeadersEnd: 2.3,
         },
+        priority: 'High',
       },
       {
         url: 'https://cdn.example.com/second',
@@ -188,17 +191,19 @@ describe('Performance: uses-rel-preconnect audit', () => {
           connectEnd: 400,
           receiveHeadersEnd: 3.4,
         },
+        priority: 'High',
       },
     ];
 
     const artifacts = buildArtifacts(networkRecords);
     const context = {settings: {}, computedCache: new Map()};
-    const {numericValue, details} = await UsesRelPreconnect.audit(artifacts, context);
+    const {numericValue, details, metricSavings} = await UsesRelPreconnect.audit(artifacts, context);
     assert.equal(numericValue, 300);
     assert.equal(details.items.length, 1);
     assert.deepStrictEqual(details.items, [
       {url: 'https://cdn.example.com', wastedMs: 300},
     ]);
+    assert.deepStrictEqual(metricSavings, {LCP: 300, FCP: 300});
   });
 
   it(`should give a list of important preconnected origins`, async () => {
@@ -214,6 +219,7 @@ describe('Performance: uses-rel-preconnect audit', () => {
           connectEnd: 300,
           receiveHeadersEnd: 2.3,
         },
+        priority: 'High',
       },
       {
         url: 'https://othercdn.example.com/second',
@@ -225,6 +231,7 @@ describe('Performance: uses-rel-preconnect audit', () => {
           connectEnd: 600,
           receiveHeadersEnd: 1.8,
         },
+        priority: 'High',
       },
       {
         url: 'https://unimportant.example.com/second',
@@ -237,6 +244,7 @@ describe('Performance: uses-rel-preconnect audit', () => {
           connectEnd: 600,
           receiveHeadersEnd: 1.8,
         },
+        priority: 'High',
       },
     ];
 
@@ -246,13 +254,15 @@ describe('Performance: uses-rel-preconnect audit', () => {
       numericValue,
       details,
       warnings,
+      metricSavings,
     } = await UsesRelPreconnect.audit(artifacts, context);
     assert.equal(numericValue, 300);
     assert.equal(details.items.length, 2);
     assert.deepStrictEqual(details.items, [
       {url: 'https://othercdn.example.com', wastedMs: 300},
       {url: 'http://cdn.example.com', wastedMs: 150},
     ]);
+    assert.deepStrictEqual(metricSavings, {LCP: 300, FCP: 300});
     assert.equal(warnings.length, 0);
   });
 

core/test/create-test-trace.js

@@ -20,6 +20,7 @@ const lcpImageUrl = 'http://www.example.com/image.png';
  * @property {string} [frameUrl]
  * @property {number} [timeOrigin]
  * @property {number} [largestContentfulPaint]
+ * @property {number} [firstContentfulPaint]
  * @property {number} [traceEnd]
  * @property {Array<TopLevelTaskDef>} [topLevelTasks]
  * @property {Array<ChildFrame>} [childFrames] Add a child frame with a known `frame` id for easy insertion of child frame events.
@@ -140,7 +141,7 @@ function createTestTrace(options) {
     args: {frame: rootFrame},
   }, {
     name: 'firstContentfulPaint',
-    ts: timeOrigin + 10,
+    ts: options.firstContentfulPaint ? options.firstContentfulPaint * 1000 : timeOrigin + 10,
     pid,
     tid,
     ph: 'R',