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.
Lighthouse Treemap generates visualization of JS bundles on your website. It’s sourcemaps compatible and is great for understanding large JavaScript modules used by your webpages. In addition to this, it can also help you visualize unused bytes by certain resources. And the tool I have mentioned here lets you see that for any website, given that you have the JSON report of the scan.
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.
Final thoughts:
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.
