Finding bloat: Coverage tab vs Lighthouse treemap

Finding bloat: Coverage tab vs Lighthouse treemap

Both tools tell you which code is too heavy, but in different shapes. The Coverage tab (in Chrome DevTools) shows what percent of each file went unused on this page. Lighthouse's treemap draws every script as a colored rectangle sized by weight.

Think of Coverage like a receipt and the treemap like a pie chart.

When to reach for which:
— You want to cut unused code from one specific file: Coverage, since it highlights the exact unused lines.
— You want to spot the single biggest offender fast: treemap, because the largest rectangle jumps out.

Try this: in DevTools press the menu (three dots), open 'Coverage', reload the page, and sort by 'Unused Bytes'. The top row is usually your easiest win. This one's more visual than scary.