fix(unused-css-rules): update to support new coverage format #2518

patrickhulce · 2017-06-16T21:34:20Z

~~config changes are commented out until #2499 lands and I can split into a full-config.js and a default-config.js~~

a couple caveats to note

I had to remove 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)
The size numbers reported here are still not going to match what you see in DevTools since the point of this is to audit is to highlight the network savings not the uncompressed/expanded CSS bytes that the coverage tool reports. Example: on paulirish.com DevTools reports 240kb of unused CSS when the total downloaded CSS is only ~40kb
The URL reported by 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
The perf implications of enabling coverage were somewhat inconclusive but the styles gatherer is what can really take significant amounts of time, so I stopped investigating and opted for feat(config): add audit blacklist support #2499 instead since we'll have a place going forward to collect these "extras" and make them accessible with a simple flag or checkbox instead of forcing the slowdown on all users

brendankenny · 2017-07-31T21:10:40Z

lighthouse-core/config/default.js

+  //     'styles',
+  //     'css-usage',
+  //   ],
+  // },


with #2499 landed, time to uncomment?

yep rebased it all 👍

patrickhulce · 2017-08-01T18:43:00Z

PTAL :)

patrickhulce · 2017-08-09T22:04:11Z

🏏 🏏

paulirish · 2017-08-09T22:50:11Z

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

+
+    let debugString;
+    if (!isInline && !stylesheetInfo.networkRecord) {
+      debugString = `Unable to find network record for ${stylesheetInfo.header.sourceURL}`;


I get this error on both paulirish.com and theverge.com.. can we avoid that?

brendankenny

nice updates

can also drop the Chrome 56 warning in css-usage.js now :)

brendankenny · 2017-08-14T21:55:52Z

lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js

-      //   }
-      // },
+      'unused-css-rules': {
+        score: '<100',


can we make this more precise since we control the test page?

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

brendankenny · 2017-08-14T21:57:18Z

lighthouse-cli/test/smokehouse/byte-efficiency/run-tests.sh

@@ -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"


need to update byte-config.js instead (after #2732)

brendankenny · 2017-08-14T22:07:57Z

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

+    // 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);


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?

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.

brendankenny · 2017-08-14T22:09:12Z

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

+  /**
+   * @param {!Object} stylesheetInfo
+   * @param {boolean} isInline
+   * @return {{debugString: string|undefined, wastedBytes: number, totalBytes: number}}


wastedPercent, too

brendankenny · 2017-08-14T22:11:06Z

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

      return {
+        debugString,


add to return type

brendankenny · 2017-08-14T22:29:39Z

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

+
+    // 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 ?


will this be weird for inline stylesheets that came in a page that was gzipped?

It will be weird for inline stylesheets that came in a page that was not gzipped since we'll underestimate the savings.

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

brendankenny

just the two last questions

brendankenny · 2017-08-17T20:19:01Z

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

+    const wastedBytes = Math.round(percentUnused * totalBytes);
+
+    return {
+      wastedBytes,


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 :)

yeah didn't seem worth it anymore, the cases where it happens now are wholly expected and there's no sense being noisy

brendankenny · 2017-08-17T20:28:46Z

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

+      const wasCompressed = !networkRecord ||
+          networkRecord._transferSize !== networkRecord._resourceSize;
+      totalBytes = wasCompressed ? Math.round(totalUncompressedBytes / 3) : totalUncompressedBytes;
+    }


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

yeah sg, done

patrickhulce · 2017-08-17T21:32:22Z

done! c'mon travis 🤞

brendankenny

LGTM! 🎨🔢

patrickhulce · 2017-08-18T00:00:40Z

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

+
+    const networkRecord = stylesheetInfo.networkRecord;
+    let totalTransferredBytes;
+    if (!networkRecord) {


@paulirish how's this?

patrickhulce mentioned this pull request Jun 20, 2017

feat(config): add extends lighthouse:full #2557

Merged

patrickhulce mentioned this pull request Jul 19, 2017

Audit: Add JS coverage audit #1852

Closed

brendankenny reviewed Jul 31, 2017

View reviewed changes

fix(unused-css-rules): update to support new coverage format

4608a68

patrickhulce force-pushed the css_coverage branch from 11a812b to 4608a68 Compare August 1, 2017 18:41

re-enable smokehouse tests

c56b19f

patrickhulce mentioned this pull request Aug 1, 2017

Integrate JS parse / execute and code coverage metrics HTTPArchive/legacy.httparchive.org#124

Closed

paulirish reviewed Aug 14, 2017

View reviewed changes

brendankenny requested changes Aug 14, 2017

View reviewed changes

patrickhulce added 3 commits August 16, 2017 13:21

Merge branch 'master' into css_coverage

b669d5e

feedback

210c514

add tooltips to url

57de9c9

patrickhulce force-pushed the css_coverage branch from 73e9d19 to 57de9c9 Compare August 17, 2017 18:53

brendankenny reviewed Aug 17, 2017

View reviewed changes

last two feedbacks

a0b414f

brendankenny approved these changes Aug 17, 2017

View reviewed changes

clearer total byte logic

237a94f

patrickhulce commented Aug 18, 2017

View reviewed changes

adjust multipliers

1e35aa9

paulirish merged commit fb19596 into master Aug 18, 2017

paulirish deleted the css_coverage branch August 18, 2017 00:52

patrickhulce mentioned this pull request Aug 18, 2017

test(smokehouse): adjust unused css expectations #3036

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(unused-css-rules): update to support new coverage format #2518

fix(unused-css-rules): update to support new coverage format #2518

patrickhulce commented Jun 16, 2017 •

edited by brendankenny

Loading

brendankenny Jul 31, 2017

patrickhulce Aug 1, 2017

patrickhulce commented Aug 1, 2017

patrickhulce commented Aug 9, 2017

paulirish Aug 9, 2017

brendankenny left a comment

brendankenny Aug 14, 2017

patrickhulce Aug 16, 2017

brendankenny Aug 14, 2017

patrickhulce Aug 16, 2017

brendankenny Aug 14, 2017

patrickhulce Aug 16, 2017

brendankenny Aug 14, 2017

patrickhulce Aug 16, 2017

brendankenny Aug 14, 2017

patrickhulce Aug 16, 2017

brendankenny Aug 14, 2017

patrickhulce Aug 16, 2017

brendankenny Aug 17, 2017

brendankenny left a comment

brendankenny Aug 17, 2017

patrickhulce Aug 17, 2017

brendankenny Aug 17, 2017

patrickhulce Aug 17, 2017

patrickhulce commented Aug 17, 2017

brendankenny left a comment

patrickhulce Aug 18, 2017

fix(unused-css-rules): update to support new coverage format #2518

fix(unused-css-rules): update to support new coverage format #2518

Conversation

patrickhulce commented Jun 16, 2017 • edited by brendankenny Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickhulce commented Aug 1, 2017

patrickhulce commented Aug 9, 2017

Choose a reason for hiding this comment

brendankenny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brendankenny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickhulce commented Aug 17, 2017

brendankenny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickhulce commented Jun 16, 2017 •

edited by brendankenny

Loading