core: collect fetchpriority for images and rel=preload links (#14925)

GoogleChrome · Mar 23, 2023 · 2db068a · 2db068a
1 parent a7891f3
commit 2db068a
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 6 deletions.
diff --git a/cli/test/fixtures/dobetterweb/dbw_tester.html b/cli/test/fixtures/dobetterweb/dbw_tester.html
@@ -219,8 +219,7 @@ <h2 id="toppy" style="background-image:url('');">Do better web tester page</h2>
 <!-- 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-1024x680.jpg?iar2" width="120" height="80">
+<img loading="lazy" src="lighthouse-1024x680.jpg?iar2" width="120" height="80" fetchpriority="low">
 
 <!-- FAIL(image-size-responsive): image is naturally 480x318 -->
 <img src="lighthouse-480x318.jpg?isr1" width="400" height="360" style="position: absolute;">

diff --git a/cli/test/fixtures/preload.html b/cli/test/fixtures/preload.html
@@ -2,7 +2,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
   <link rel="stylesheet" href="/perf/preload_style.css" />
   <!-- WARN(preload): This should be no crossorigin -->
-  <link rel="preload" href="/perf/level-2.js?warning&delay=500" as="script" crossorigin="use-credentials"/>
+  <link rel="preload" href="/perf/level-2.js?warning&delay=500" as="script" crossorigin="use-credentials" fetchpriority="high" />
   <!-- WARN(preconnect): This should be no crossorigin -->
   <link rel="preconnect" href="http://localhost:10503" crossorigin="anonymous" />
   <!-- PASS(preconnect): This uses crossorigin correctly -->

diff --git a/cli/test/smokehouse/test-definitions/dobetterweb.js b/cli/test/smokehouse/test-definitions/dobetterweb.js
@@ -242,6 +242,25 @@ const expectations = {
         },
       ],
     },
