My experiment with 30 days of web performance tips. All packaged up for your temporary viewing pleasure.
In this post, I'll cover:
- What is Lighthouse Treemap?
- Existing similar tools
- The gap Lighthouse Treemap fills
- How do I access Lighthouse Treemap?
What is Lighthouse Treemap? #
First, lets understand what a treemap is:
Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension of the data.
- from Treemapping on Wikipedia
Below is an example Lighthouse Treemap from github.com. It contains 2 sections:
In the treemap section, the size of each rectangle represents the number of bytes for that script. The treemap also shows the actual number of bytes and percent of total bytes. White gaps in the grid separate each file. Rectangles inside the files represent the individual modules in those scripts:
To see module-level data, sourcemaps need to be enabled. This report from trello.com shows what the Lighthouse Treemap looks like without sourcemaps:
In my experience, I've found reports often are a mixture of the two levels of data. Most third-party scripts will not show modules, and many first-party ones will.
Clicking "Toggle Table" will hide the coverage report and make the treemap larger, revealing more rectangles. We can click on a rectangle to zoom in on it and see its dependencies better. To return, click on the title above the rectangle. Here's a short video demonstrating these actions (and more!):
This is pretty slick as deep-diving on the treemap will show unused bytes for each module too.
Existing similar tools #
The Lighthouse Treemap functionality is similar to two existing toolsets. First, the Coverage tool in Chrome is almost the same tool as the bottom part of the treemap. Second, the treemap itself is very similar to bundle analyzers.
Chrome's Coverage tool #
The Coverage tool already exists in Chrome Dev Tools. The original tool also lists CSS files and used vs unused CSS bytes. You can interact with the page to see the percent used bytes increase.
To access and use it:
- Open Dev Tools
- Type Cmd + Shift + p to open the search tool
- Type "coverage" and click on the Show Coverage drawer
- You might need to drag the drawer higher to see it
- Click the reload button to start a new report
Bundle analyzers #
The treemap itself is very similar to bundle analyzers. Webpack-bundle-analyzer is one of my favorites. These tools help you understand the size of all the bundles (and modules) that your application code generates.
I deployed the output in this webpack-bundle-analyzer example so you can interact with it live. Or, you can watch this quick demonstration:
You might have noticed a key difference in what bundle analyzers show you versus Lighthouse Treemap...
The gap Lighthouse Treemap fills #
Bundle analyzers are great, but they do not show which bundles are loaded and used on your site. The closest tool I've seen that shows this is the Next.js build script output:
It is a handy tool, but it doesn't give me much introspection into which modules are the heaviest. I need this knowledge so I can improve or replace large dependencies. Finally, this and other bundle analyzers don't show me any third-party scripts loaded from outside the application code.
The Limitations of Lighthouse Treemap #
Lighthouse Treemap is not a Swiss army knife. You wouldn't want to prepare a gourmet dinner only using the tiny knife tool. Nor open a bottle of wine with the tiny corkscrew if you had a corkscrew dedicated to that job.
Now we need to understand a few of its limitations:
- Sourcemaps are needed to show finer-grained details.
- The Coverage report is only for initial load.
- It doesn't show dependencies loaded later.
While sourcemaps are needed to get the most benefit, even without them I can see which chunks are largest. I can also see how many are core features versus third-party tracking scripts. You can run the dedicated Coverage tool to explore usage as you interact with the page. Your goal isn't 0% unused. Finally, for scripts loaded later, use the Network tab and bundle analyzers.
How do I access Lighthouse Treemap? #
Now that you know all about Lighthouse Treemap, how do you access it? It's now fully released in Lighthouse in Chrome! You can access it through many routes:
- Lighthouse in Chrome Dev Tools
- PageSpeed Insights
- Running Lighthouse, downloading the JSON, and uploading it here
- Through the Lighthouse Node CLI
Once you have a Lighthouse report (1, 2, or 4 from above), then you'll find the View Treemap button below the metrics:
Finally, Lighthouse Treemap helps me evaluate any website from the outside without having to add dependencies like bundle analyzers.
Have you tried out Lighthouse Treemap yet? Has it made measuring performance for your site easier? Let me know in the webmentions!
Don't miss a post. Sign up for my newsletter!