How to use the Lighthouse Treemap
To use the Lighthouse Treemap feature:
- With DevTools open, use the shortcut Cmd + Shift + P and search for Lighthouse.
- With the Lighthouse Panel open, enable the Performance category and select Generate report.
- With the performance report open, select View Treemap.
Nice work! You can now see a Lighthouse Treemap. At this point, you can do the following:
- Filter by individual bundles.
- You can select individual files to dive deeper into them.
- You can view detailed coverage stats in the coverage section near the bottom of the page.
- Thanks to sourcemaps, the visualisation can show you your original source files, for example your TypeScript files.
- It can be very helpful to dive into the files part of the
node_modulesfolder. The visualisation clearly shows which third-party scripts occupy a large amount of bytes.
- You can run Lighthouse from the command line to see the treemap from a report.
This feature is currently in Chrome Stable, tested in version 95.
You can capture code coverage metrics while you make a Performance recording.