How to Tame Third‑Party JavaScript: Practical Strategies for Faster Web Performance

When a website’s JavaScript performance falls short despite using platform‑native features, avoiding Babel, and opting for smaller frameworks, the root cause often lies beyond the code you control. A large portion of performance problems originates from third‑party scripts and external factors.

When Colliding with Third Parties

Convenience comes at a price; our collective preference for the web has led to the widespread adoption of third‑party JavaScript, which is rarely cheap. Vendors may offer quick fixes, but they rarely disclose the side‑effects, and any changes they make can directly impact your site’s user experience.

Convenience‑Induced Obstacles

Developer convenience can become technical debt when it masks deeper architectural issues. Relying on third‑party solutions often signals a lack of flexibility or resources, and these solutions can become entrenched.

The Core Issue Is Pain

Third‑party vendors are adopted because they promise to alleviate painful problems. Market forces push solutions that may be unsustainable, such as accessibility‑overlay scripts that degrade performance and usability.

Creating a Mitigation Plan

When a third‑party solution is in place, assign clear responsibility and ask key questions:

What problem does the solution address?

Understanding the original pain point helps evaluate whether the solution is justified.

How long will we use the solution?

Determine whether the script is a temporary fix or a permanent component. If it’s temporary, plan its removal once the underlying issue is solved.

Who is the point of contact if issues arise?

Identify a person or team responsible for monitoring and maintaining the third‑party script.

Regularly monitor third‑party script size.

Maintain scripts to prevent them from getting out of control.

Hold periodic meetings to discuss the vendor relationship.

Identify overlapping functionality among multiple third‑party tools.

Research faster alternatives.

Ensuring Responsible Use of Third‑Party Solutions

Load Only What’s Needed

Audit each page to load third‑party scripts only where they provide value, such as a retailer list script that should appear only on product detail pages.

Self‑Host Your Third‑Party Scripts

Whenever possible, host the script yourself instead of relying on external CDNs. This reduces latency and gives you control over updates.

Reduce Cross‑Origin Connection Latency

Use pre‑connect to establish early connections to third‑party servers, which shortens the time needed to fetch resources.

Maybe Don’t Preload Third‑Party Scripts

Preloading can backfire by changing resource discovery order and giving undue priority to non‑essential scripts.

Delay‑Load Non‑Essential Third‑Party Scripts

Use Intersection Observer to lazily load scripts only when they enter the viewport.

let loadedFbScript = false;

const intersectionListener = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if ((entry.isIntersecting || entry.intersectionRatio) && !loadedFbScript) {
      const scriptEl = document.createElement("script");
      scriptEl.defer = true;
      scriptEl.crossOrigin = "anonymous";
      scriptEl.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
      scriptEl.onload = () => {
        loadedFbScript = true;
      };
      document.body.append(scriptEl);
    }
  });
});

intersectionListener.observe(document.querySelector(".fb-like"));

Not every third‑party script can be delayed; some must run early. Use resource prefetching for scripts that can be fetched later with lower priority.

On This Issue

Maintaining vigilance over third‑party JavaScript requires a disciplined, ongoing effort similar to managing other technical debt. Regular cleanup sprints, collaboration across teams, and a clear mitigation plan help keep performance under control.

References

[1] https://alistapart.com/article/responsible-javascript-part-1/

[2] https://alistapart.com/article/responsible-javascript-part-2/#section9

[3] https://alistapart.com/article/responsible-javascript-part-2/#section7

[4] https://httparchive.org/reports/state-of-javascript#bytesJs

[5] https://www.thirdpartyweb.today/

[6] https://alistapart.com/article/responsible-javascript-part-2/

[7] https://alistapart.com/article/the-foundation-of-technical-leadership/#section3

[8] https://alistapart.com/article/responsible-javascript-part-2/#section6

[9] https://csswizardry.com/2019/05/self-host-your-static-assets/

[10] https://developers.google.com/speed/libraries

[11] https://cdnjs.com/

[12] https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec

[13] https://andydavies.me/

[14] https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

[15] https://andydavies.me/blog/2019/02/12/preloading-fonts-and-the-puzzle-of-priorities/

[16] https://alistapart.com/article/the-best-request-is-no-request-revisited/

[17] https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

[18] https://codepen.io/malchata/pen/JjjGOGZ

[19] https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