Budgeting for Third-Party Scripts
Manage the performance impact of third-party scripts — analytics, ads, chat widgets, A/B testing, and tag managers. Set a third-party budget and strategies to keep external scripts under control.
Detailed Explanation
Third-Party Script Budgets
Third-party scripts are the hidden budget killer. Analytics, advertising, chat widgets, A/B testing tools, social media embeds, and tag managers can easily add 300-800 KB to a page, often without the development team's knowledge or control.
The Third-Party Tax
A typical site loads 15-30 third-party requests. Common offenders:
| Script | Typical Size (compressed) |
|---|---|
| Google Analytics (GA4) | 35-45 KB |
| Google Tag Manager | 30-80 KB (+ all loaded tags) |
| Facebook Pixel | 25-35 KB |
| Intercom Chat | 200-300 KB |
| Hotjar | 40-60 KB |
| Stripe.js | 25-40 KB |
| reCAPTCHA | 150-200 KB |
| Google Ads conversion | 30-50 KB |
Setting a Third-Party Budget
A reasonable third-party budget is 100-150 KB for a performance-focused site. This forces prioritization:
- Must-have — Analytics (35 KB), payment processor (30 KB) = 65 KB
- Should-have — Error tracking (15 KB), A/B testing (20 KB) = 35 KB
- Nice-to-have — Chat widget (250 KB), heatmaps (50 KB) = deprioritized
Containment Strategies
- Defer loading — Load third-party scripts after the main content is interactive (
deferattribute or dynamic injection afterloadevent) - Facade pattern — Show a static placeholder for chat widgets; load the real widget only on click
- Self-host when possible — Self-hosting analytics or font files gives you cache control and removes DNS lookup time
- Use a tag manager wisely — GTM itself is small, but it can load an unlimited number of additional scripts. Set a tag budget within GTM.
- Audit regularly — Use Chrome DevTools Coverage tab to identify unused third-party code
Measuring Third-Party Impact
Use Lighthouse's "Third-Party Usage" audit or WebPageTest's "Third-Party" breakdown to see:
- Total bytes from third-party origins
- Main thread blocking time caused by third-party scripts
- Number of third-party requests
Request-Level Budgets
Beyond size, consider request count budgets:
- Total requests — Max 30-40 per page
- Third-party requests — Max 10-15 per page
- Blocking requests — Max 2-3 render-blocking scripts
Each HTTP request adds latency, especially on high-latency connections (3G has 300-400ms per round-trip).
Use Case
Third-party script budgets are crucial for marketing-heavy sites where stakeholders frequently request new tracking pixels, chat tools, and widgets. A performance team might establish a 'third-party council' that approves or rejects new scripts based on the remaining third-party budget. E-commerce sites in particular suffer from third-party bloat — adding retargeting pixels, review widgets, recommendation engines, and payment processors can easily double the page weight.