lighthouse 12.5.1-dev.20250423 → 12.5.1-dev.20250424

package/core/audits/script-treemap-data.js

@@ -16,9 +16,10 @@
 
 import {Audit} from './audit.js';
 import {JSBundles} from '../computed/js-bundles.js';
+import {NetworkRecords} from '../computed/network-records.js';
 import {UnusedJavascriptSummary} from '../computed/unused-javascript-summary.js';
 import {ModuleDuplication} from '../computed/module-duplication.js';
-import {isInline} from '../lib/script-helpers.js';
+import {getRequestForScript, isInline} from '../lib/script-helpers.js';
 
 class ScriptTreemapDataAudit extends Audit {
   /**
@@ -54,6 +55,7 @@ class ScriptTreemapDataAudit extends Audit {
       return {
         name,
         resourceBytes: 0,
+        encodedBytes: undefined,
       };
     }
 
@@ -167,6 +169,9 @@ class ScriptTreemapDataAudit extends Audit {
    * @return {Promise<LH.Treemap.Node[]>}
    */
   static async makeNodes(artifacts, context) {
+    const devtoolsLog = artifacts.DevtoolsLog;
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+
     /** @type {LH.Treemap.Node[]} */
     const nodes = [];
     /** @type {Map<string, LH.Treemap.Node>} */
@@ -234,6 +239,7 @@ class ScriptTreemapDataAudit extends Audit {
         node = {
           name,
           resourceBytes: unusedJavascriptSummary?.totalBytes ?? script.length ?? 0,
+          encodedBytes: undefined,
           unusedBytes: unusedJavascriptSummary?.wastedBytes,
         };
       }
@@ -246,6 +252,7 @@ class ScriptTreemapDataAudit extends Audit {
           htmlNode = {
             name,
             resourceBytes: 0,
+            encodedBytes: undefined,
             unusedBytes: undefined,
             children: [],
           };
@@ -261,6 +268,29 @@ class ScriptTreemapDataAudit extends Audit {
       } else {
         // Non-inline scripts each have their own top-level node.
         nodes.push(node);
+
+        const networkRecord = getRequestForScript(networkRecords, script);
+        if (networkRecord) {
+          const bodyTransferSize =
+            networkRecord.transferSize - networkRecord.responseHeadersTransferSize;
+          node.encodedBytes = bodyTransferSize;
+        } else {
+          node.encodedBytes = node.resourceBytes;
+        }
+      }
+    }
+
+    // For the HTML nodes, set encodedBytes to be the size of all the inline
+    // scripts multiplied by the average compression ratio of the HTML document.
+    for (const [frameId, node] of htmlNodesByFrameId) {
+      const record =
+        networkRecords.find(r => r.resourceType === 'Document' && r.frameId === frameId);
+      if (record) {
+        const inlineScriptsPct = node.resourceBytes / record.resourceSize;
+        const bodyTransferSize = record.transferSize - record.responseHeadersTransferSize;
+        node.encodedBytes = Math.floor(bodyTransferSize * inlineScriptsPct);
+      } else {
+        node.encodedBytes = node.resourceBytes;
       }
     }
 

package/core/scoring.d.ts

@@ -79,6 +79,7 @@ export class ReportScoring {
                 nodes: {
                     name: string | import("./index.js").IcuMessage;
                     resourceBytes: number;
+                    encodedBytes?: number | undefined;
                     unusedBytes?: number | undefined;
                     duplicatedNormalizedModuleName?: string | import("./index.js").IcuMessage | undefined;
                     children?: /*elided*/ any[] | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.5.1-dev.20250423",
+  "version": "12.5.1-dev.20250424",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/shared/localization/locales/en-US.json

@@ -3743,6 +3743,9 @@
   "treemap/app/src/util.js | toggleTableButtonLabel": {
     "message": "Toggle table"
   },
+  "treemap/app/src/util.js | transferBytesLabel": {
+    "message": "Transfer bytes"
+  },
   "treemap/app/src/util.js | unusedBytesLabel": {
     "message": "Unused bytes"
   }

package/shared/localization/locales/en-XL.json

@@ -3743,6 +3743,9 @@
   "treemap/app/src/util.js | toggleTableButtonLabel": {
     "message": "T̂óĝǵl̂é t̂áb̂ĺê"
   },
+  "treemap/app/src/util.js | transferBytesLabel": {
+    "message": "T̂ŕâńŝf́êŕ b̂ýt̂éŝ"
+  },
   "treemap/app/src/util.js | unusedBytesLabel": {
     "message": "Ûńûśêd́ b̂ýt̂éŝ"
   }

package/types/lhr/treemap.d.ts

@@ -49,6 +49,9 @@ declare module Treemap {
     /** Could be a url, a path component from a source map, or an arbitrary string. */
     name: string;
     resourceBytes: number;
+    /** Transfer size of the script. Only set for non-inline top-level script nodes. */
+    encodedBytes?: number;
+    /** Unused bytes, in terms of resource size. */
     unusedBytes?: number;
     /** If present, this module is a duplicate. String is normalized source path. See ModuleDuplication.normalizeSource */
     duplicatedNormalizedModuleName?: string;