clients(lr): fix wrong render-blocking-resources transfer size

core/audits/byte-efficiency/render-blocking-resources.js

@@ -38,10 +38,10 @@ const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 /**
  * Given a simulation's nodeTimings, return an object with the nodes/timing keyed by network URL
  * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
- * @return {Map<string, {node: LH.Gatherer.Simulation.GraphNode, nodeTiming: LH.Gatherer.Simulation.NodeTiming}>}
+ * @return {Map<string, {node: LH.Gatherer.Simulation.GraphNetworkNode, nodeTiming: LH.Gatherer.Simulation.NodeTiming}>}
  */
 function getNodesAndTimingByRequestId(nodeTimings) {
-  /** @type {Map<string, {node: LH.Gatherer.Simulation.GraphNode, nodeTiming: LH.Gatherer.Simulation.NodeTiming}>} */
+  /** @type {Map<string, {node: LH.Gatherer.Simulation.GraphNetworkNode, nodeTiming: LH.Gatherer.Simulation.NodeTiming}>} */
   const requestIdToNode = new Map();
 
   for (const [node, nodeTiming] of nodeTimings) {
@@ -169,7 +169,7 @@ class RenderBlockingResources extends Audit {
 
       results.push({
         url: resource.args.data.url,
-        totalBytes: resource.args.data.encodedDataLength,
+        totalBytes: node.request.transferSize,
         wastedMs,
       });
     }

core/test/audits/byte-efficiency/render-blocking-resources-test.js

@@ -17,6 +17,8 @@ const {Simulator} = Lantern.Simulation;
 
 const trace = readJson('../../fixtures/artifacts/render-blocking/trace.json', import.meta);
 const devtoolsLog = readJson('../../fixtures/artifacts/render-blocking/devtoolslog.json', import.meta);
+const lrTrace = readJson('../../fixtures/artifacts/lr/trace.json.gz', import.meta);
+const lrDevtoolsLog = readJson('../../fixtures/artifacts/lr/devtoolslog.json.gz', import.meta);
 
 const mobileSlow4G = constants.throttling.mobileSlow4G;
 
@@ -38,6 +40,37 @@ describe('Render blocking resources audit', () => {
     assert.deepStrictEqual(result.metricSavings, {FCP: 300, LCP: 0});
   });
 
+  it('considers X-TotalFetchedSize in its reported transfer size', async () => {
+    global.isLightrider = true;
+    after(() => {
+      global.isLightrider = false;
+    });
+
+    const artifacts = {
+      URL: getURLArtifactFromDevtoolsLog(lrDevtoolsLog),
+      GatherContext: {gatherMode: 'navigation'},
+      traces: {defaultPass: lrTrace},
+      devtoolsLogs: {defaultPass: lrDevtoolsLog},
+      Stacks: [],
+    };
+
+    const settings = {throttlingMethod: 'simulate', throttling: mobileSlow4G};
+    const computedCache = new Map();
+    const result = await RenderBlockingResourcesAudit.audit(artifacts, {settings, computedCache});
+    expect(result.details.items).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "totalBytes": 128188,
+    "url": "https://www.llentab.cz/wp-content/uploads/fusion-styles/715df3f482419a9ed822189df6e57839.min.css?ver=3.11.10",
+    "wastedMs": 750,
+  },
+]
+`);
+    assert.equal(result.score, 0);
+    assert.equal(result.numericValue, 0);
+    assert.deepStrictEqual(result.metricSavings, {FCP: 0, LCP: 0});
+  });
+
   it('evaluates correct wastedMs when LCP is text', async () => {
     const textLcpTrace = JSON.parse(JSON.stringify(trace));