Fixing Third-Party Script Bloat on Page Load

What a third-party script actually costs

The download size of a third-party script is only part of its cost, and often not the biggest part. When you add one line of embed code to a page, the browser may have to do all of this:

• Open new connections. Each new domain needs a DNS lookup, a connection and a TLS handshake before the first byte arrives. On a mobile connection that setup can take longer than the download.
• Download a loader, then more files. Many tags are a small loader that fetches a larger script, which fetches configuration, which fetches further scripts, images, fonts or iframes. The one line you pasted can become dozens of requests.
• Run code on the main thread. Parsing, compiling and running JavaScript happens on the same thread that draws your page and responds to taps. A script that runs for a long time delays both.
• Compete for bandwidth. Requests for third-party files share the connection with your hero image, fonts and stylesheets. On a slow phone connection, a large widget can push back the arrival of your own content.
• Block the page, if loaded carelessly. A third-party script placed in the head without async or defer stops the browser reading the rest of the HTML until it has arrived and run. If that server is slow or down, your page waits with it.

The last point is worth stressing. A third-party script loaded in a blocking way makes your page's speed depend on someone else's server. If their service has a bad day, your page can show nothing for many seconds. This is sometimes called a single point of failure, and it is one of the most important things to rule out.

Putting a number on each third party

Guessing which script is slow is unreliable, because the heaviest file is not always the most expensive one. Use three views together.

Grouped by provider

The Page Speed Analyzer lists third-party requests for the page. Lighthouse and PageSpeed Insights also group third-party code by provider and show the transfer size and main-thread time for each, under a third-party audit or insight depending on the version. Chrome's Performance panel can dim or highlight third-party activity in a recording and summarises time by first party and third party. Together these tell you which providers are worth investigating.

By removal

The most convincing measurement is to load the page without a provider and compare. In Chrome DevTools, open the Network panel, right-click a request from the provider, and choose to block its domain. Reload with a throttled network and CPU profile, and compare the timings with and without it. Blocking a domain also blocks everything that domain would have loaded, so you see the full knock-on cost.

By failure

Lab tools such as WebPageTest can block a domain, or send its requests to a server that never answers, to show what happens if the provider is slow or down. If the page stays blank until the request times out, that script is loaded in a blocking way and must be changed whatever else you decide.

Record the result for each provider in a simple table: domain, what it does, who asked for it, transfer size, main-thread time, and the change in main content timing when blocked. That table is your baseline and makes the conversation about removing a tag much easier.

The fix, step by step

Facade patterns you can copy

A facade is a stand-in that looks like the real widget but costs almost nothing until the visitor uses it. Here is a simple video facade. The HTML shows a thumbnail and a button:

<div class="video-facade" data-video-id="VIDEO_ID">
  <img src="/images/video-poster-VIDEO_ID.jpg" width="640" height="360"
       alt="Product walkthrough video" loading="lazy">
  <button type="button" class="video-play">Play video</button>
</div>

A few lines of JavaScript in your own deferred script swap in the real player on click:

document.querySelectorAll('.video-facade').forEach(box => {
  box.querySelector('.video-play').addEventListener('click', () => {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://www.youtube-nocookie.com/embed/' +
                 box.dataset.videoId + '?autoplay=1';
    iframe.width = 640; iframe.height = 360;
    iframe.title = 'Product walkthrough video';
    iframe.allow = 'autoplay; encrypted-media; picture-in-picture';
    iframe.allowFullscreen = true;
    box.replaceChildren(iframe);
  }, { once: true });
});

Save the poster image on your own site rather than hot-linking the provider's thumbnail, so the facade itself makes no third-party request. Give the facade box the same width and height as the player so nothing moves when it is swapped.

Chat widget on click

const chatButton = document.querySelector('#chat-launcher');
chatButton.addEventListener('click', () => {
  chatButton.disabled = true;
  chatButton.textContent = 'Opening chat...';
  const s = document.createElement('script');
  s.src = 'https://widget.example-chat.com/loader.js';
  s.async = true;
  s.onload = () => { /* call the vendor's documented open method here */ };
  document.head.appendChild(s);
}, { once: true });

Maps

For a location map on a contact page, a static map image linking to the full map in a new tab is enough for most visitors. If you need an interactive map, load it when the map section scrolls near the viewport using an IntersectionObserver, or behind a "Show interactive map" button.

Choosing when each script loads

Once you know what each third party costs, give each one the latest loading point that still does its job.

There are also tools that try to move third-party scripts off the main thread entirely, running them in a web worker. Partytown is the best known. They can help with some analytics tags, but not every script works in a worker, and debugging becomes harder. Treat them as an option to test on a staging copy, not a default.

Server-side tagging moves some tracking work from the visitor's browser to a server you control. It can reduce the number of vendor scripts on the page, but it needs setup and hosting, and it does not remove the need for consent. It is covered in more depth in the tag bloat guide.

Edge cases

• The consent banner is itself a third party. A cookie consent platform loads early by design and its banner is sometimes the largest element on a phone screen. Choose one that loads asynchronously, reserves its space, and does not block the page while fetching its configuration.
• Anti-flicker snippets. Client-side A/B testing tools often come with a snippet that hides the whole page until the test script arrives, with a timeout as a safety net. On slow connections visitors stare at a blank page until that timeout. Shorten the timeout, limit the snippet to pages running a test, or move testing to the server.
• Tags that load tags. A tag manager or advertising script may load several further vendors you never added directly. Blocking the parent in DevTools reveals the whole chain; the vendor's settings or your contract may let you switch the extras off.
• Your own code depending on a third party. If your menu or basket waits for a library from a public CDN, a slow CDN breaks your site. Self-host anything your own features need to work.
• Removing tracking changes reports. Delaying or removing a tag can change the figures a marketing team relies on. Agree the change with the tag's owner and note the date so a dip in their data is not misread.
• Legal requirements. Consent rules under UK GDPR and PECR, as amended by the Data (Use and Access) Act 2025, affect which tags may load and when. This guide is not legal advice; check the rules that apply to your site with a qualified adviser.

Stopping third-party cost from creeping back

• A cost for every new tool. Before any new widget, pixel or embed goes live, measure it with the blocking test on a staging copy and record the result alongside the reason for adding it.
• A loading point for every tool. Decide at the time of adding whether it loads async, deferred, after load, on scroll or on interaction, rather than pasting the vendor snippet into the head.
• A third-party budget. Set a limit on the number of third-party origins and the third-party transfer size for each key template, and check it when the Page Speed Analyzer runs.
• A review date. Revisit the list every few months. Trials end, campaigns finish and agencies change, but their tags often stay.