Third-Party Scripts skill for Codex

Done well means: every third-party script has a known owner, purpose and measured cost; each loads no earlier than its job requires; removals and changes are agreed with the owners (marketing, product, legal) rather than made silently; and the page’s LCP, INP and TBT improve measurably.

Workflow

- [ ] 1. Inventory: every third-party origin, how it is loaded, who owns it, why it exists
- [ ] 2. Measure cost per vendor (blocking experiment + Performance panel)
- [ ] 3. Classify each: remove, defer, load on interaction, facade, worker, keep as is
- [ ] 4. Agree the plan with the owners; legal/consent review where data collection changes
- [ ] 5. Implement in code (or tag manager config) one vendor at a time
- [ ] 6. Re-measure lab and field; record the new loading contract per vendor

Inventory

• DevTools Network: group or filter by domain; DevTools Performance panel and Lighthouse third-parties-insight attribute main-thread time and transfer size per entity.
• Search the codebase for loaders: <script src="https://, next/script, useScript, gtag(, fbq(, dataLayer, analytics.load, iframes with external src.
• Tag manager containers (GTM and similar) hide most vendors; export the container or read the published tags list. Changes there need the container owner.

| Vendor | Purpose | Loaded via | Owner | Pages | Consent category | Transfer kB | Main-thread ms |
|---|---|---|---|---|---|---|---|

Measure each vendor’s cost

The decisive test is removal: block one vendor and compare.

• DevTools > Network request blocking: add a pattern (*hotjar.com*), reload with throttling, record the Performance panel, compare LCP, TBT and long tasks.
• Lighthouse: --blocked-url-patterns='*://*.vendor.com/*' with identical settings, median of 5 runs, with and without.
• WebPageTest (network needed) supports blocking domains per test and filmstrip comparisons; good for showing stakeholders.

Typical big costs: A/B testing tools with anti-flicker snippets (hide the page until the script loads, wrecking LCP), chat widgets (hundreds of kB on every page), session replay (main-thread work on every DOM mutation, INP), ad stacks, social embeds, multiple analytics suites sending the same events.

Loading strategy decision

Vendor type	Default strategy
Analytics, RUM	async, after critical content; one analytics suite, not three
Tag manager	async; audit what it loads; ban synchronous custom HTML tags
A/B testing	Server-side or edge experiments where possible; if client-side, scope anti-flicker to the tested element with a short timeout (or remove it)
Chat / support widget	Facade button; load the real widget on click or after idle on support pages only
Video embeds (YouTube, Vimeo)	Facade (thumbnail + play button, e.g. lite-youtube-embed), load iframe on click
Maps	Static map image facade; interactive map on interaction
Social / review widgets	loading="lazy" iframes or load on visibility
Session replay, heatmaps	Sample a fraction of sessions; exclude interaction-heavy pages if INP suffers
Marketing pixels	Consent-gated; consider server-side tagging / conversion APIs to remove client scripts
Anything unowned or unused	Remove (with confirmation)

Code patterns

<!-- async: runs as soon as downloaded; defer: after parsing, in order -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
<link rel="preconnect" href="https://cdn.vendor.com" crossorigin>  <!-- only for early, critical vendors -->

// Load on first interaction or after idle, whichever comes first
function loadChat() {
  if (window.__chatLoaded) return; window.__chatLoaded = true;
  const s = document.createElement('script');
  s.src = 'https://widget.vendor.com/chat.js'; s.async = true;
  document.head.append(s);
}
['pointerdown', 'keydown', 'scroll'].forEach((e) => addEventListener(e, loadChat, { once: true, passive: true }));
requestIdleCallback?.(loadChat, { timeout: 10000 });

// Next.js
import Script from 'next/script';
<Script src="https://widget.vendor.com/chat.js" strategy="lazyOnload" />      // after idle
<Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX" strategy="afterInteractive" />

strategy="worker" (Partytown) is experimental in Next.js and App Router support is limited. Partytown in general runs scripts in a web worker with a synchronous DOM proxy; it suits analytics and pixels, breaks scripts that need tight DOM timing or document.write, and needs testing per vendor.

Consent and privacy

Under GDPR/ePrivacy-style rules, non-essential trackers load only after consent. Gating them behind the consent manager is also a performance win. Do not change consent categories or data collection behaviour without the privacy owner; a lawyer or DPO decides what counts as essential.

Security

Third-party scripts run with full page privileges. Prefer vendors that support Subresource Integrity for pinned versions, keep a Content Security Policy listing allowed origins, and remove abandoned tags (expired domains can be taken over).

Hard rules

• Never remove or defer a vendor without the owner’s agreement; it may drive revenue, attribution or compliance. Present the measured cost and the proposal first.
• Loading analytics later can lose some pageviews from fast bounces; state the trade-off.
• Do not self-host vendor scripts that update frequently without a refresh process; you freeze bugs and break their backend contracts. Self-hosting is fine for static libraries with versioned URLs.
• preconnect to more than a few origins wastes sockets; reserve it for critical ones.

Verification

• Blocking experiment repeated after changes: the remaining delta per vendor is small, and lab LCP/TBT improved (median of 5, same settings).
• Functional checks with each owner: events still arrive in analytics, chat opens, experiments still bucket users, consent still blocks pre-consent loading.
• Field: RUM INP and LCP for the affected page groups over the following 1–4 weeks.

Report template

## Third-party audit: <site>, <pages>
| Vendor | Owner | Cost before (block test) | Action | Cost after |
|---|---|---|---|---|
| A/B tool + anti-flicker | Growth | LCP +1.1 s | anti-flicker scoped to hero, 300 ms timeout | LCP +0.2 s |
| Chat widget | Support | TBT +380 ms, 420 kB | facade, load on click; support pages only | 3 kB |
| Legacy pixel (no owner) | - | 2 requests | removal proposed, awaiting confirmation | - |
Lab (mobile, median of 5): LCP 3.6 -> 2.4 s, TBT 910 -> 280 ms
Open items: consent review for <vendor>; server-side tagging evaluation