core(insights): implement network-dependency-tree insight

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

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,7 +8,7 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/NetworkDe
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
+import {adaptInsightToAuditProduct} 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);
@@ -25,27 +23,51 @@ class NetworkDependencyTreeInsight extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      guidanceLevel: 3,
-      requiredArtifacts: ['traces', 'TraceElements', 'SourceMaps'],
+      guidanceLevel: 1,
+      requiredArtifacts: ['traces', 'SourceMaps'],
       replacesAudits: ['critical-request-chains'],
     };
   }
 
+  /**
+   * @param {import('@paulirish/trace_engine').Insights.Models.NetworkDependencyTree.CriticalRequestNode[]} nodes
+   * @return {LH.Audit.Details.NetworkNode}
+   */
+  static traceEngineNodesToDetailsNodes(nodes) {
+    /** @type {LH.Audit.Details.NetworkNode} */
+    const simpleRequestNode = {};
+
+    for (const node of nodes) {
+      const {request} = node;
+
+      simpleRequestNode[request.args.data.requestId] = {
+        url: request.args.data.url,
+        navStartToEndTime: Math.round(node.timeFromInitialRequest / 1000),
+        transferSize: request.args.data.encodedDataLength,
+        isLongest: node.isLongest,
+        children: this.traceEngineNodesToDetailsNodes(node.children),
+      };
+    }
+
+    return simpleRequestNode;
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'NetworkDependencyTree', (insight) => {
-      /** @type {LH.Audit.Details.Table['headings']} */
-      const headings = [
-      ];
-      /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
-      return Audit.makeTableDetails(headings, items);
+      const chains = this.traceEngineNodesToDetailsNodes(insight.rootNodes);
+
+      return {
+        type: 'network-tree',
+        chains,
+        longestChain: {
+          duration: Math.round(insight.maxTime / 1000),
+        },
+      };
     });
   }
 }

core/test/fixtures/user-flows/reports/sample-flow-result.json

@@ -4185,9 +4185,26 @@
             "id": "network-dependency-tree-insight",
             "title": "Network dependency tree",
             "description": "[Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.",
-            "score": null,
-            "scoreDisplayMode": "notApplicable",
-            "guidanceLevel": 3,
+            "score": 1,
+            "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "LCP": 0
+            },
+            "details": {
+              "type": "network-tree",
+              "chains": {
+                "9E726BF73EE3F17B3D0E9C4779BDDEF7": {
+                  "url": "https://www.mikescerealshack.co/",
+                  "navStartToEndTime": 173,
+                  "transferSize": 3632,
+                  "children": {}
+                }
+              },
+              "longestChain": {
+                "duration": 173
+              }
+            },
+            "guidanceLevel": 1,
             "replacesAudits": [
               "critical-request-chains"
             ]
@@ -12022,9 +12039,19 @@
             "id": "network-dependency-tree-insight",
             "title": "Network dependency tree",
             "description": "[Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.",
-            "score": null,
-            "scoreDisplayMode": "notApplicable",
-            "guidanceLevel": 3,
+            "score": 1,
+            "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "LCP": 0
+            },
+            "details": {
+              "type": "network-tree",
+              "chains": {},
+              "longestChain": {
+                "duration": 0
+              }
+            },
+            "guidanceLevel": 1,
             "replacesAudits": [
               "critical-request-chains"
             ]
@@ -24372,9 +24399,26 @@
             "id": "network-dependency-tree-insight",
             "title": "Network dependency tree",
             "description": "[Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.",
-            "score": null,
-            "scoreDisplayMode": "notApplicable",
-            "guidanceLevel": 3,
+            "score": 1,
+            "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "LCP": 0
+            },
+            "details": {
+              "type": "network-tree",
+              "chains": {
+                "95864F7341656C3DA17C13B7DF249E7F": {
+                  "url": "https://www.mikescerealshack.co/corrections",
+                  "navStartToEndTime": 185,
+                  "transferSize": 3612,
+                  "children": {}
+                }
+              },
+              "longestChain": {
+                "duration": 185
+              }
+            },
+            "guidanceLevel": 1,
             "replacesAudits": [
               "critical-request-chains"
             ]

core/test/results/sample_v2.json

