Skip to content

misc(treemap): represent sizes using transfer size #16460

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.

Sign up for GitHub

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

Merged
connorjclark merged 7 commits into from
Apr 24, 2025
Merged

misc(treemap): represent sizes using transfer size #16460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d0b8367
misc(treemap): represent sizes using transfer size
connorjclark Apr 23, 2025
48526fc
exclude size of headers
connorjclark Apr 23, 2025
b75a4fc
test
connorjclark Apr 23, 2025
57083d0
ci
connorjclark Apr 24, 2025
2ebb771
comment
connorjclark Apr 24, 2025
560bc44
tweak doc record find
connorjclark Apr 24, 2025
5b5781c
fix
connorjclark Apr 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion core/audits/script-treemap-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@

import {Audit} from './audit.js';
import {JSBundles} from '../computed/js-bundles.js';
import {NetworkRecords} from '../computed/network-records.js';
import {UnusedJavascriptSummary} from '../computed/unused-javascript-summary.js';
import {ModuleDuplication} from '../computed/module-duplication.js';
import {isInline} from '../lib/script-helpers.js';
import {getRequestForScript, isInline} from '../lib/script-helpers.js';

class ScriptTreemapDataAudit extends Audit {
/**
Expand Down Expand Up @@ -54,6 +55,7 @@ class ScriptTreemapDataAudit extends Audit {
return {
name,
resourceBytes: 0,
encodedBytes: undefined,
};
}

Expand Down Expand Up @@ -167,6 +169,9 @@ class ScriptTreemapDataAudit extends Audit {
* @return {Promise<LH.Treemap.Node[]>}
*/
static async makeNodes(artifacts, context) {
const devtoolsLog = artifacts.DevtoolsLog;
const networkRecords = await NetworkRecords.request(devtoolsLog, context);

/** @type {LH.Treemap.Node[]} */
const nodes = [];
/** @type {Map<string, LH.Treemap.Node>} */
Expand Down Expand Up @@ -234,6 +239,7 @@ class ScriptTreemapDataAudit extends Audit {
node = {
name,
resourceBytes: unusedJavascriptSummary?.totalBytes ?? script.length ?? 0,
encodedBytes: undefined,
unusedBytes: unusedJavascriptSummary?.wastedBytes,
};
}
Expand All @@ -246,6 +252,7 @@ class ScriptTreemapDataAudit extends Audit {
htmlNode = {
name,
resourceBytes: 0,
encodedBytes: undefined,
unusedBytes: undefined,
children: [],
};
Expand All @@ -261,6 +268,29 @@ class ScriptTreemapDataAudit extends Audit {
} else {
// Non-inline scripts each have their own top-level node.
nodes.push(node);

const networkRecord = getRequestForScript(networkRecords, script);
if (networkRecord) {
const bodyTransferSize =
networkRecord.transferSize - networkRecord.responseHeadersTransferSize;
node.encodedBytes = bodyTransferSize;
} else {
node.encodedBytes = node.resourceBytes;
}
}
}

// For the HTML nodes, set encodedBytes to be the size of all the inline
// scripts multiplied by the average compression ratio of the HTML document.
for (const [frameId, node] of htmlNodesByFrameId) {
const record =
networkRecords.find(r => r.resourceType === 'Document' && r.frameId === frameId);
if (record) {
const inlineScriptsPct = node.resourceBytes / record.resourceSize;
const bodyTransferSize = record.transferSize - record.responseHeadersTransferSize;
node.encodedBytes = Math.floor(bodyTransferSize * inlineScriptsPct);
} else {
node.encodedBytes = node.resourceBytes;
}
}

Expand Down
1,024 changes: 1,024 additions & 0 deletions core/test/audits/__snapshots__/script-treemap-data-test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 19 additions & 17 deletions core/test/audits/script-treemap-data-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const ScriptTreemapData = {
* @param {LH.Crdp.Network.ResourceType} resourceType
*/
function generateRecord(url, resourceSize, resourceType) {
return {url, resourceSize, resourceType};
return {url, resourceSize, transferSize: resourceSize * 0.6, resourceType};
}

describe('ScriptTreemapData audit', () => {
Expand Down Expand Up @@ -65,26 +65,28 @@ describe('ScriptTreemapData audit', () => {

it('has nodes', () => {
expect(treemapData.nodes.find((s) => s.name === 'https://sqoosh.app/no-map-or-usage.js')).
toMatchInlineSnapshot(`
Object {
"name": "https://sqoosh.app/no-map-or-usage.js",
"resourceBytes": 5,
"unusedBytes": undefined,
}
`);
toMatchInlineSnapshot(`
Object {
"encodedBytes": 3,
"name": "https://sqoosh.app/no-map-or-usage.js",
"resourceBytes": 5,
"unusedBytes": undefined,
}
`);

const bundleNode = treemapData.nodes.find(s => s.name === 'https://squoosh.app/main-app.js');
// @ts-expect-error
const unmapped = bundleNode.children.find(m => m.name === '(unmapped)');
expect(unmapped).toMatchInlineSnapshot(`
Object {
"name": "(unmapped)",
"resourceBytes": 10061,
"unusedBytes": 3760,
}
`);
Object {
"encodedBytes": undefined,
"name": "(unmapped)",
"resourceBytes": 10061,
"unusedBytes": 3760,
}
`);

expect(JSON.stringify(treemapData.nodes).length).toMatchInlineSnapshot(`6673`);
expect(JSON.stringify(treemapData.nodes).length).toMatchInlineSnapshot(`6724`);
expect(treemapData.nodes).toMatchSnapshot();
});
});
Expand Down Expand Up @@ -127,12 +129,12 @@ describe('ScriptTreemapData audit', () => {
});

it('has nodes', () => {
expect(JSON.stringify(treemapData.nodes).length).toMatchInlineSnapshot(`73749`);
expect(JSON.stringify(treemapData.nodes).length).toMatchInlineSnapshot(`73797`);
expect(treemapData.nodes).toMatchSnapshot();
});

it('finds duplicates', () => {
expect(JSON.stringify(treemapData.nodes).length).toMatchInlineSnapshot(`73749`);
expect(JSON.stringify(treemapData.nodes).length).toMatchInlineSnapshot(`73797`);
// @ts-ignore all these children exist.
const leafNode = treemapData.nodes[0].
children[0].
Expand Down
30 changes: 30 additions & 0 deletions core/test/fixtures/user-flows/reports/sample-flow-result.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2129,6 +2129,7 @@
{
"name": "https://www.mikescerealshack.co/",
"resourceBytes": 499,
"encodedBytes": 177,
"unusedBytes": 24,
"children": [
{
Expand All @@ -2146,61 +2147,73 @@
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/main-1f8481d632114a408557.js",
"resourceBytes": 17656,
"encodedBytes": 6787,
"unusedBytes": 4600
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/webpack-657a8433bac0aabd564e.js",
"resourceBytes": 2351,
"encodedBytes": 1260,
"unusedBytes": 1109
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/_app-ef508c97234d1af96c47.js",
"resourceBytes": 1235,
"encodedBytes": 604,
"unusedBytes": 360
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/index-b332e80eef0e3820d9a6.js",
"resourceBytes": 1856,
"encodedBytes": 975,
"unusedBytes": 109
},
{
"name": "https://www.mikescerealshack.co/_next/static/mzRoXqFvl8zs__gA-TEjz/_ssgManifest.js",
"resourceBytes": 76,
"encodedBytes": 94,
"unusedBytes": 0
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/commons.49455e4fa8cc3f51203f.js",
"resourceBytes": 44060,
"encodedBytes": 14832,
"unusedBytes": 20438
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/1aeab0175d4c4d823d7a78205bceb5dd9cd36d32.496adc53c293e81e396d.js",
"resourceBytes": 67835,
"encodedBytes": 23732,
"unusedBytes": 31847
},
{
"name": "https://www.mikescerealshack.co/_next/static/mzRoXqFvl8zs__gA-TEjz/_buildManifest.js",
"resourceBytes": 1545,
"encodedBytes": 622,
"unusedBytes": 0
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/framework.9d524150d48315f49e80.js",
"resourceBytes": 130277,
"encodedBytes": 43329,
"unusedBytes": 47111
},
{
"name": "https://www.googletagmanager.com/gtag/js?id=G-RTW9M3W5HC",
"resourceBytes": 335131,
"encodedBytes": 111958,
"unusedBytes": 132200
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/scenes/%5Bseason%5D/%5Bepisode%5D/%5Bscene%5D-72d3c5768744cc45a4c9.js",
"resourceBytes": 6837,
"encodedBytes": 2828,
"unusedBytes": 6340
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/9ea7d3ba8dd80c65c50028121847762825088b49.f4009d0d008eb3882cab.js",
"resourceBytes": 8890,
"encodedBytes": 3700,
"unusedBytes": 7978
}
]
Expand Down Expand Up @@ -10983,16 +10996,19 @@
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/search-61667db69725d88755b4.js",
"resourceBytes": 6631,
"encodedBytes": 0,
"unusedBytes": 2483
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/privacy-864d3895f3c3722acef2.js",
"resourceBytes": 720,
"encodedBytes": 0,
"unusedBytes": 396
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/terms-0236318e86139dd7d7f2.js",
"resourceBytes": 11002,
"encodedBytes": 0,
"unusedBytes": 10680
}
]
Expand Down Expand Up @@ -22223,6 +22239,7 @@
{
"name": "https://www.mikescerealshack.co/corrections",
"resourceBytes": 499,
"encodedBytes": 178,
"children": [
{
"name": "(inline) (function loadC…",
Expand All @@ -22239,66 +22256,79 @@
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/webpack-657a8433bac0aabd564e.js",
"resourceBytes": 2351,
"encodedBytes": 0,
"unusedBytes": 1089
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/main-1f8481d632114a408557.js",
"resourceBytes": 17656,
"encodedBytes": 0,
"unusedBytes": 4600
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/_app-ef508c97234d1af96c47.js",
"resourceBytes": 1235,
"encodedBytes": 0,
"unusedBytes": 360
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/commons.49455e4fa8cc3f51203f.js",
"resourceBytes": 44060,
"encodedBytes": 0,
"unusedBytes": 21377
},
{
"name": "https://www.mikescerealshack.co/_next/static/mzRoXqFvl8zs__gA-TEjz/_buildManifest.js",
"resourceBytes": 1545,
"encodedBytes": 0,
"unusedBytes": 0
},
{
"name": "https://www.mikescerealshack.co/_next/static/mzRoXqFvl8zs__gA-TEjz/_ssgManifest.js",
"resourceBytes": 76,
"encodedBytes": 0,
"unusedBytes": 0
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/1aeab0175d4c4d823d7a78205bceb5dd9cd36d32.496adc53c293e81e396d.js",
"resourceBytes": 67835,
"encodedBytes": 0,
"unusedBytes": 31886
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/framework.9d524150d48315f49e80.js",
"resourceBytes": 130277,
"encodedBytes": 0,
"unusedBytes": 47064
},
{
"name": "https://www.googletagmanager.com/gtag/js?id=G-RTW9M3W5HC",
"resourceBytes": 335131,
"encodedBytes": 0,
"unusedBytes": 133597
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/corrections-7a620a51252fe2c2f77b.js",
"resourceBytes": 3328,
"encodedBytes": 1502,
"unusedBytes": 880
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/index-b332e80eef0e3820d9a6.js",
"resourceBytes": 1856,
"encodedBytes": 0,
"unusedBytes": 1466
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/terms-0236318e86139dd7d7f2.js",
"resourceBytes": 11002,
"encodedBytes": 0,
"unusedBytes": 10680
},
{
"name": "https://www.mikescerealshack.co/_next/static/chunks/pages/privacy-864d3895f3c3722acef2.js",
"resourceBytes": 720,
"encodedBytes": 0,
"unusedBytes": 396
}
]
Expand Down
6 changes: 5 additions & 1 deletion core/test/results/sample_v2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2754,6 +2754,7 @@
{
"name": "http://localhost:10200/dobetterweb/dbw_tester.html",
"resourceBytes": 8414,
"encodedBytes": 8420,
"unusedBytes": 985,
"children": [
{
Expand Down Expand Up @@ -2841,15 +2842,18 @@
{
"name": "http://localhost:10200/dobetterweb/dbw_tester.js",
"resourceBytes": 233,
"encodedBytes": 244,
"unusedBytes": 0
},
{
"name": "http://localhost:10200/dobetterweb/empty_module.js?delay=500",
"resourceBytes": 0
"resourceBytes": 0,
"encodedBytes": 5
},
{
"name": "http://localhost:10200/dobetterweb/third_party/aggressive-promise-polyfill.js",
"resourceBytes": 166320,
"encodedBytes": 166334,
"unusedBytes": 94194
}
]
Expand Down
3 changes: 3 additions & 0 deletions shared/localization/locales/en-US.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions shared/localization/locales/en-XL.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading