From 0f17829ad82140f21998b7f6ba99d3a2b32357b2 Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Thu, 23 Mar 2023 12:21:57 -0500 Subject: [PATCH 1/4] core: collect fetchpriority for images and link rel preload --- cli/test/fixtures/dobetterweb/dbw_tester.html | 3 +-- cli/test/fixtures/preload.html | 2 +- .../test-definitions/dobetterweb.js | 19 +++++++++++++++++++ .../test-definitions/perf-preload.js | 14 ++++++++++++++ core/gather/gatherers/image-elements.js | 2 ++ core/gather/gatherers/link-elements.js | 3 +++ types/artifacts.d.ts | 4 ++++ 7 files changed, 44 insertions(+), 3 deletions(-) diff --git a/cli/test/fixtures/dobetterweb/dbw_tester.html b/cli/test/fixtures/dobetterweb/dbw_tester.html index 232ff478ca54..c229e34e9864 100644 --- a/cli/test/fixtures/dobetterweb/dbw_tester.html +++ b/cli/test/fixtures/dobetterweb/dbw_tester.html @@ -219,8 +219,7 @@

Do better web tester page

- - + diff --git a/cli/test/fixtures/preload.html b/cli/test/fixtures/preload.html index 217c396f0f24..5e5c8a11527e 100644 --- a/cli/test/fixtures/preload.html +++ b/cli/test/fixtures/preload.html @@ -2,7 +2,7 @@ - + diff --git a/cli/test/smokehouse/test-definitions/dobetterweb.js b/cli/test/smokehouse/test-definitions/dobetterweb.js index 552bc28b76a0..2c41d2e981ae 100644 --- 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 index a875b694108e..9a61cd25bd43 100644 --- 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 index f75ebdb92d5a..a74ed80decf6 100644 --- a/core/gather/gatherers/image-elements.js +++ b/core/gather/gatherers/image-elements.js @@ -86,6 +86,8 @@ function getHTMLImages(allElements) { isInShadowDOM: element.getRootNode() instanceof ShadowRoot, // @ts-expect-error - getNodeDetails put into scope via stringification node: getNodeDetails(element), + // @ts-expect-error - Not in tsc types yet. + fetchPriority: element.fetchPriority, }; }); } diff --git a/core/gather/gatherers/link-elements.js b/core/gather/gatherers/link-elements.js index 91429d905c11..d4f5a22af341 100644 --- a/core/gather/gatherers/link-elements.js +++ b/core/gather/gatherers/link-elements.js @@ -70,6 +70,8 @@ function getLinkElementsInDOM() { crossOrigin: link.crossOrigin, hrefRaw, source, + // @ts-expect-error - Not in tsc types yet. + fetchPriority: link.fetchPriority, // @ts-expect-error - put into scope via stringification node: getNodeDetails(link), }); @@ -134,6 +136,7 @@ class LinkElements extends FRGatherer { as: link.as || '', crossOrigin: getCrossoriginFromHeader(link.crossorigin), source: 'headers', + fetchPriority: link.fetchpriority, node: null, }); } diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts index 6f28464da834..ad954d3b8d01 100644 --- 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 { @@ -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 { From fc90a5ccfc157c9e15c9db1502bdf2c27f5e6ce4 Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Thu, 23 Mar 2023 12:25:27 -0500 Subject: [PATCH 2/4] update sample ImageElements --- core/test/results/artifacts/artifacts.json | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/core/test/results/artifacts/artifacts.json b/core/test/results/artifacts/artifacts.json index de3062660443..dfa73709b82d 100644 --- a/core/test/results/artifacts/artifacts.json +++ b/core/test/results/artifacts/artifacts.json @@ -9454,6 +9454,7 @@ "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "auto", "cssEffectiveRules": { "width": "120px", "height": "15px", @@ -9498,9 +9499,10 @@ "width": 120, "height": 80 }, - "snippet": "", + "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "low", "cssEffectiveRules": { "width": "120px", "height": "80px", @@ -9548,6 +9550,7 @@ "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "auto", "cssEffectiveRules": { "width": "120px", "height": "80px", @@ -9595,6 +9598,7 @@ "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "auto", "cssEffectiveRules": { "width": "360px", "height": "240px", @@ -9642,6 +9646,7 @@ "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "auto", "cssEffectiveRules": { "width": "811px", "height": "462px", @@ -9689,6 +9694,7 @@ "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "auto", "cssEffectiveRules": { "width": "400px", "height": "360px", @@ -9732,6 +9738,7 @@ "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "auto", "cssEffectiveRules": { "width": "360px", "height": "240px", @@ -9820,6 +9827,7 @@ "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "auto", "cssEffectiveRules": { "width": null, "height": null, @@ -9867,6 +9875,7 @@ "snippet": "", "nodeLabel": "body > img" }, + "fetchPriority": "auto", "cssEffectiveRules": { "width": null, "height": null, From 21368975c546392e3035d179d56a6288a732ca69 Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Thu, 23 Mar 2023 12:28:32 -0500 Subject: [PATCH 3/4] update sample LinkElements --- core/test/results/artifacts/artifacts.json | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/core/test/results/artifacts/artifacts.json b/core/test/results/artifacts/artifacts.json index dfa73709b82d..1bd36c114128 100644 --- a/core/test/results/artifacts/artifacts.json +++ b/core/test/results/artifacts/artifacts.json @@ -9892,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", @@ -9916,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", @@ -9940,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", @@ -9964,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", @@ -9988,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", @@ -10012,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", @@ -10036,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", @@ -10060,6 +10067,7 @@ "crossOrigin": null, "hrefRaw": "./empty.css", "source": "head", + "fetchPriority": "auto", "node": { "lhId": "5-18-LINK", "devtoolsNodePath": "3,HTML,0,HEAD,23,LINK", @@ -10084,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", From 903e455a53e426bc3ef96734e2a536d3a68254de Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Thu, 23 Mar 2023 14:46:14 -0500 Subject: [PATCH 4/4] add fetchPriority DOM types --- core/gather/gatherers/image-elements.js | 3 +-- core/gather/gatherers/link-elements.js | 1 - types/internal/node.d.ts | 17 +++++++++++++++-- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/core/gather/gatherers/image-elements.js b/core/gather/gatherers/image-elements.js index a74ed80decf6..33d6a5517109 100644 --- a/core/gather/gatherers/image-elements.js +++ b/core/gather/gatherers/image-elements.js @@ -84,10 +84,9 @@ 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), - // @ts-expect-error - Not in tsc types yet. - fetchPriority: element.fetchPriority, }; }); } diff --git a/core/gather/gatherers/link-elements.js b/core/gather/gatherers/link-elements.js index d4f5a22af341..d178c9328ca8 100644 --- a/core/gather/gatherers/link-elements.js +++ b/core/gather/gatherers/link-elements.js @@ -70,7 +70,6 @@ function getLinkElementsInDOM() { crossOrigin: link.crossOrigin, hrefRaw, source, - // @ts-expect-error - Not in tsc types yet. fetchPriority: link.fetchPriority, // @ts-expect-error - put into scope via stringification node: getNodeDetails(link), diff --git a/types/internal/node.d.ts b/types/internal/node.d.ts index e1d29399f351..e318baec32a3 100644 --- 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; } }