core: fix incorrect dpr used for responsive images advice

cli/test/smokehouse/test-definitions/byte-efficiency.js

@@ -214,7 +214,7 @@ const expectations = {
           //   },
           // ],
           debugData: {
-            wastedBytes: '160000 +/- 10000',
+            wastedBytes: '132000 +/- 10000',
           },
         },
       },

cli/test/smokehouse/test-definitions/dobetterweb.js

@@ -351,42 +351,42 @@ const expectations = {
         score: '<0.5',
         metricSavings: {LCP: '>2000'},
         details: {
-          debugData: {wastedBytes: '>1200000'},
+          debugData: {wastedBytes: '>1100000'},
           items: [
             {
               url: 'http://localhost:10200/dobetterweb/lighthouse-rotating.gif',
               totalBytes: 934285,
-              wastedBytes: 682028,
+              wastedBytes: '682028 +/- 10000',
               subItems: {items: [{reason: /Using video formats instead of GIFs/}]},
             },
             {
               url: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?iar1', // filename is a lie...
               totalBytes: 112710,
-              wastedBytes: 112418,
+              wastedBytes: '111815 +/- 10000',
               subItems: {items: [{reason: /This image file is larger than it needs to be \(1024x678\) for its displayed dimensions/}]},
             },
             {
               url: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?isr2',
               totalBytes: 112710,
-              wastedBytes: 111152,
+              wastedBytes: '107937 +/- 10000',
               subItems: {items: [{reason: /This image file is larger than it needs to be \(1024x678\) for its displayed dimensions/}]},
             },
             {
               url: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?iar2',
               totalBytes: 112710,
-              wastedBytes: 111152,
+              wastedBytes: '107937 +/- 10000',
               subItems: {items: [{reason: /This image file is larger than it needs to be \(1024x678\) for its displayed dimensions/}]},
             },
             {
               url: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?isr3',
               totalBytes: 112710,
-              wastedBytes: 98684,
+              wastedBytes: '69754 +/- 30000',
               subItems: {items: [{reason: /This image file is larger than it needs to be \(1024x678\) for its displayed dimensions/}]},
             },
             {
               url: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg',
               totalBytes: 112710,
-              wastedBytes: 98684,
+              wastedBytes: '69754 +/- 30000',
               subItems: {items: [{reason: /This image file is larger than it needs to be \(1024x678\) for its displayed dimensions/}]},
             },
           ],

core/audits/audit.js

@@ -496,9 +496,9 @@ class Audit {
     const trace = artifacts.Trace;
     const devtoolsLog = artifacts.DevtoolsLog;
     const gatherContext = artifacts.GatherContext;
-    const {URL, SourceMaps} = artifacts;
+    const {URL, HostDPR, SourceMaps} = artifacts;
     // eslint-disable-next-line max-len
-    return {trace, devtoolsLog, gatherContext, settings: context.settings, URL, SourceMaps, simulator: null};
+    return {trace, devtoolsLog, gatherContext, settings: context.settings, URL, SourceMaps, HostDPR, simulator: null};
   }
 }
 

core/audits/bootup-time.js

@@ -49,7 +49,7 @@ class BootupTime extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
-      requiredArtifacts: ['Trace', 'DevtoolsLog', 'URL', 'GatherContext', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'DevtoolsLog', 'URL', 'GatherContext', 'SourceMaps', 'HostDPR'],
     };
   }
 

core/audits/byte-efficiency/unminified-css.js

@@ -38,7 +38,7 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['Stylesheets', 'DevtoolsLog', 'Trace', 'URL', 'GatherContext',
-        'SourceMaps'],
+        'SourceMaps', 'HostDPR'],
     };
   }
 

core/audits/byte-efficiency/unminified-javascript.js

@@ -45,7 +45,7 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['Scripts', 'DevtoolsLog', 'Trace', 'GatherContext', 'URL',
-        'SourceMaps'],
+        'SourceMaps', 'HostDPR'],
     };
   }
 

core/audits/byte-efficiency/unused-css-rules.js

@@ -34,8 +34,8 @@ class UnusedCSSRules extends ByteEfficiencyAudit {
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
-      requiredArtifacts:
-        ['Stylesheets', 'CSSUsage', 'URL', 'DevtoolsLog', 'Trace', 'GatherContext', 'SourceMaps'],
+      // eslint-disable-next-line max-len
+      requiredArtifacts: ['Stylesheets', 'CSSUsage', 'URL', 'DevtoolsLog', 'Trace', 'GatherContext', 'SourceMaps', 'HostDPR'],
     };
   }
 

core/audits/byte-efficiency/unused-javascript.js

@@ -69,7 +69,7 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
       requiredArtifacts: ['JsUsage', 'Scripts', 'SourceMaps', 'GatherContext',
-        'DevtoolsLog', 'Trace', 'URL', 'SourceMaps'],
+        'DevtoolsLog', 'Trace', 'URL', 'HostDPR'],
     };
   }
 

core/audits/insights/cache-insight.js

@@ -24,7 +24,7 @@ class CacheInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['uses-long-cache-ttl'],
     };
   }

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

@@ -37,7 +37,7 @@ class CLSCulpritsInsight extends Audit {
       failureTitle: insightStr_(InsightUIStrings.title),
       description: insightStr_(InsightUIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['layout-shifts'],
     };
   }

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

@@ -24,7 +24,7 @@ class DocumentLatencyInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['redirects', 'server-response-time', 'uses-text-compression'],
     };
   }

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

@@ -24,7 +24,7 @@ class DOMSizeInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['dom-size'],
     };
   }

core/audits/insights/duplicated-javascript-insight.js

@@ -27,7 +27,7 @@ class DuplicatedJavaScriptInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 2,
-      requiredArtifacts: ['Trace', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['duplicated-javascript'],
     };
   }

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

@@ -24,7 +24,7 @@ class FontDisplayInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['font-display'],
     };
   }

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

@@ -24,7 +24,7 @@ class ForcedReflowInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
     };
   }
 

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

@@ -29,7 +29,7 @@ class ImageDeliveryInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: [
         'modern-image-formats',
         'uses-optimized-images',

core/audits/insights/inp-breakdown-insight.js

@@ -24,7 +24,7 @@ class INPBreakdownInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['work-during-interaction'],
     };
   }

core/audits/insights/insight-audit.js

@@ -22,8 +22,9 @@ async function getInsightSet(artifacts, context) {
   const settings = context.settings;
   const trace = artifacts.Trace;
   const processedTrace = await ProcessedTrace.request(trace, context);
-  const SourceMaps = artifacts.SourceMaps;
-  const traceEngineResult = await TraceEngineResult.request({trace, settings, SourceMaps}, context);
+  const {SourceMaps, HostDPR} = artifacts;
+  const traceEngineResult =
+    await TraceEngineResult.request({trace, settings, SourceMaps, HostDPR}, context);
 
   const navigationId = processedTrace.timeOriginEvt.args.data?.navigationId;
   const key = navigationId ?? NO_NAVIGATION;

core/audits/insights/lcp-breakdown-insight.js

@@ -24,7 +24,7 @@ class LCPBreakdownInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['largest-contentful-paint-element'],
     };
   }

core/audits/insights/lcp-discovery-insight.js

@@ -24,7 +24,7 @@ class LCPDiscoveryInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['prioritize-lcp-image', 'lcp-lazy-loaded'],
     };
   }

core/audits/insights/legacy-javascript-insight.js

@@ -28,7 +28,7 @@ class LegacyJavaScriptInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 2,
-      requiredArtifacts: ['Trace', 'Scripts', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'Scripts', 'SourceMaps', 'HostDPR'],
     };
   }
 

core/audits/insights/modern-http-insight.js

@@ -24,7 +24,7 @@ class ModernHTTPInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'SourceMaps', 'HostDPR'],
     };
   }
 

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

@@ -24,7 +24,7 @@ class NetworkDependencyTreeInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 1,
-      requiredArtifacts: ['Trace', 'SourceMaps', 'TraceElements'],
+      requiredArtifacts: ['Trace', 'SourceMaps', 'TraceElements', 'HostDPR'],
       replacesAudits: ['critical-request-chains', 'uses-rel-preconnect'],
     };
   }

core/audits/insights/render-blocking-insight.js

@@ -24,7 +24,7 @@ class RenderBlockingInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['render-blocking-resources'],
     };
   }

core/audits/insights/slow-css-selector-insight.js

@@ -28,7 +28,7 @@ class SlowCSSSelectorInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
     };
   }
 

core/audits/insights/third-parties-insight.js

@@ -32,7 +32,7 @@ class ThirdPartiesInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['third-party-summary'],
     };
   }

core/audits/insights/viewport-insight.js

@@ -24,7 +24,7 @@ class ViewportInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 3,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
       replacesAudits: ['viewport'],
     };
   }

core/audits/layout-shifts.js

@@ -47,7 +47,7 @@ class LayoutShifts extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 2,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps', 'HostDPR'],
     };
   }
 
