Skip to main content

Finding and ranking your worst JavaScript 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, and accelerates LCP and 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.

Anchor to Rank by bytes: Lighthouse TreemapRank by bytes: Lighthouse Treemap

The 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.

Anchor to Rank by scripting time: Chrome DevToolsRank by scripting time: Chrome DevTools

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.

Anchor to Rank by blocking time: WebPageTestRank by blocking time: WebPageTest

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.

Anchor to Theme CheckTheme 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 for the configuration.

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

Anchor to Recommended workflowRecommended 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.

Anchor to ReferencesReferences

Was this page helpful?