---
title: Finding and ranking your worst JavaScript offenders
description: >-
  Use Lighthouse Treemap, Chrome DevTools, and WebPageTest to identify the 20%
  of JavaScript causing 80% of performance problems.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/themes/best-practices/performance/finding-worst-offenders
  md: >-
    https://shopify.dev/docs/storefronts/themes/best-practices/performance/finding-worst-offenders.md
api_name: liquid
---

# Finding and ranking your worst Java​Script offenders

Most JavaScript performance issues aren't distributed evenly. A handful of large dependencies or inefficient third-party scripts account for most problems, and identifying those worst offenders reduces main-thread blocking, improves [INP](https://web.dev/inp/), and accelerates [LCP](https://web.dev/lcp/) and [FCP](https://web.dev/fcp/). Use these three ranking methods to find the 20 percent of JavaScript causing 80 percent of your performance problems, then prioritize removing or optimizing those files.

***

## Rank by bytes: Lighthouse Treemap

The [Treemap](https://googlechrome.github.io/lighthouse/treemap/) visualizes JavaScript files and modules as boxes sized by bytes so that you can quickly identify the largest dependencies.

Steps:

1. Run a Lighthouse test.
2. Open the Treemap link from the report.
3. Identify the largest boxes.
4. Drill into modules if source maps are available.

Look for unused third-party scripts, large dependencies with smaller alternatives, scripts from services that are no longer used, and duplicated functionality.

***

## Rank by scripting time: Chrome Dev​Tools

Chrome DevTools measures the total time spent executing JavaScript during page load.

Steps:

1. Open Chrome DevTools and select the **Performance** tab.
2. Record a page load.
3. Check the **Bottom-Up** or **Call Tree** view.
4. Sort by **Self Time** or **Total Time**.
5. Filter by domain using search.

***

## Rank by blocking time: Web​Page​Test

Blocking time affects the user experience most directly. It prevents the browser from responding to user input.

Steps:

1. Run WebPageTest.
2. Navigate to the **Processing Breakdown** view.
3. See the **Main Thread** section.
4. Review the scripts ranked by total blocking time.

You can also block specific domains to measure their impact.

***

## Theme Check

Shopify's linter identifies performance issues in theme code.

Theme Check catches:

* Remote assets from external domains.
* Parser-blocking scripts, through the `ParserBlockingScript` check.
* `img` tags missing `width` and `height` attributes, through the `ImgWidthAndHeight` check.

The `AssetSizeCSS` and `AssetSizeJavaScript` checks also flag oversized bundles, at a default of `100000` raw bytes for CSS and `10000` raw bytes for JavaScript. Both measure the raw file size, not the minified or compressed size, and neither runs until you enable it in `.theme-check.yml`. See [Theme Check linting tool](https://shopify.dev/docs/storefronts/themes/best-practices/performance/theme-check-tool) for the configuration.

To run Theme Check, use Shopify CLI: `shopify theme check`.

***

## Recommended workflow

Use these tools in sequence to systematically reduce JavaScript overhead:

1. Run Theme Check during development.
2. Fix the issues it identifies.
3. Use Lighthouse Treemap for final bundle analysis.
4. Use WebPageTest for real-world impact testing.
5. Verify that all scripts are still needed.
6. Remove scripts from unused services.
7. Remove legacy or duplicate scripts.
8. Evaluate with marketing and stakeholders whether the performance cost is worth the feature benefit.
9. Look for smaller, more performant alternatives for large dependencies.

***

## References

* [3 ways to find your worst JavaScript offenders for page load](https://performance.shopify.com/blogs/blog/3-ways-to-find-your-worst-javascript-offenders-for-page-load)
* [Theme Check configuration](https://shopify.dev/docs/storefronts/themes/tools/theme-check/configuration)
* [Audit and remove third-party scripts](https://shopify.dev/docs/storefronts/themes/best-practices/performance/audit-remove-third-party-scripts)
* [Theme Check linting tool](https://shopify.dev/docs/storefronts/themes/best-practices/performance/theme-check-tool)
* [Understanding INP](https://shopify.dev/docs/storefronts/themes/best-practices/performance/understanding-inp)

***