third-party-impact

What this skill does

# Third-Party Impact

Analyze the performance impact of all third-party resources loaded on a page.
Categorizes scripts by vendor type, measures their contribution to main-thread
blocking time via Long Task attribution, calculates byte weight per category,
identifies render-blocking resources, and estimates connection overhead per
third-party domain.

## When to Use

- Diagnosing slow page loads caused by third-party scripts.
- Auditing tag manager bloat and identifying redundant trackers.
- Preparing a cost-benefit report for each third-party dependency.
- Identifying render-blocking third-party resources.
- Evaluating whether to self-host, defer, or remove specific vendors.

## Prerequisites

- **Playwright MCP server** connected and responding (all `mcp__playwright__browser_*` tools available).
- **Chromium-based browser** required for Long Task attribution, CDP Network domain, and Performance metrics.
- Target page must be reachable from the browser instance.
- Best results on a fresh page load (no cached resources).

## Vendor Categorization Database

The following domain patterns are used for automatic categorization. Unknown
domains are labeled `unknown` for manual classification.

```
VENDOR_CATEGORIES = {
  "analytics": [
    "google-analytics.com", "analytics.google.com", "www.googletagmanager.com",
    "gtag", "ga.js", "analytics.js",
    "hotjar.com", "static.hotjar.com",
    "mixpanel.com", "cdn.mxpnl.com",
    "segment.com", "cdn.segment.com", "api.segment.io",
    "amplitude.com", "cdn.amplitude.com",
    "heap.io", "heapanalytics.com",
    "plausible.io", "matomo", "piwik",
    "clarity.ms", "fullstory.com", "logrocket.com",
    "newrelic.com", "bam.nr-data.net", "js-agent.newrelic.com",
    "sentry.io", "browser.sentry-cdn.com",
    "datadog", "datadoghq.com"
  ],
  "ads": [
    "googlesyndication.com", "pagead2.googlesyndication.com",
    "doubleclick.net", "googleadservices.com",
    "adservice.google.com", "adsense",
    "amazon-adsystem.com", "ads-twitter.com",
    "adsrvr.org", "criteo.com", "criteo.net",
    "outbrain.com", "taboola.com", "revcontent.com",
    "mediavine.com", "ezoic.net"
  ],
  "social": [
    "facebook.net", "connect.facebook.net", "fbcdn.net",
    "platform.twitter.com", "syndication.twitter.com",
    "platform.linkedin.com", "snap.licdn.com",
    "pinterest.com", "assets.pinterest.com",
    "tiktok.com", "reddit.com", "embedly.com",
    "addthis.com", "sharethis.com"
  ],
  "tag_managers": [
    "googletagmanager.com", "gtm.js",
    "tags.tiqcdn.com", "tealiumiq.com",
    "cdn.optimizely.com", "launchdarkly.com",
    "adobedtm.com", "assets.adobedtm.com"
  ],
  "cdn_libraries": [
    "cdn.jsdelivr.net", "cdnjs.cloudflare.com", "unpkg.com",
    "ajax.googleapis.com", "code.jquery.com",
    "stackpath.bootstrapcdn.com", "maxcdn.bootstrapcdn.com",
    "cdn.tailwindcss.com",
    "polyfill.io", "cdn.polyfill.io"
  ],
  "fonts": [
    "fonts.googleapis.com", "fonts.gstatic.com",
    "use.typekit.net", "p.typekit.net",
    "fast.fonts.net", "cloud.typography.com",
    "use.fontawesome.com", "kit.fontawesome.com"
  ],
  "video": [
    "youtube.com", "www.youtube.com", "player.vimeo.com",
    "fast.wistia.com", "vidyard.com"
  ],
  "chat_support": [
    "intercom.io", "widget.intercom.io",
    "crisp.chat", "client.crisp.chat",
    "zendesk.com", "static.zdassets.com",
    "drift.com", "js.driftt.com",
    "tawk.to", "livechatinc.com", "cdn.livechatinc.com"
  ],
  "consent_privacy": [
    "cookiebot.com", "consentmanager.net",
    "onetrust.com", "cdn.cookielaw.org",
    "osano.com", "iubenda.com"
  ]
}
```

