Skip to content

Commit

Permalink
core(unused-css): exclude header size for estimating wasted bytes
Browse files Browse the repository at this point in the history
  • Loading branch information
@connorjclark
connorjclark committed Dec 7, 2023
1 parent 14428d7 commit acafea5
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 47 deletions.
8 changes: 4 additions & 4 deletions core/computed/unused-css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import {makeComputedArtifact} from './computed-artifact.js';
import {NetworkRecords} from './network-records.js';
import {Util} from '../../shared/util.js';
import {estimateTransferSize} from '../lib/script-helpers.js';
import {estimateCompressedContentSize} from '../lib/script-helpers.js';

const PREVIEW_LENGTH = 100;

Expand Down Expand Up @@ -70,15 +70,15 @@ class UnusedCSS {
usedUncompressedBytes += usedRule.endOffset - usedRule.startOffset;
}

const totalTransferredBytes = estimateTransferSize(
const compressedSize = estimateCompressedContentSize(
stylesheetInfo.networkRecord, totalUncompressedBytes, 'Stylesheet');
const percentUnused = (totalUncompressedBytes - usedUncompressedBytes) / totalUncompressedBytes;
const wastedBytes = Math.round(percentUnused * totalTransferredBytes);
const wastedBytes = Math.round(percentUnused * compressedSize);

return {
wastedBytes,
wastedPercent: percentUnused * 100,
totalBytes: totalTransferredBytes,
totalBytes: compressedSize,
};
}

