core: add hidden audits for each insight

.github/workflows/ci.yml

@@ -60,6 +60,7 @@ jobs:
     - run: yarn test-legacy-javascript
     - run: yarn i18n:checks
     - run: yarn dogfood-lhci
+    - run: yarn generate-insight-audits
 
     # Fail if any changes were written to any source files or generated untracked files (ex, from: build/build-cdt-lib.js).
     - run: git add -A && git diff --cached --exit-code

build/build-report.js

@@ -44,7 +44,7 @@ function buildStandaloneReport() {
     outfile: 'dist/report/standalone.js',
     format: 'iife',
     bundle: true,
-    minify: true,
+    minify: !process.env.DEBUG,
   });
 }
 

cli/test/smokehouse/test-definitions/perf-trace-elements.js

@@ -31,6 +31,12 @@ const expectations = {
   },
   artifacts: {
     TraceElements: [
+      {traceEventType: 'trace-engine'},
+      {traceEventType: 'trace-engine'},
+      {traceEventType: 'trace-engine'},
+      {traceEventType: 'trace-engine'},
+      {traceEventType: 'trace-engine'},
+      {traceEventType: 'trace-engine', _minChromiumVersion: '135'},
       {
         traceEventType: 'largest-contentful-paint',
         node: {

core/audits/insights/README.md

@@ -0,0 +1,3 @@
+# Insight audits
+
+When adding new insight audits, you can start off by just running `yarn generate-insight-audits`

core/audits/insights/cls-culprits-insight.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
+
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/CLSCulprits.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.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/CLSCulprits.js', UIStrings);
+
+class CLSCulpritsInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'cls-culprits-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @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, 'CLSCulprits', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default CLSCulpritsInsight;

core/audits/insights/document-latency-insight.js

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/DocumentLatency.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.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/DocumentLatency.js', UIStrings);
+
+class DocumentLatencyInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'document-latency-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @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, 'DocumentLatency', (insight) => {
+      if (!insight.data) {
+        return;
+      }
+
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default DocumentLatencyInsight;

core/audits/insights/dom-size-insight.js

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/DOMSize.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.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/DOMSize.js', UIStrings);
+
+class DOMSizeInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'dom-size-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    return adaptInsightToAuditProduct(artifacts, context, 'DOMSize', (insight) => {
+      if (!insight.maxDOMStats?.args.data.maxChildren || !insight.maxDOMStats?.args.data.maxDepth) {
+        return;
+      }
+
+      const {totalElements, maxChildren, maxDepth} = insight.maxDOMStats.args.data;
+
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+        {key: 'statistic', valueType: 'text', label: str_(UIStrings.statistic)},
+        {key: 'node', valueType: 'node', label: str_(UIStrings.element)},
+        {key: 'value', valueType: 'numeric', label: str_(UIStrings.value)},
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+        {
+          statistic: str_(UIStrings.totalElements),
+          value: {
+            type: 'numeric',
+            granularity: 1,
+            value: totalElements,
+          },
+        },
+        {
+          statistic: str_(UIStrings.maxChildren),
+          node: makeNodeItemForNodeId(artifacts.TraceElements, maxChildren.nodeId),
+          value: {
+            type: 'numeric',
+            granularity: 1,
+            value: maxChildren.numChildren,
+          },
+        },
+        {
+          statistic: str_(UIStrings.maxDOMDepth),
+          node: makeNodeItemForNodeId(artifacts.TraceElements, maxDepth.nodeId),
+          value: {
+            type: 'numeric',
+            granularity: 1,
+            value: maxDepth.depth,
+          },
+        },
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default DOMSizeInsight;

core/audits/insights/font-display-insight.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
+
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/FontDisplay.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.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/FontDisplay.js', UIStrings);
+
+class FontDisplayInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'font-display-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @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, 'FontDisplay', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default FontDisplayInsight;

core/audits/insights/forced-reflow-insight.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
+
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ForcedReflow.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.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/ForcedReflow.js', UIStrings);
+
+class ForcedReflowInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'forced-reflow-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @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, 'ForcedReflow', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default ForcedReflowInsight;

core/audits/insights/image-delivery-insight.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
+
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/ImageDelivery.js';
+
+import {Audit} from '../audit.js';
+import * as i18n from '../../lib/i18n/i18n.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/ImageDelivery.js', UIStrings);
+
+class ImageDeliveryInsight extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'image-delivery-insight',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @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, 'ImageDelivery', (insight) => {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+      ];
+      /** @type {LH.Audit.Details.Table['items']} */
+      const items = [
+      ];
+      return Audit.makeTableDetails(headings, items);
+    });
+  }
+}
+
+export default ImageDeliveryInsight;