## Workflow

### Step 1 -- Navigate with Network Monitoring via CDP

Set up CDP Network monitoring before navigation to capture all requests
from the very beginning.

```javascript
browser_run_code({
  code: `async (page) => {
    const client = await page.context().newCDPSession(page);

    // Storage for all requests
    window.__thirdParty = { requests: [], longTasks: [] };

    await client.send('Network.enable');

    // Collect all network requests
    const requests = [];
    client.on('Network.requestWillBeSent', (params) => {
      requests.push({
        requestId: params.requestId,
        url: params.request.url,
        method: params.request.method,
        type: params.type,
        initiator: params.initiator ? {
          type: params.initiator.type,
          url: params.initiator.url || null,
          lineNumber: params.initiator.lineNumber || null
        } : null,
        timestamp: params.timestamp,
        isLinkPreload: params.request.isLinkPreload || false
      });
    });

    client.on('Network.responseReceived', (params) => {
      const req = requests.find(r => r.requestId === params.requestId);
      if (req) {
        req.status = params.response.status;
        req.mimeType = params.response.mimeType;
        req.protocol = params.response.protocol;
        req.remoteAddress = params.response.remoteIPAddress || null;
        req.headers = {
          contentLength: params.response.headers['content-length'] || null,
          contentEncoding: params.response.headers['content-encoding'] || null,
          cacheControl: params.response.headers['cache-control'] || null,
          server: params.response.headers['server'] || null
        };
      }
    });

    client.on('Network.loadingFinished', (params) => {
      const req = requests.find(r => r.requestId === params.requestId);
      if (req) {
        req.encodedDataLength = params.encodedDataLength;
        req.finished = true;
      }
    });

    // Store reference for later retrieval
    page.__cdpRequests = requests;
    page.__cdpClient = client;

    return 'CDP Network monitoring enabled';
  }`
})
```

### Step 2 -- Navigate to the Target Page

```
browser_navigate({ url: "<target_url>" })
```

Wait for the page and all deferred scripts to load:

```
browser_wait_for({ time: 5 })
```

### Step 3 -- Install Long Task Observer

Set up a PerformanceObserver for Long Tasks with attribution to identify
which scripts are blocking the main thread.

```javascript
browser_evaluate({
  function: `() => {
    window.__longTasks = [];

    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        const task = {
          startTime: entry.startTime,
          duration: entry.duration,
          attribution: []
        };

        if (entry.attribution) {
          for (const attr of entry.attribution) {
            task.attribution.push({
              name: attr.name,
              entryType: attr.entryType,
              containerType: attr.containerType,
              containerSrc: attr.containerSrc,
              containerId: attr.containerId,
              containerName: attr.containerName
            });
          }
        }

        window.__longTasks.push(task);
      }
    }).observe({ type: 'longtask', buffered: true });

    return 'Long Task observer installed';
  }`
})
```

Perform some interactions to trigger deferred script execution:

```javascript
browser_evaluate({
  function: `() => {
    window.scrollBy(0, window.innerHeight * 3);
    return 'scrolled';
  }`
})
```

```
browser_wait_for({ time: 3 })
```

### Step 4 -- Harvest Network Request Data

Collect all captured network requests and categorize them.

```javascript
browser_run_code({
  code: `async (page) => {
    const requests = page.__cdpRequests || [];
    const pageOrigin = new URL(page.url()).origin;

    // Vendor categorization
    const VENDOR_CATEGORIES = {
      analytics: [
        'google-analytics.com', 'analytics.google.com', 'googletagmanager.com',
        'hotjar.com', 'static.hotjar.com', 'mixpanel.com', 'cdn.mxpnl.com',
        'segment.com', 'cdn.segment.com', 'api.segment.io',
        'amplitude.com', 'cdn.amplitude.com', 'heap.io', 'heapanalytics.com',
        'plausible.io', 'clarity.ms', 'fullstory.com', 'logrocket.com',
        'newrelic.com', 'bam.nr-data.net', 'js-agent.newrelic.com',
        'se