@@ -6267,9 +6267,99 @@
       "id": "network-dependency-tree-insight",
       "title": "Network dependency tree",
       "description": "[Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.",
-      "score": null,
-      "scoreDisplayMode": "notApplicable",
-      "guidanceLevel": 3,
+      "score": 0,
+      "scoreDisplayMode": "numeric",
+      "metricSavings": {
+        "LCP": 0
+      },
+      "details": {
+        "type": "network-tree",
+        "chains": {
+          "62CEDB8B1F6190031188277D9F158FEB": {
+            "url": "http://localhost:10200/dobetterweb/dbw_tester.html",
+            "navStartToEndTime": 657,
+            "transferSize": 18011,
+            "children": {
+              "26694.2": {
+                "url": "http://localhost:10200/dobetterweb/dbw_tester.css?delay=100",
+                "navStartToEndTime": 1158,
+                "transferSize": 665,
+                "children": {}
+              },
+              "26694.3": {
+                "url": "http://localhost:10200/dobetterweb/unknown404.css?delay=200",
+                "navStartToEndTime": 1167,
+                "transferSize": 0,
+                "children": {}
+              },
+              "26694.4": {
+                "url": "http://localhost:10200/dobetterweb/dbw_tester.css?delay=2200",
+                "navStartToEndTime": 2795,
+                "transferSize": 665,
+                "children": {}
+              },
+              "26694.8": {
+                "url": "http://localhost:10200/dobetterweb/dbw_tester.css?delay=3000&capped",
+                "navStartToEndTime": 3614,
+                "transferSize": 665,
+                "children": {}
+              },
+              "26694.11": {
+                "url": "http://localhost:10200/dobetterweb/dbw_disabled.css?delay=200&isdisabled",
+                "navStartToEndTime": 1229,
+                "transferSize": 700,
+                "children": {}
+              },
+              "26694.14": {
+                "url": "http://localhost:10200/dobetterweb/dbw_tester.css?delay=3000&async=true",
+                "navStartToEndTime": 4177,
+                "transferSize": 665,
+                "children": {}
+              },
+              "26694.17": {
+                "url": "http://localhost:10200/dobetterweb/fcp-delayer.js?delay=5000",
+                "navStartToEndTime": 6753,
+                "transferSize": 0,
+                "children": {}
+              },
+              "26694.24": {
+                "url": "http://localhost:10200/dobetterweb/third_party/aggressive-promise-polyfill.js",
+                "navStartToEndTime": 6627,
+                "transferSize": 166576,
+                "children": {}
+              },
+              "26694.44": {
+                "url": "http://localhost:10200/dobetterweb/dbw_tester.css?scriptActivated&delay=200",
+                "navStartToEndTime": 7969,
+                "transferSize": 665,
+                "children": {}
+              },
+              "26694.15": {
+                "url": "http://localhost:10200/dobetterweb/dbw_tester.js",
+                "navStartToEndTime": 1738,
+                "transferSize": 486,
+                "children": {}
+              },
+              "26694.16": {
+                "url": "http://localhost:10200/dobetterweb/empty_module.js?delay=500",
+                "navStartToEndTime": 1801,
+                "transferSize": 247,
+                "children": {}
+              },
+              "26694.45": {
+                "url": "http://localhost:10200/dobetterweb/dbw_tester.html",
+                "navStartToEndTime": 7882,
+                "transferSize": 18011,
+                "children": {}
+              }
+            }
+          }
+        },
+        "longestChain": {
+          "duration": 7969
+        }
+      },
+      "guidanceLevel": 1,
       "replacesAudits": [
         "critical-request-chains"
       ]

core/test/scenarios/__snapshots__/api-test-pptr.js.snap

@@ -619,7 +619,6 @@ Array [
   "lcp-phases-insight",
   "legacy-javascript",
   "modern-image-formats",
-  "network-dependency-tree-insight",
   "network-rtt",
   "network-server-latency",
   "non-composited-animations",

report/assets/templates.html

@@ -564,6 +564,9 @@
         line-height: 26px;
         white-space: nowrap;
       }
+      .lh-crc .lh-crc-node__longest {
+        color: var(--color-average-secondary);
+      }
       .lh-crc .lh-crc-node__tree-value {
         margin-left: 10px;
       }