Hunting down slow third-party scripts

Third-party scripts are often outside your direct control, but that doesn't mean you're powerless when they drag down performance. The first step is figuring out which resources are actually causing the damage. Lighthouse and Chrome DevTools provide a layered approach to that detective work, from quick audits to targeted network blocking experiments.

Quick wins with Lighthouse

The Lighthouse Performance audit is the fastest way to surface problematic third-party code. Slow scripts typically show up under the Diagnostics section, specifically in the Reduce JavaScript execution time and Avoid enormous network payloads audits.

Run the audit directly from DevTools:

  1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  2. Click the Lighthouse tab.
  3. Click Mobile.
  4. Select the Performance checkbox. (You can clear the rest of the checkboxes in the Audits section.)
  5. Click Simulated Fast 3G, 4x CPU Slowdown.
  6. Select the Clear Storage checkbox.
  7. Click Run audits.

Screenshot of the Chrome DevTools Audits panel.

Check third-party usage

The Third-party usage audit lists all third-party providers loaded by the page. It's a useful overview for spotting redundant or overlapping services. This audit is available in the Lighthouse extension and was scheduled to land in DevTools with Chrome 77.

Screenshot showing that 51 third-parties were found and a list of imaginary startups.
Third-party provider names generated with Startup generator. Any similarity to actual startups, living or dead, is purely coincidental.

Measure script execution cost

The Reduce JavaScript execution time audit points out scripts that consume excessive time for parsing, compiling, or evaluation. Enable the Show 3rd-party resources checkbox to filter for CPU-intensive external scripts.

Screenshot showing that the 'Show third-party resources' checkbox is checked.

Watch payload size

The Avoid enormous network payloads audit flags oversized network requests, including third-party ones, that can stall page load. The audit flags pages whose total network payload exceeds 4,000 KB.

Screenshot of the Chrome DevTools 'Avoid enormous network payloads' audit.

Isolate culprits with request blocking

Once you have a suspect list, confirm the impact using DevTools' network request blocking. This feature lets you observe page behavior when a specific script, stylesheet, or resource is absent.

To enable request blocking:

  1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  2. Click the Network tab.
  3. Right-click any request in the Network panel.
  4. Select Block request URL.

A screenshot of the context menu in the Chrome DevTools Performance panel. The 'Block request URL' option is highlighted.

Blocked requests can be managed in the Request blocking tab in the DevTools drawer.

To assess the performance impact of blocked scripts:

  1. Measure page load time using the Network panel, ideally with network throttling and CPU throttling enabled. Results on desktop hardware and fast connections can mask the real cost experienced on mobile devices.
  2. Block the URLs or domains of the third-party scripts you suspect are problematic.
  3. Reload and re-measure page load time without those scripts.

If you don't see the expected improvement, narrow the list of blocked URLs until the culprit is isolated. For more stable results, run the measurement at least three times and compare median values—third-party content can vary from load to load. DevTools supports multiple recordings in the Performance panel to make repeated measurements easier.