core(network-dependency-tree-insight): add preconnect advice (#16557)

Author: connorjclark

core/audits/audit.js

@@ -194,6 +194,21 @@ class Audit {
     };
   }
 
+  /**
+   * @param {LH.IcuMessage | string=} title
+   * @param {LH.IcuMessage | string=} description
+   * @param {LH.Audit.Details.ListableDetail} value
+   * @return {LH.Audit.Details.ListSectionItem}
+   */
+  static makeListDetailSectionItem(value, title, description) {
+    return {
+      type: 'list-section',
+      title,
+      description,
+      value,
+    };
+  }
+
   /** @typedef {{
    * content: string;
    * title: string;

core/audits/insights/insight-audit.js

@@ -42,7 +42,7 @@ async function getInsightSet(artifacts, context) {
  * @param {LH.Artifacts} artifacts
  * @param {LH.Audit.Context} context
  * @param {T} insightName
- * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => LH.Audit.Details|undefined} createDetails
+ * @param {(insight: import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModels[T], extras: CreateDetailsExtras) => {details: LH.Audit.Details, warnings: Array<string | LH.IcuMessage>}|LH.Audit.Details|undefined} createDetails
  * @template {keyof import('@paulirish/trace_engine/models/trace/insights/types.js').InsightModelsType} T
  * @return {Promise<LH.Audit.Product>}
  */
@@ -64,10 +64,21 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     };
   }
 
-  const details = createDetails(insight, {
+  const cbResult = createDetails(insight, {
     parsedTrace,
     insights,
   });
+
+  const warnings = [...insight.warnings ?? []];
+
+  let details;
+  if (cbResult && 'warnings' in cbResult) {
+    details = cbResult.details;
+    warnings.push(...cbResult.warnings);
+  } else {
+    details = cbResult;
+  }
+
   if (!details || (details.type === 'table' && details.items.length === 0)) {
     return {
       scoreDisplayMode: Audit.SCORING_MODES.NOT_APPLICABLE,
@@ -116,7 +127,7 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     scoreDisplayMode,
     score,
     metricSavings,
-    warnings: insight.warnings,
+    warnings: warnings.length ? warnings : undefined,
     displayValue,
     details,
   };

core/audits/insights/network-dependency-tree-insight.js

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/NetworkDependencyTree.js';
+import {UIStrings, TOO_MANY_PRECONNECTS_THRESHOLD} from '@paulirish/trace_engine/models/trace/insights/NetworkDependencyTree.js';
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct} from './insight-audit.js';
+import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
 const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/NetworkDependencyTree.js', UIStrings);
@@ -24,8 +24,8 @@ class NetworkDependencyTreeInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 1,
-      requiredArtifacts: ['Trace', 'SourceMaps'],
-      replacesAudits: ['critical-request-chains'],
+      requiredArtifacts: ['Trace', 'SourceMaps', 'TraceElements'],
+      replacesAudits: ['critical-request-chains', 'uses-rel-preconnect'],
     };
   }
 
@@ -59,15 +59,92 @@ class NetworkDependencyTreeInsight extends Audit {
    */
   static async audit(artifacts, context) {
     return adaptInsightToAuditProduct(artifacts, context, 'NetworkDependencyTree', (insight) => {
-      const chains = this.traceEngineNodesToDetailsNodes(insight.rootNodes);
+      const list = [];
+      let sectionDetails;
 
-      return {
+      sectionDetails = /** @type {LH.Audit.Details.NetworkTree} */({
         type: 'network-tree',
-        chains,
+        chains: this.traceEngineNodesToDetailsNodes(insight.rootNodes),
         longestChain: {
           duration: Math.round(insight.maxTime / 1000),
         },
-      };
+      });
+      list.push(Audit.makeListDetailSectionItem(sectionDetails));
+
+      // Preconnected origins table.
+      if (insight.preconnectedOrigins.length) {
+        /** @type {LH.Audit.Details.Table['headings']} */
+        const headings = [
+          /* eslint-disable max-len */
+          {key: 'origin', valueType: 'text', subItemsHeading: {key: 'warning'}, label: str_(UIStrings.columnOrigin)},
+          {key: 'source', valueType: 'node', label: str_(UIStrings.columnSource)},
+          /* eslint-enable max-len */
+        ];
+
+        /** @type {LH.Audit.Details.Table['items']} */
+        const items = insight.preconnectedOrigins.map(c => {
+          const warnings = [];
+          if (c.unused) {
+            warnings.push(str_(UIStrings.unusedWarning));
+          }
+          if (c.crossorigin) {
+            warnings.push(str_(UIStrings.crossoriginWarning));
+          }
+          /** @type {LH.Audit.Details.TableSubItems} */
+          const subItems = {
+            type: 'subitems',
+            items: warnings.map(warning => ({warning})),
+          };
+          return {
+            origin: c.url,
+            source: c.source === 'DOM' ?
+              makeNodeItemForNodeId(artifacts.TraceElements, c.node_id) :
+              {type: 'text', value: c.headerText},
+            subItems,
+          };
+        });
+
+        sectionDetails = Audit.makeTableDetails(headings, items);
+      } else {
+        sectionDetails = /** @type {LH.Audit.Details.TextValue} */ (
+          {type: 'text', value: str_(UIStrings.noPreconnectOrigins)});
+      }
+
+      list.push(Audit.makeListDetailSectionItem(
+        sectionDetails,
+        str_(UIStrings.preconnectOriginsTableTitle),
+        str_(UIStrings.preconnectOriginsTableDescription)));
+
+      // Estimated savings table.
+      if (insight.preconnectCandidates.length) {
+        /** @type {LH.Audit.Details.Table['headings']} */
+        const headings = [
+          {key: 'origin', valueType: 'text', label: str_(UIStrings.columnOrigin)},
+          {key: 'wastedMs', valueType: 'ms', label: str_(UIStrings.columnWastedMs)},
+        ];
+
+        /** @type {LH.Audit.Details.Table['items']} */
+        const items = insight.preconnectCandidates.map(c => {
+          return {origin: c.origin, wastedMs: c.wastedMs};
+        });
+
+        sectionDetails = Audit.makeTableDetails(headings, items);
+      } else {
+        sectionDetails = /** @type {LH.Audit.Details.TextValue} */ (
+          {type: 'text', value: str_(UIStrings.noPreconnectCandidates)});
+      }
+
+      list.push(Audit.makeListDetailSectionItem(
+        sectionDetails,
+        str_(UIStrings.estSavingTableTitle),
+        str_(UIStrings.estSavingTableDescription)));
+
+      const warnings = [];
+      if (insight.preconnectedOrigins.length > TOO_MANY_PRECONNECTS_THRESHOLD) {
+        warnings.push(str_(UIStrings.tooManyPreconnectLinksWarning));
+      }
+
+      return {details: Audit.makeListDetails(list), warnings};
     });
   }
 }