Expand Down
1 change: 1 addition & 0 deletions core/test/audits/byte-efficiency/unused-css-rules-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ describe('Best Practices: unused css rules audit', () => {
transferSize: 100 * 1024 * 0.5, // compression ratio of 0.5
resourceSize: 100 * 1024,
resourceType: 'Document', // this is a document so it'll use the compressionRatio but not the raw size
responseHeaders: [{name: 'Content-Encoding'}],
},
{
url: 'file://a.html',
Expand Down
146 changes: 105 additions & 41 deletions core/test/fixtures/user-flows/reports/sample-flow-result.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2990,28 +2990,51 @@
"id": "unused-css-rules",
"title": "Reduce unused CSS",
"description": "Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. [Learn how to reduce unused CSS](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/).",
"score": 1,
"score": 0,
"scoreDisplayMode": "metricSavings",
"numericValue": 0,
"numericUnit": "millisecond",
"displayValue": "",
"displayValue": "Potential savings of 13 KiB",
"metricSavings": {
"FCP": 0,
"FCP": 160,
"LCP": 0
},
"details": {
"type": "opportunity",
"headings": [],
"items": [],
"headings": [
{
"key": "url",
"valueType": "url",
"label": "URL"
},
{
"key": "totalBytes",
"valueType": "bytes",
"label": "Transfer Size"
},
{
"key": "wastedBytes",
"valueType": "bytes",
"label": "Potential Savings"
}
],
"items": [
{
"url": "https://www.mikescerealshack.co/_next/static/css/08dcb440d7d83b488817.css",
"wastedBytes": 13631,
"wastedPercent": 75.20136820037516,
"totalBytes": 18126
}
],
"overallSavingsMs": 0,
"overallSavingsBytes": 0,
"overallSavingsBytes": 13631,
"sortedBy": [
"wastedBytes"
],
"debugData": {
"type": "debugdata",
"metricSavings": {
"FCP": 0,
"FCP": 160,
"LCP": 0
}
}
Expand Down Expand Up @@ -7201,6 +7224,7 @@
"audits[long-tasks].details.headings[0].label",
"audits[unsized-images].details.headings[1].label",
"audits[total-byte-weight].details.headings[0].label",
"audits[unused-css-rules].details.headings[0].label",
"audits[legacy-javascript].details.headings[0].label"
],
"core/lib/i18n/i18n.js | columnTimeSpent": [
Expand Down Expand Up @@ -7409,7 +7433,8 @@
],
"core/lib/i18n/i18n.js | columnTransferSize": [
"audits[third-party-summary].details.headings[1].label",
"audits[total-byte-weight].details.headings[1].label"
"audits[total-byte-weight].details.headings[1].label",
"audits[unused-css-rules].details.headings[1].label"
],
"core/lib/i18n/i18n.js | columnBlockingTime": [
"audits[third-party-summary].details.headings[2].label"
Expand Down Expand Up @@ -7983,6 +8008,24 @@
"core/audits/byte-efficiency/unused-css-rules.js | description": [
"audits[unused-css-rules].description"
],
"core/lib/i18n/i18n.js | displayValueByteSavings": [
{
"values": {
"wastedBytes": 13631
},
"path": "audits[unused-css-rules].displayValue"
},
{
"values": {
"wastedBytes": 167
},
"path": "audits[legacy-javascript].displayValue"
}
],
"core/lib/i18n/i18n.js | columnWastedBytes": [
"audits[unused-css-rules].details.headings[2].label",
"audits[legacy-javascript].details.headings[2].label"
],
"core/audits/byte-efficiency/unused-javascript.js | title": [
"audits[unused-javascript].title"
],
Expand Down Expand Up @@ -8031,17 +8074,6 @@
"core/audits/byte-efficiency/legacy-javascript.js | description": [
"audits[legacy-javascript].description"
],
"core/lib/i18n/i18n.js | displayValueByteSavings": [
{
"values": {
"wastedBytes": 167
},
"path": "audits[legacy-javascript].displayValue"
}
],
"core/lib/i18n/i18n.js | columnWastedBytes": [
"audits[legacy-javascript].details.headings[2].label"
],
"core/audits/dobetterweb/doctype.js | title": [
"audits.doctype.title"
],
Expand Down Expand Up @@ -20498,21 +20530,44 @@
"id": "unused-css-rules",
"title": "Reduce unused CSS",
"description": "Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. [Learn how to reduce unused CSS](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/).",
"score": 1,
"score": 0.5,
"scoreDisplayMode": "metricSavings",
"numericValue": 0,
"numericUnit": "millisecond",
"displayValue": "",
"displayValue": "Potential savings of 14 KiB",
"metricSavings": {
"FCP": 0,
"LCP": 0
},
"details": {
"type": "opportunity",
"headings": [],
"items": [],
"headings": [
{
"key": "url",
"valueType": "url",
"label": "URL"
},
{
"key": "totalBytes",
"valueType": "bytes",
"label": "Transfer Size"
},
{
"key": "wastedBytes",
"valueType": "bytes",
"label": "Potential Savings"
}
],
"items": [
{
"url": "https://www.mikescerealshack.co/_next/static/css/08dcb440d7d83b488817.css",
"wastedBytes": 13997,
"wastedPercent": 77.22056714112325,
"totalBytes": 18126
}
],
"overallSavingsMs": 0,
"overallSavingsBytes": 0,
"overallSavingsBytes": 13997,
"sortedBy": [
"wastedBytes"
],
Expand Down Expand Up @@ -24830,6 +24885,7 @@
"audits[long-tasks].details.headings[0].label",
"audits[unsized-images].details.headings[1].label",
"audits[total-byte-weight].details.headings[0].label",
"audits[unused-css-rules].details.headings[0].label",
"audits[modern-image-formats].details.headings[1].label",
"audits[uses-responsive-images].details.headings[1].label",
"audits[legacy-javascript].details.headings[0].label"
Expand Down Expand Up @@ -25040,7 +25096,8 @@
],
"core/lib/i18n/i18n.js | columnTransferSize": [
"audits[third-party-summary].details.headings[1].label",
"audits[total-byte-weight].details.headings[1].label"
"audits[total-byte-weight].details.headings[1].label",
"audits[unused-css-rules].details.headings[1].label"
],
"core/lib/i18n/i18n.js | columnBlockingTime": [
"audits[third-party-summary].details.headings[2].label"
Expand Down Expand Up @@ -25605,19 +25662,13 @@
"core/audits/byte-efficiency/unused-css-rules.js | description": [
"audits[unused-css-rules].description"
],
"core/audits/byte-efficiency/unused-javascript.js | title": [
"audits[unused-javascript].title"
],
"core/audits/byte-efficiency/unused-javascript.js | description": [
"audits[unused-javascript].description"
],
"core/audits/byte-efficiency/modern-image-formats.js | title": [
"audits[modern-image-formats].title"
],
"core/audits/byte-efficiency/modern-image-formats.js | description": [
"audits[modern-image-formats].description"
],
"core/lib/i18n/i18n.js | displayValueByteSavings": [
{
"values": {
"wastedBytes": 13997
},
"path": "audits[unused-css-rules].displayValue"
},
{
"values": {
"wastedBytes": 68889.75
Expand All @@ -25637,15 +25688,28 @@
"path": "audits[legacy-javascript].displayValue"
}
],
"core/lib/i18n/i18n.js | columnResourceSize": [
"audits[modern-image-formats].details.headings[2].label",
"audits[uses-responsive-images].details.headings[2].label"
],
"core/lib/i18n/i18n.js | columnWastedBytes": [
"audits[unused-css-rules].details.headings[2].label",
"audits[modern-image-formats].details.headings[3].label",
"audits[uses-responsive-images].details.headings[3].label",
"audits[legacy-javascript].details.headings[2].label"
],
"core/audits/byte-efficiency/unused-javascript.js | title": [
"audits[unused-javascript].title"
],
"core/audits/byte-efficiency/unused-javascript.js | description": [
"audits[unused-javascript].description"
],
"core/audits/byte-efficiency/modern-image-formats.js | title": [
"audits[modern-image-formats].title"
],
"core/audits/byte-efficiency/modern-image-formats.js | description": [
"audits[modern-image-formats].description"
],
"core/lib/i18n/i18n.js | columnResourceSize": [
"audits[modern-image-formats].details.headings[2].label",
"audits[uses-responsive-images].details.headings[2].label"
],
"core/audits/byte-efficiency/uses-optimized-images.js | title": [
"audits[uses-optimized-images].title"
],
Expand Down
3 changes: 1 addition & 2 deletions core/test/network-records-to-devtools-log.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,8 +288,7 @@ function getResponseReceivedEvent(networkRecord, index, normalizedTiming) {
connectionId: networkRecord.connectionId || 140,
fromDiskCache: networkRecord.fromDiskCache || false,
fromServiceWorker: networkRecord.fetchedViaServiceWorker || false,
encodedDataLength:
networkRecord.responseHeadersTransferSize || networkRecord.transferSize || 0,
encodedDataLength: networkRecord.responseHeadersTransferSize || 0,
timing: {...normalizedTiming.timing},
protocol: networkRecord.protocol || 'http/1.1',
},
Expand Down

0 comments on commit acafea5

Please sign in to comment.