Merge branch 'main' into 10-docs-staging

.gitattributes

@@ -1,3 +1,5 @@
 *.js eol=lf
 **/locales/*.json linguist-generated=true
-build/** linguist-generated=false
+build/** linguist-generated=false
+report/assets/styles.css linguist-generated=false
+report/renderer/components.js linguist-generated=true

cli/test/fixtures/dobetterweb/dbw_tester.css

@@ -13,7 +13,7 @@ body {
 /* LCP image in a pseudo-element */
 #toppy::before {
   content: '';
-  background-image: url('lighthouse-480x318.jpg?lcp');
+  background-image: url('lighthouse-1024x680.jpg?lcp');
   position: absolute;
   top: 0;
   width: 480px;

cli/test/fixtures/dobetterweb/dbw_tester.html

@@ -216,20 +216,20 @@ <h2 id="toppy" style="background-image:url('');">Do better web tester page</h2>
 
 </template>
 
-<!-- FAIL(image-aspect-ratio): image is naturally 480x318 -->
-<img src="lighthouse-480x318.jpg?iar1" width="120" height="15">
+<!-- FAIL(image-aspect-ratio): image is naturally 1024x680 -->
+<img src="lighthouse-1024x680.jpg?iar1" width="120" height="15">
 <!-- PASS(image-aspect-ratio) -->
 <!-- FAIL(lcp-lazy-loaded) -->
-<img loading="lazy" src="lighthouse-480x318.jpg?iar2" width="120" height="80">
+<img loading="lazy" src="lighthouse-1024x680.jpg?iar2" width="120" height="80">
 
 <!-- FAIL(image-size-responsive): image is naturally 480x318 -->
-<img src="lighthouse-480x318.jpg?isr1" width="360" height="240" style="position: absolute;">
+<img src="lighthouse-480x318.jpg?isr1" width="400" height="360" style="position: absolute;">
 <!-- PASS(image-size-responsive) -->
-<img src="lighthouse-480x318.jpg?isr2" width="120" height="80" style="position: absolute;">
+<img src="lighthouse-1024x680.jpg?isr2" width="120" height="80" style="position: absolute;">
 <!-- PASS(image-size-responsive) -->
-<img src="lighthouse-480x318.jpg?isr3" width="360" height="240" style="image-rendering: pixelated; position: absolute;">
+<img src="lighthouse-1024x680.jpg?isr3" width="360" height="240" style="image-rendering: pixelated; position: absolute;">
 <!-- PASS(image-size-responsive) -->
-<img src="lighthouse-480x318.jpg?isr4" srcset="lighthouse-480x318.jpg 2x" width="360" height="240" style="position: absolute;">
+<img src="lighthouse-1024x680.jpg?isr4" srcset="lighthouse-1024x680.jpg 2x" width="360" height="240" style="position: absolute;">
 
 <!-- FAIL(efficient-animated-content): animated gif found -->
 <img src="lighthouse-rotating.gif" width="811" height="462">

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

@@ -303,13 +303,13 @@ const expectations = {
       // Check that images aren't TOO BIG.
       'uses-responsive-images': {
         details: {
-          overallSavingsBytes: '113000 +/- 5000',
+          overallSavingsBytes: '169000 +/- 5000',
           items: [
-            {wastedPercent: '56 +/- 5', url: /lighthouse-1024x680.jpg/},
-            {wastedPercent: '78 +/- 5', url: /lighthouse-2048x1356.webp\?size0/},
-            {wastedPercent: '56 +/- 5', url: /lighthouse-480x320.webp/},
-            {wastedPercent: '20 +/- 5', url: /lighthouse-480x320.jpg/},
-            {wastedPercent: '20 +/- 5', url: /lighthouse-480x320\.jpg\?attributesized/},
+            {wastedPercent: '81 +/- 5', url: /lighthouse-1024x680.jpg/},
+            {wastedPercent: '88 +/- 5', url: /lighthouse-2048x1356.webp\?size0/},
+            {wastedPercent: '65 +/- 5', url: /lighthouse-480x320.jpg/},
+            {wastedPercent: '65 +/- 5', url: /lighthouse-480x320\.jpg\?attributesized/},
+            {wastedPercent: '81 +/- 5', url: /lighthouse-480x320.webp/},
           ],
         },
       },

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

@@ -393,9 +393,9 @@ const expectations = {
           items: {
             0: {
               displayedAspectRatio: /^120 x 15/,
-              url: 'http://localhost:10200/dobetterweb/lighthouse-480x318.jpg?iar1',
+              url: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?iar1',
             },
-            length: 1,
+            length: 2,
           },
         },
       },
