Supercharge your performance detective skills with Lighthouse and Chrome DevTools.


![Milica Mihajlija](https://web.dev/images/authors/mihajlija.jpg) Milica Mihajlija [X](https://twitter.com/bibydigital) [GitHub](https://github.com/mihajlija) [Homepage](https://mihajlija.github.io/)

<br />

As a developer, you often don't have control over [which third-party scripts](https://web.dev/articles/third-party-javascript#network) your site loads. Before you can optimize third-party content you have to do some detective work to find out what's making your site slow. 🕵️

In this post, you'll learn how to use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) and [Chrome DevTools](https://developer.chrome.com/docs/devtools) to identify slow third-party resources. The post walks through increasingly robust techniques which are best used in combination.

## If you only have 5 minutes

The Lighthouse [Performance audit](https://developer.chrome.com/docs/lighthouse/performance) helps you discover opportunities to speed up page loads. Slow third-party scripts are likely to appear in the **Diagnostics** section under the **Reduce JavaScript execution time** and **Avoid enormous network payloads** audits.

To run an audit:

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.](https://web.dev/static/articles/identify-slow-third-party-javascript/image/screenshot-the-chrome-de-7053b188c88be.png)

### Third-party usage

The Lighthouse **Third-party usage** audit shows a list of the third-party providers a page uses. This overview can help you better understand the big picture and identify redundant third-party code. The audit is available in the [Lighthouse extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) and will soon be added to DevTools in Chrome 77.
![Screenshot showing that 51 third-parties were found and a list of imaginary startups.](https://web.dev/static/articles/identify-slow-third-party-javascript/image/screenshot-showing-51-th-d6a2957eab82e.png) Third-party provider names generated with [Startup generator](http://tiffzhang.com/startup/?s=641553836036). Any similarity to actual startups, living or dead, is purely coincidental.

### Reduce JavaScript execution time

The Lighthouse [Reduce JavaScript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time) audit highlights scripts that take a long time to parse, compile, or evaluate. Select the **Show 3rd-party resources** checkbox to discover CPU-intensive third-party scripts.

![Screenshot showing that the 'Show third-party resources' checkbox is checked.](https://web.dev/static/articles/identify-slow-third-party-javascript/image/screenshot-showing-the-c1580cc72090e.png)

### Avoid enormous network payloads

The Lighthouse [Avoid enormous network payloads](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight) audit identifies network requests---including those from third-parties---that may slow down page load time. The audit fails when your network payload exceeds 4,000 KB.

![Screenshot of the Chrome DevTools 'Avoid enormous network payloads' audit.](https://web.dev/static/articles/identify-slow-third-party-javascript/image/screenshot-the-chrome-de-50a14fcbf3e4a.png)

## Block network requests in Chrome DevTools

Chrome DevTools [network request blocking](https://developer.chrome.com/docs/devtools/network#block) allows you to see how your page behaves when a particular script, stylesheet, or other resource isn't available. After you identify third-party scripts that you suspect affect performance, measure how your load time changes by blocking the requests to those scripts.

To enable request blocking:
1. Press \`Control+Shift+J\` (or \`Command+Option+J\` on Mac) to open DevTools.
1. Click the **Network** tab.
1. Right-click any request in the **Network** panel.
1. Select **Block request URL**.

![A screenshot of the context menu in the Chrome DevTools Performance panel. The 'Block request URL' option is highlighted.](https://web.dev/static/articles/identify-slow-third-party-javascript/image/a-screenshot-the-context-3262091c7b39f.png)

A **Request blocking** tab will appear in the DevTools drawer. You can manage which requests have been blocked there.

To measure the impact of third-party scripts:

1. Measure how long your page takes to load using the **Network** panel. To emulate real-world conditions, turn on [network throttling](https://developer.chrome.com/docs/devtools/network#throttle) and [CPU throttling](https://developer.chrome.com/blog/new-in-devtools-61#throttling). (On faster connections and desktop hardware, the impact of expensive scripts may not be as representative as it would be on a mobile phone.)
2. Block the URLs or domains responsible for third-party scripts you believe are an issue.
3. Reload the page and re-measure how long it takes to load without the blocked third-party scripts.

You should hopefully see a speed improvement, but occasionally blocking third-party scripts might not have the effect you expect. If that's the case, reduce the list of blocked URLs until you isolate the one that's causing slowness.

Note that doing three or more runs of measurement and looking at the median values will likely produce more stable results. As third-party content can occasionally pull in different resources per page load, this approach can give you a more realistic estimate. [DevTools now supports multiple recordings](https://twitter.com/ChromeDevTools/status/963820146388221952) in the **Performance** panel, making this a little easier.