Lighthouse Treemap ☂️

[connorjclark]

• script-treemap-data audit
• • first pass, add to experimental new_audit: add script-treemap-data to experimental #11271
• • add inline script coverage core(script-treemap-data): create node for each inline script #13802
• • add unmapped bytes core(script-treemap-data): include unmapped bytes #12452
• • fix Duplicate sourcemap entries w/ serviceworker Duplicate sourcemap entries w/ serviceworker #12322
• • move to default config core(script-treemap-data): default config #12494
• Report UI to open treemap app report: add treemap button, refactor icon styles #12392
• Treemap app:
• • Refactor building/deploying apps for GH pages misc(build): refactor viewer bundler into reusable GhPagesApp #11564
• • Initial app structure misc(treemap): initialize app structure #11635
• • Minimal app misc(treemap): first pass #11832
• • View mode: unused bytes misc(treemap): unused-bytes view mode #12142
• • bundle selector: Select specific bundles; or all JS misc(treemap): root node selector #12360
• • View mode: large modules
• • View mode: duplicate modules misc(treemap): duplicate-modules view mode #12424
• • Data table misc(treemap): add data table #12363 misc(treemap): highlight treemap node on mouse hover table row #12483
• • Shade node based on coverage misc(treemap): shade background for unused bytes #12486 Lighthouse Treemap ☂️ #11254
• • i18n misc(treemap): i18n #12441
• • GA misc(treemap): add GA snippet for new property #12481
• • misc misc(treemap): tweak styles for logo spacing and text colors #12342 misc(treemap): fix colors #12462 misc(treemap): upgrade to 3.2.0 for keyboard navigation #12488 misc(treemap): set focus-visible styles for view mode buttons #12495 misc(treemap): tweak styles for mobile #12493 misc(treemap): update colors on enter keypress #12496 misc(treemap): remove too similar color hues #12497 misc(treemap): esc to zoom out #12498
• • [stretch] Resource summary option in data picker (find code in 27137af )
• [stretch] Additional mode: execution time
• [stretch] Options menu for controlling "partition by"
• [stretch] Zoom in/out cursors

Design (Googlers only, sorry): https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZeok9-CasvMb/files/MCFFTHkODMy6RyA6lXJuFGJb

Just one of the mock designs:

Initial proof-of-concept PR: #10312

Branch with these items in various levels of "WIP/Draft" state: https://github.com/GoogleChrome/lighthouse/compare/viewer-treemap-2

ref #10369

[brendankenny]

(I can move this feedback to a separate issue if that's easier)

While working on a mock LR bundle to test speed-index perf, I accidentally made a 12MiB bundle. As I was trimming stuff out of the bundle, I wanted to easily see everything inside, so I generated the bundle with source maps, took a Lighthouse run of a page with the bundle in it, then looked at the treemap of it :)

Saved report is here

Ridiculousness of doing it this way aside, there were some issues I ran into:

• almost all of the files are missing in the treemap view except lightrider-entry.js (which is huge because it has an inlined trace, but there should still be other files in the remaining 15%). All the rest of the files are shown in the table, however.
• the coverage bars in the table are tiny, presumably in relation to the lightrider-entry.js 2.1MiB coverage bar, but lightrider-entry.js doesn't have a coverage bar
  
• clicking on the "Unused Bytes" button makes lightrider-entry.js completely shaded, even though it's definitely at least somewhat used since it's the entry point :). There's no unused bytes in the table though...is it assuming that it's 100% unused and so shading the whole thing in that case?
• sorting by unused bytes in the table interleaves bytes and KiB. It's not quite string code unit order, but it's close enough that I would bet it's sorting strings with the default [].sort() somewhere
  

[connorjclark]

reference:

almost all of the files are missing in the treemap view except lightrider-entry.js (which is huge because it has an inlined trace, but there should still be other files in the remaining 15%). All the rest of the files are shown in the table, however.

the third child of this d1 node is 91% of the total size, and lightrider-entry.js is overwhelmingly the biggest thing there, so everything else is hidden. I'm not familiar with how the webtreemap lib makes these layout decisions, but if we wanted to show every possible node we'd need some clever UI. Maybe a three-dots button in the bottom right corner of a node ... click for a drop down list, select and then treemap does another layout but zooms into the node you selected and does another layout (possibly with more three dot buttons).

It'd be pretty involved. Since the files are relatively small, and the main functionality here is to identify opportunities to reduce bundle size, is it worth it?

the coverage bars in the table are tiny, presumably in relation to the lightrider-entry.js 2.1MiB coverage bar, but lightrider-entry.js doesn't have a coverage bar

yeah i'm not happy with how minuscule they look here. but I do like the idea of relative coverage bars. I think in a more realistic bundle, which don't have the property that the second largest file is 1% the size of the largest file, the coverage bar is fine.

can you run LH again on this page and see why "clients/lightrider/lightrider-entry.js" node doesn't have unusedBytes set?

clicking on the "Unused Bytes" button makes lightrider-entry.js completely shaded, even though it's definitely at least somewhat used since it's the entry point :). There's no unused bytes in the table though...is it assuming that it's 100% unused and so shading the whole thing in that case?

hmm... it shouldn't be doing that. am I reading this code wrong? seems correct... behavior you noticed is unexpected.

https://github.com/GoogleChrome/lighthouse/blob/99c47cd/lighthouse-treemap/app/src/main.js#L614

sorting by unused bytes in the table interleaves bytes and KiB. It's not quite string code unit order, but it's close enough that I would bet it's sorting strings with the default [].sort() somewhere

This is so weird. ?debug is fine! What's going on ...

[patrickhulce]

@connorjclark is the task state accurate here? What's remaining in treemap that's still P1?

[connorjclark]

Fixed the sorting issue. The shading issue I don't see anymore. There are other improvements to be made but its past time to close this tracking issue.