@@ -59,9 +59,9 @@ class LayoutShifts extends Audit {
   static async audit(artifacts, context) {
     const settings = context.settings;
     const trace = artifacts.Trace;
-    const SourceMaps = artifacts.SourceMaps;
+    const {SourceMaps, HostDPR} = artifacts;
     const traceEngineResult =
-      await TraceEngineResult.request({trace, settings, SourceMaps}, context);
+      await TraceEngineResult.request({trace, settings, SourceMaps, HostDPR}, context);
     const clusters = traceEngineResult.data.LayoutShifts.clusters ?? [];
     const {cumulativeLayoutShift: clsSavings, impactByNodeId} =
       await CumulativeLayoutShiftComputed.request(trace, context);

core/audits/long-tasks.js

@@ -68,7 +68,7 @@ class LongTasks extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['Trace', 'DevtoolsLog', 'URL', 'GatherContext', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'DevtoolsLog', 'URL', 'GatherContext', 'SourceMaps', 'HostDPR'],
       guidanceLevel: 1,
     };
   }
@@ -176,7 +176,7 @@ class LongTasks extends Audit {
    */
   static async audit(artifacts, context) {
     const settings = context.settings || {};
-    const {URL, SourceMaps} = artifacts;
+    const {URL, HostDPR, SourceMaps} = artifacts;
     const trace = artifacts.Trace;
     const tasks = await MainThreadTasks.request(trace, context);
     const devtoolsLog = artifacts.DevtoolsLog;
@@ -194,7 +194,7 @@ class LongTasks extends Audit {
       const simulatorOptions = {devtoolsLog, settings: context.settings};
       const pageGraph =
         // eslint-disable-next-line max-len
-        await PageDependencyGraph.request({settings, trace, devtoolsLog, URL, SourceMaps, fromTrace: false}, context);
+        await PageDependencyGraph.request({settings, trace, devtoolsLog, URL, SourceMaps, HostDPR, fromTrace: false}, context);
       const simulator = await LoadSimulator.request(simulatorOptions, context);
       const simulation = simulator.simulate(pageGraph, {label: 'long-tasks-diagnostic'});
       for (const [node, timing] of simulation.nodeTimings.entries()) {

core/audits/mainthread-work-breakdown.js

@@ -46,7 +46,7 @@ class MainThreadWorkBreakdown extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
-      requiredArtifacts: ['Trace', 'DevtoolsLog', 'URL', 'GatherContext', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'DevtoolsLog', 'URL', 'GatherContext', 'SourceMaps', 'HostDPR'],
     };
   }
 

core/audits/metrics.js

@@ -26,7 +26,7 @@ class Metrics extends Audit {
       title: 'Metrics',
       description: 'Collects all available metrics.',
       supportedModes: ['navigation'],
-      requiredArtifacts: ['Trace', 'DevtoolsLog', 'GatherContext', 'URL', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'DevtoolsLog', 'GatherContext', 'URL', 'SourceMaps', 'HostDPR'],
     };
   }
 
@@ -40,9 +40,9 @@ class Metrics extends Audit {
     const gatherContext = artifacts.GatherContext;
     const trace = artifacts.Trace;
     const devtoolsLog = artifacts.DevtoolsLog;
-    const {URL, SourceMaps} = artifacts;
+    const {URL, HostDPR, SourceMaps} = artifacts;
     const summary = await TimingSummary
-      .request({trace, devtoolsLog, gatherContext, settings, URL, SourceMaps}, context);
+      .request({trace, devtoolsLog, gatherContext, settings, URL, SourceMaps, HostDPR}, context);
     const metrics = summary.metrics;
     const debugInfo = summary.debugInfo;
 

core/audits/metrics/first-contentful-paint.js

@@ -27,7 +27,7 @@ class FirstContentfulPaint extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
       supportedModes: ['navigation'],
-      requiredArtifacts: ['Trace', 'DevtoolsLog', 'GatherContext', 'URL', 'SourceMaps'],
+      requiredArtifacts: ['Trace', 'DevtoolsLog', 'GatherContext', 'URL', 'SourceMaps', 'HostDPR'],
     };
   }
 
@@ -67,6 +67,7 @@ class FirstContentfulPaint extends Audit {
     const metricComputationData = {trace, devtoolsLog, gatherContext,
       settings: context.settings, URL: artifacts.URL,
       SourceMaps: artifacts.SourceMaps, simulator: null,
+      HostDPR: artifacts.HostDPR,
     };
     const metricResult = await ComputedFcp.request(metricComputationData, context);
     const options = context.options[context.settings.formFactor];