-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(unused-css-rules): update to support new coverage format #2518
Conversation
lighthouse-core/config/default.js
Outdated
// 'styles', | ||
// 'css-usage', | ||
// ], | ||
// }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
with #2499 landed, time to uncomment?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yep rebased it all 👍
11a812b
to
4608a68
Compare
PTAL :) |
🏏 🏏 |
|
||
let debugString; | ||
if (!isInline && !stylesheetInfo.networkRecord) { | ||
debugString = `Unable to find network record for ${stylesheetInfo.header.sourceURL}`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I get this error on both paulirish.com and theverge.com.. can we avoid that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice updates
can also drop the Chrome 56 warning in css-usage.js
now :)
// } | ||
// }, | ||
'unused-css-rules': { | ||
score: '<100', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we make this more precise since we control the test page?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sure, the score gets bucketed by the generic byte efficiency audit though so it's not that useful. I added an assertion on the "wastedKb" instead which is a little more explicit and useful
@@ -4,7 +4,7 @@ node lighthouse-cli/test/fixtures/static-server.js & | |||
|
|||
sleep 0.5s | |||
|
|||
config="lighthouse-core/config/default.js" | |||
config="lighthouse-core/config/full-config.js" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
need to update byte-config.js
instead (after #2732)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
// we can guess it was roughly the size of the content gzipped. | ||
const totalBytes = stylesheetInfo.networkRecord ? | ||
stylesheetInfo.networkRecord.transferSize : | ||
Math.round(stylesheetInfo.content.length / 3); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
since this is the full run, not the default run, instead of estimating like this can we just actually run gzip on it like response-compression
does?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we don't actually know it was gzipped anyway I'm inclined to not introduce that complexity here too, but I don't feel that strongly.
/** | ||
* @param {!Object} stylesheetInfo | ||
* @param {boolean} isInline | ||
* @return {{debugString: string|undefined, wastedBytes: number, totalBytes: number}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wastedPercent
, too
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
return { | ||
debugString, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
add to return type
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
|
||
// If we don't know for sure how many bytes this sheet used on the network, | ||
// we can guess it was roughly the size of the content gzipped. | ||
const totalBytes = stylesheetInfo.networkRecord ? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
will this be weird for inline stylesheets that came in a page that was gzipped?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It will be weird for inline stylesheets that came in a page that was not gzipped since we'll underestimate the savings.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It will be weird for inline stylesheets that came in a page that was not gzipped since we'll underestimate the savings.
ah, yeah, that was based on how it was (I believe) filtering out networkRecords for non-stylesheets before
73e9d19
to
57de9c9
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just the two last questions
const wastedBytes = Math.round(percentUnused * totalBytes); | ||
|
||
return { | ||
wastedBytes, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not worth logging debugString
anymore for network records not found (it'll show up in HTTP Archive data that way)? Or we could sentry it, maybe. Otherwise we won't have any feedback on how often we're failing at finding network records...or it might not matter :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah didn't seem worth it anymore, the cases where it happens now are wholly expected and there's no sense being noisy
const wasCompressed = !networkRecord || | ||
networkRecord._transferSize !== networkRecord._resourceSize; | ||
totalBytes = wasCompressed ? Math.round(totalUncompressedBytes / 3) : totalUncompressedBytes; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is a little confusing to follow. What do you think of something like totalTransferredBytes
for totalBytes
and then maybe folding the first short circuit into the conditional like
let totalTransferredBytes;
if (networkRecord && networkRecord._resourceType._name === 'stylesheet') {
totalTransferredBytes = networkRecord.transferSize;
} else {
// If we don't know for sure how many bytes this sheet used on the network,
// we can guess it was roughly the size of the content length.
const wasCompressed = !networkRecord ||
networkRecord._transferSize !== networkRecord._resourceSize;
totalTransferredBytes = wasCompressed ? Math.round(totalUncompressedBytes / 3) :
totalUncompressedBytes;
}
the variable rename alone might be enough to clear things up, though
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah sg, done
done! c'mon travis 🤞 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! 🎨🔢
|
||
const networkRecord = stylesheetInfo.networkRecord; | ||
let totalTransferredBytes; | ||
if (!networkRecord) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@paulirish how's this?
config changes are commented out until #2499 lands and I can split into afull-config.js
and adefault-config.js
a couple caveats to note
Number Unused Rules
because the new coverage only reports string offsets of used portions, I had a version of this PR that actually did the mapping of lines/columns to string offsets and counted the number of rules but it required the parsed stylesheets and because the parsing so frequently fails this meant that we rarely got them anyway (not to mentioned it greatly increased the complexity and readability of what was going on)header.sourceURL
doesn't seem to be 100% accurate, I added a debugString and hopefully we'll be able to track some more cases with core(lib): add error reporting #2420