@@ -545,12 +545,12 @@ const expectations = {
               snippet: '<h2 id="toppy" style="background-image:url(\'\');">',
               nodeLabel: 'Do better web tester page',
             },
-            url: 'http://localhost:10200/dobetterweb/lighthouse-480x318.jpg?lcp',
+            url: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?lcp',
             wastedMs: 0,
           }],
           debugData: {
             initiatorPath: [{
-              url: 'http://localhost:10200/dobetterweb/lighthouse-480x318.jpg?lcp',
+              url: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?lcp',
               initiatorType: 'parser',
             }, {
               url: 'http://localhost:10200/dobetterweb/dbw_tester.css?delay=2000&async=true',
@@ -566,7 +566,7 @@ const expectations = {
     },
     fullPageScreenshot: {
       screenshot: {
-        width: 360,
+        width: 412,
         // Allow for differences in platforms.
         height: '1350±100',
         data: /^data:image\/webp;.{500,}/,

cli/test/smokehouse/test-definitions/fps-max-passive.js

@@ -19,10 +19,10 @@ const config = {
 const expectations = {
   artifacts: {
     ViewportDimensions: {
-      innerWidth: 360,
-      innerHeight: 640,
-      outerWidth: 360,
-      outerHeight: 640,
+      innerWidth: 412,
+      innerHeight: 823,
+      outerWidth: 412,
+      outerHeight: 823,
     },
   },
   lhr: {
@@ -32,8 +32,8 @@ const expectations = {
     fullPageScreenshot: {
       screenshot: {
         data: /^data:image\/webp;base64,.{50}/,
-        height: 640,
-        width: 360,
+        height: 823,
+        width: 412,
       },
     },
   },
@@ -44,4 +44,3 @@ export default {
   expectations,
   config,
 };
-

cli/test/smokehouse/test-definitions/fps-max.js

@@ -18,12 +18,11 @@ const config = {
 const expectations = {
   artifacts: {
     ViewportDimensions: {
-      innerWidth: 360,
-      innerHeight: 640,
-      outerWidth: 360,
-      outerHeight: 640,
-      // In DevTools this value will be exactly 3.
-      devicePixelRatio: '2.625 +/- 1',
+      innerWidth: 412,
+      innerHeight: 823,
+      outerWidth: 412,
+      outerHeight: 823,
+      devicePixelRatio: 1.75,
     },
   },
   lhr: {
@@ -34,7 +33,7 @@ const expectations = {
       screenshot: {
         data: /^data:image\/webp;base64,.{50}/,
         height: 16383,
-        width: 360,
+        width: 412,
       },
     },
   },

cli/test/smokehouse/test-definitions/fps-scaled.js

@@ -18,12 +18,11 @@ const config = {
 const expectations = {
   artifacts: {
     ViewportDimensions: {
-      innerWidth: 720,
-      innerHeight: 1280,
-      outerWidth: 360,
-      outerHeight: 640,
-      // In DevTools this value will be exactly 3.
-      devicePixelRatio: '2.625 +/- 1',
+      innerWidth: 824,
+      innerHeight: 1646,
+      outerWidth: 412,
+      outerHeight: 823,
+      devicePixelRatio: 1.75,
     },
   },
   lhr: {
@@ -39,16 +38,16 @@ const expectations = {
               top: 0,
               bottom: 2000,
               left: 0,
-              right: 720,
-              width: 720,
+              right: 824,
+              width: 824,
               height: 2000,
             },
           ],
         ],
       },
       screenshot: {
         height: 2000,
-        width: 720,
+        width: 824,
       },
     },
   },

cli/test/smokehouse/test-definitions/perf-frame-metrics.js

@@ -76,7 +76,7 @@ const expectations = {
               firstContentfulPaintAllFrames: '<5000',
               largestContentfulPaint: '>5000',
               largestContentfulPaintAllFrames: '<5000',
-              cumulativeLayoutShift: '0.197 +/- 0.001',
+              cumulativeLayoutShift: '0.133 +/- 0.001',
               cumulativeLayoutShiftMainFrame: '0.001 +/- 0.0005',
               totalCumulativeLayoutShift: '0.001 +/- 0.0005',
             },

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

@@ -90,12 +90,12 @@ const expectations = {
             top: 465,
             bottom: 502,
             left: 8,
-            right: 352,
-            width: 344,
+            right: 404,
+            width: 396,
             height: 37,
           },
         },
-        score: '0.058 +/- 0.01',
+        score: '0.035 +/- 0.01',
       },
       {
         traceEventType: 'layout-shift',
@@ -106,12 +106,12 @@ const expectations = {
             top: 426,
             bottom: 444,
             left: 8,
-            right: 352,
-            width: 344,
+            right: 404,
+            width: 396,
             height: 18,
           },
         },
-        score: '0.026 +/- 0.01',
+        score: '0.017 +/- 0.01',
       },
       {
         traceEventType: 'animation',

core/audits/third-party-summary.js

@@ -217,11 +217,7 @@ class ThirdPartySummary extends Audit {
 
         return {
           ...stats,
-          entity: {
-            type: /** @type {const} */ ('link'),
-            text: entity.name,
-            url: entity.homepage || '',
-          },
+          entity: entity.name,
           subItems: {
             type: /** @type {const} */ ('subitems'),
             items: ThirdPartySummary.makeSubItems(entity, summaries, stats),
@@ -234,7 +230,7 @@ class ThirdPartySummary extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       /* eslint-disable max-len */
-      {key: 'entity', valueType: 'link', label: str_(UIStrings.columnThirdParty), subItemsHeading: {key: 'url', valueType: 'url'}},
+      {key: 'entity', valueType: 'text', label: str_(UIStrings.columnThirdParty), subItemsHeading: {key: 'url', valueType: 'url'}},
       {key: 'transferSize', granularity: 1, valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), subItemsHeading: {key: 'transferSize'}},
       {key: 'blockingTime', granularity: 1, valueType: 'ms', label: str_(i18n.UIStrings.columnBlockingTime), subItemsHeading: {key: 'blockingTime'}},
       /* eslint-enable max-len */

core/config/constants.js

@@ -52,14 +52,13 @@ const throttling = {
 /**
  * @type {Required<LH.SharedFlagsSettings['screenEmulation']>}
  */
-const MOTOG4_EMULATION_METRICS = {
+const MOTOGPOWER_EMULATION_METRICS = {
   mobile: true,
-  width: 360,
-  height: 640,
-  // Moto G4 is really 3, but a higher value here works against
-  // our perf recommendations.
+  width: 412,
+  height: 823,
+  // This value has some interesting ramifications for image-size-responsive, see:
   // https://github.com/GoogleChrome/lighthouse/issues/10741#issuecomment-626903508
-  deviceScaleFactor: 2.625,
+  deviceScaleFactor: 1.75,
   disabled: false,
 };
 
@@ -76,12 +75,12 @@ const DESKTOP_EMULATION_METRICS = {
 };
 
 const screenEmulationMetrics = {
-  mobile: MOTOG4_EMULATION_METRICS,
+  mobile: MOTOGPOWER_EMULATION_METRICS,
   desktop: DESKTOP_EMULATION_METRICS,
 };
 
 
-const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36'; // eslint-disable-line max-len
+const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36'; // eslint-disable-line max-len
 const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36'; // eslint-disable-line max-len
 
 const userAgents = {

core/lib/emulation.js

@@ -32,11 +32,11 @@ function parseUseragentIntoMetadata(userAgent, formFactor) {
     {brand: 'Lighthouse', version: lighthouseVersion},
   ];
 
-  const motoG4Details = {
+  const motoGPowerDetails = {
     platform: 'Android',
-    platformVersion: '6.0',
+    platformVersion: '11.0',
     architecture: '',
-    model: 'Moto G4',
+    model: 'moto g power (2022)',
   };
   const macDesktopDetails = {
     platform: 'macOS',
@@ -50,9 +50,9 @@ function parseUseragentIntoMetadata(userAgent, formFactor) {
     brands,
     fullVersion,
     // Since config users can supply a custom useragent, they likely are emulating something
-    // other than Moto G4 and MacOS Desktop.
+    // other than Moto G Power and MacOS Desktop.
     // TODO: Determine how to thoughtfully expose this metadata/client-hints configurability.
-    ...(mobile ? motoG4Details : macDesktopDetails),
+    ...(mobile ? motoGPowerDetails : macDesktopDetails),
     mobile,
   };
 }

core/lib/network-recorder.js

@@ -9,6 +9,7 @@ import {EventEmitter} from 'events';
 import log from 'lighthouse-logger';
 
 import {NetworkRequest} from './network-request.js';
+import {PageDependencyGraph} from '../computed/page-dependency-graph.js';
 
 /**
  * @typedef {{
@@ -243,9 +244,8 @@ class NetworkRecorder extends RequestEventEmitter {
     if (record.redirectSource) {
       return record.redirectSource;
     }
-    const stackFrames = record.initiator.stack?.callFrames || [];
-    const initiatorURL = record.initiator.url || stackFrames[0]?.url;
 
+    const initiatorURL = PageDependencyGraph.getNetworkInitiators(record)[0];
     let candidates = recordsByURL.get(initiatorURL) || [];
     // The initiator must come before the initiated request.
     candidates = candidates.filter(c => c.responseHeadersEndTime <= record.networkRequestTime);
@@ -273,6 +273,18 @@ class NetworkRecorder extends RequestEventEmitter {
         candidates = documentCandidates;
       }
     }
+    if (candidates.length > 1) {
+      // If all real loads came from successful preloads (url preloaded and
+      // loads came from the cache), filter to link rel=preload request(s).
+      const linkPreloadCandidates = candidates.filter(c => c.isLinkPreload);
+      if (linkPreloadCandidates.length) {
+        const nonPreloadCandidates = candidates.filter(c => !c.isLinkPreload);
+        const allPreloaded = nonPreloadCandidates.every(c => c.fromDiskCache || c.fromMemoryCache);
+        if (nonPreloadCandidates.length && allPreloaded) {
+          candidates = linkPreloadCandidates;
+        }
+      }
+    }
 
     // Only return an initiator if the result is unambiguous.
     return candidates.length === 1 ? candidates[0] : null;

core/scripts/test-lantern.sh

@@ -17,7 +17,7 @@ fi
 
 printf "Determined the following files have been touched:\n\n$CHANGED_FILES\n\n"
 
-if ! echo $CHANGED_FILES | grep -E 'dependency-graph|metrics|lantern|predictive-perf' > /dev/null; then
+if ! echo $CHANGED_FILES | grep -E 'dependency-graph|metrics|lantern|predictive-perf|network-recorder' > /dev/null; then
   echo "No lantern files affected, skipping lantern checks."
   exit 0
 fi