+    ImageElements: {
+      _includes: [{
+        src: 'http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg?iar2',
+        srcset: '',
+        displayedWidth: 120,
+        displayedHeight: 80,
+        attributeWidth: '120',
+        attributeHeight: '80',
+        naturalDimensions: {
+          width: 1024,
+          height: 678,
+        },
+        isCss: false,
+        isPicture: false,
+        isInShadowDOM: false,
+        loading: 'lazy',
+        fetchPriority: 'low',
+      }],
+    },
   },
   lhr: {
     requestedUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',

diff --git a/cli/test/smokehouse/test-definitions/perf-preload.js b/cli/test/smokehouse/test-definitions/perf-preload.js
@@ -57,6 +57,20 @@ const config = {
  * Expected Lighthouse audit values for preload tests.
  */
 const expectations = {
+  artifacts: {
+    LinkElements: {
+      _includes: [{
+        rel: 'preload',
+        href: 'http://localhost:10200/perf/level-2.js?warning&delay=500',
+        hrefRaw: '/perf/level-2.js?warning&delay=500',
+        hreflang: '',
+        as: 'script',
+        crossOrigin: 'use-credentials',
+        source: 'head',
+        fetchPriority: 'high',
+      }],
+    },
+  },
   networkRequests: {
     // DevTools loads the page three times, so this request count will not be accurate.
     _excludeRunner: 'devtools',

diff --git a/core/gather/gatherers/image-elements.js b/core/gather/gatherers/image-elements.js
@@ -84,6 +84,7 @@ function getHTMLImages(allElements) {
       isPicture,
       loading: element.loading,
       isInShadowDOM: element.getRootNode() instanceof ShadowRoot,
+      fetchPriority: element.fetchPriority,
       // @ts-expect-error - getNodeDetails put into scope via stringification
       node: getNodeDetails(element),
     };

diff --git a/core/gather/gatherers/link-elements.js b/core/gather/gatherers/link-elements.js
@@ -70,6 +70,7 @@ function getLinkElementsInDOM() {
       crossOrigin: link.crossOrigin,
       hrefRaw,
       source,
+      fetchPriority: link.fetchPriority,
       // @ts-expect-error - put into scope via stringification
       node: getNodeDetails(link),
     });
@@ -134,6 +135,7 @@ class LinkElements extends FRGatherer {
           as: link.as || '',
           crossOrigin: getCrossoriginFromHeader(link.crossorigin),
           source: 'headers',
+          fetchPriority: link.fetchpriority,
           node: null,
         });
       }

diff --git a/core/test/results/artifacts/artifacts.json b/core/test/results/artifacts/artifacts.json
@@ -9454,6 +9454,7 @@
         "snippet": "<img src=\"lighthouse-1024x680.jpg?iar1\" width=\"120\" height=\"15\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "auto",
       "cssEffectiveRules": {
         "width": "120px",
         "height": "15px",
@@ -9498,9 +9499,10 @@
           "width": 120,
           "height": 80
         },
-        "snippet": "<img loading=\"lazy\" src=\"lighthouse-1024x680.jpg?iar2\" width=\"120\" height=\"80\">",
+        "snippet": "<img loading=\"lazy\" src=\"lighthouse-1024x680.jpg?iar2\" width=\"120\" height=\"80\" fetchpriority=\"low\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "low",
       "cssEffectiveRules": {
         "width": "120px",
         "height": "80px",
@@ -9548,6 +9550,7 @@
         "snippet": "<img src=\"lighthouse-1024x680.jpg?isr2\" width=\"120\" height=\"80\" style=\"position: absolute;\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "auto",
       "cssEffectiveRules": {
         "width": "120px",
         "height": "80px",
@@ -9595,6 +9598,7 @@
         "snippet": "<img src=\"lighthouse-1024x680.jpg?isr3\" width=\"360\" height=\"240\" style=\"image-rendering: pixelated; position: absolute;\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "auto",
       "cssEffectiveRules": {
         "width": "360px",
         "height": "240px",
@@ -9642,6 +9646,7 @@
         "snippet": "<img src=\"lighthouse-rotating.gif\" width=\"811\" height=\"462\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "auto",
       "cssEffectiveRules": {
         "width": "811px",
         "height": "462px",
@@ -9689,6 +9694,7 @@
         "snippet": "<img src=\"lighthouse-480x318.jpg?isr1\" width=\"400\" height=\"360\" style=\"position: absolute;\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "auto",
       "cssEffectiveRules": {
         "width": "400px",
         "height": "360px",
@@ -9732,6 +9738,7 @@
         "snippet": "<img src=\"http://localhost:10200/dobetterweb/lighthouse-1024x680.jpg\" srcset=\"lighthouse-1024x680.jpg 2x\" width=\"360\" height=\"240\" style=\"position: absolute;\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "auto",
       "cssEffectiveRules": {
         "width": "360px",
         "height": "240px",
@@ -9820,6 +9827,7 @@
         "snippet": "<img src=\"blob:http://localhost:10200/8081f274-a0c6-440f-a9cc-be826a0e01d5\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "auto",
       "cssEffectiveRules": {
         "width": null,
         "height": null,
@@ -9867,6 +9875,7 @@
         "snippet": "<img src=\"filesystem:http://localhost:10200/temporary/empty-0.30045073591260474.png\">",
         "nodeLabel": "body > img"
       },
+      "fetchPriority": "auto",
       "cssEffectiveRules": {
         "width": null,
         "height": null,
@@ -9883,6 +9892,7 @@
       "crossOrigin": null,
       "hrefRaw": "./dbw_tester.css?delay=100",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-11-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,9,LINK",
@@ -9907,6 +9917,7 @@
       "crossOrigin": null,
       "hrefRaw": "./unknown404.css?delay=200",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-12-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,10,LINK",
@@ -9931,6 +9942,7 @@
       "crossOrigin": null,
       "hrefRaw": "./dbw_tester.css?delay=2200",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-13-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,12,LINK",
@@ -9955,6 +9967,7 @@
       "crossOrigin": null,
       "hrefRaw": "./dbw_disabled.css?delay=200&isdisabled",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-14-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,14,LINK",
@@ -9979,6 +9992,7 @@
       "crossOrigin": null,
       "hrefRaw": "./dbw_tester.css?delay=3000&capped",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-15-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,17,LINK",
@@ -10003,6 +10017,7 @@
       "crossOrigin": null,
       "hrefRaw": "./dbw_tester.css?delay=2000&async=true",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-16-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,19,LINK",
@@ -10027,6 +10042,7 @@
       "crossOrigin": null,
       "hrefRaw": "./dbw_tester.css?delay=3000&async=true",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-17-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,21,LINK",
@@ -10051,6 +10067,7 @@
       "crossOrigin": null,
       "hrefRaw": "./empty.css",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-18-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,23,LINK",
@@ -10075,6 +10092,7 @@
       "crossOrigin": null,
       "hrefRaw": "./dbw_tester.css?scriptActivated&delay=200",
       "source": "head",
+      "fetchPriority": "auto",
       "node": {
         "lhId": "5-19-LINK",
         "devtoolsNodePath": "3,HTML,0,HEAD,40,LINK",

diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts
@@ -308,6 +308,8 @@ declare module Artifacts {
     /** Where the link was found, either in the DOM or in the headers of the main document */
     source: 'head'|'body'|'headers'
     node: NodeDetails | null
+    /** The fetch priority hint for preload links. */
+    fetchPriority?: string;
   }
 
   interface Script extends Omit<Crdp.Debugger.ScriptParsedEvent, 'url'|'embedderName'> {
@@ -534,6 +536,8 @@ declare module Artifacts {
     node: NodeDetails;
     /** The loading attribute of the image. */
     loading?: string;
+    /** The fetch priority hint for HTMLImageElements. */
+    fetchPriority?: string;
   }
 
   interface OptimizedImage {

diff --git a/types/internal/node.d.ts b/types/internal/node.d.ts
@@ -35,9 +35,22 @@ declare global {
 
     /** Injected into the page when the `--debug` flag is used. */
     continueLighthouseRun(): void;
+  }
 
-    // Not defined in tsc yet: https://github.com/microsoft/TypeScript/issues/40807
-    requestIdleCallback(callback: (deadline: {didTimeout: boolean, timeRemaining: () => DOMHighResTimeStamp}) => void, options?: {timeout: number}): number;
+  // `fetchPriority` not defined in tsc as of 4.9.4.
+  interface HTMLImageElement {
+    /**
+     * Sets the priority for fetches initiated by the element.
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-fetchpriority
+     */
+    fetchPriority: string;
+  }
+  interface HTMLLinkElement {
+    /**
+     * Sets the priority for fetches initiated by the element.
+     * @see https://html.spec.whatwg.org/multipage/semantics.html#dom-link-fetchpriority
+     */
+    fetchPriority: string;
   }
 }