diff --git a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
index cfac5d36bc93..696fcbdf99d6 100644
--- a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
+++ b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
@@ -52,6 +52,11 @@
top: 0;
left: 0;
}
+
+ .stylesheet-sizing {
+ width: 160px;
+ height: 110px;
+ }
@@ -134,6 +139,14 @@
Byte efficiency tester page
+
+
+
+
+
+
+
+
diff --git a/lighthouse-core/gather/gatherers/image-elements.js b/lighthouse-core/gather/gatherers/image-elements.js
index 4f34313f3751..91d49383dd37 100644
--- a/lighthouse-core/gather/gatherers/image-elements.js
+++ b/lighthouse-core/gather/gatherers/image-elements.js
@@ -177,12 +177,12 @@ function determineNaturalSize(url) {
}
/**
- * @param {LH.Crdp.CSS.CSSStyle|undefined} style
+ * @param {Partial>|undefined} style
* @param {string} property
* @return {string | undefined}
*/
function findSizeDeclaration(style, property) {
- if (!style) return;
+ if (!style || !style.cssProperties) return;
const definedProp = style.cssProperties.find(({name}) => name === property);
if (!definedProp) return;
@@ -203,8 +203,7 @@ function findMostSpecificCSSRule(matchedCSSRules, property) {
const rule = FontSize.findMostSpecificMatchedCSSRule(matchedCSSRules, isDeclarationofInterest);
if (!rule) return;
- // @ts-expect-error style is guaranteed to exist if a rule exists
- return findSizeDeclaration(rule.style, property);
+ return findSizeDeclaration(rule, property);
}
/**
@@ -291,9 +290,12 @@ class ImageElements extends Gatherer {
async afterPass(passContext, loadData) {
const driver = passContext.driver;
const indexedNetworkRecords = loadData.networkRecords.reduce((map, record) => {
+ // An image response in newer formats is sometimes incorrectly marked as "application/octet-stream",
+ // so respect the extension too.
+ const isImage = /^image/.test(record.mimeType) || /\.(avif|webp)$/i.test(record.url);
// The network record is only valid for size information if it finished with a successful status
- // code that indicates a complete resource response.
- if (/^image/.test(record.mimeType) && record.finished && record.statusCode === 200) {
+ // code that indicates a complete image response.
+ if (isImage && record.finished && record.statusCode === 200) {
map[record.url] = record;
}
diff --git a/lighthouse-core/gather/gatherers/seo/font-size.js b/lighthouse-core/gather/gatherers/seo/font-size.js
index d900fbb7acc7..ddb56fe93b66 100644
--- a/lighthouse-core/gather/gatherers/seo/font-size.js
+++ b/lighthouse-core/gather/gatherers/seo/font-size.js
@@ -66,7 +66,7 @@ function computeSelectorSpecificity(selector) {
/**
* Finds the most specific directly matched CSS font-size rule from the list.
*
- * @param {Array} [matchedCSSRules]
+ * @param {Array} matchedCSSRules
* @param {function(LH.Crdp.CSS.CSSStyle):boolean|string|undefined} isDeclarationOfInterest
* @returns {NodeFontData['cssRule']|undefined}
*/
diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts
index ee59a7a299b6..2fccca74c64c 100644
--- a/types/artifacts.d.ts
+++ b/types/artifacts.d.ts
@@ -384,6 +384,7 @@ declare global {
parentRule?: {origin: Crdp.CSS.StyleSheetOrigin, selectors: {text: string}[]};
styleSheetId?: string;
stylesheet?: Crdp.CSS.CSSStyleSheetHeader;
+ cssProperties?: Array;
}
}>
}