Here is a free online Lighthouse Treemap Visualizer by Google Developers themselves. This is a simple website that takes JSON report generated during the Lighthouse audit and generates the treemap that you can analyze. It creates different blocks and partitions to show you how the scripts on your website or webpages work. By analyzing the size and used status of the scripts, you can make further decisions to optimize your website.
How to Generate Lighthouse Treemap using this Website?
In order to use this Treemap visualizer, you don’t have to sign up or register anywhere. All you have to do is go to this website here and then simply upload a JSON report. If you have a previous report generated by Lighthouse then you can use that here.
If you do not have a JSON report, then you can generate one. Just open DevTools in the browser and run the LH audio on any website. After it generates the report, you export the JSON report.
Now, you just have to upload the generated JSON report on this website. It will instantly generate a tree map that you can analyze. Click on any block to see more details about it. And after analyzing a block, you can switch back to the table in a click.
In this way, you can use this simple and powerful tool to generate and analyze Lighthouse Treemap. The process is simple and this tool is open source. If you want then you can always host your own instance of it.
If you are a web developer, especially a front-end developer, then you may like this tool for its simplicity. Use it on any LH report that you have and see the Treemap. It can help you greatly identify which JS resources need to be optimized in order to make a website fast and reliable.