(function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:3011767,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.defer=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

Third-Party Scripts: Async Loading, Self Hosting Guide

Published on April 29, 2025
Last Updated on July 1, 2025

Written by

Morgan Frank - Specialist in Page Speed

Your website likely relies on third-party scripts for various functionalities: analytics tracking Google Analytics), social media sharing buttons Facebook, Twitter), advertising Google AdSense), live chat widgets, and more.

While these scripts can add valuable features, they can also significantly impact your website’s performance if not managed and optimized correctly.

Third-party scripts are essentially code that is hosted on another server (not your own) and loaded into your website. Because they’re external, you have less control over their size, loading behavior, and potential impact on your page speed.

Before getting into the optimization strategies, let’s summarize the key points:

Key Takeaways

  • Third-party scripts can significantly impact performance: They add extra HTTP requests, can be render-blocking or parser-blocking, and often execute JavaScript that can slow down your page.
  • Audit and Identify: Regularly review all the third-party scripts on your website. Understand what each script does and whether it’s truly necessary.
  • Prioritize Essential Scripts: Identify the scripts that are critical for your website’s functionality and user experience.
  • Load Asynchronously or Deferred: Use the async or defer attributes whenever possible to prevent scripts from blocking rendering.
  • Self-Host (When Possible and Beneficial): If a script allows it and it makes sense for performance, consider hosting a copy of the script on your own server or CDN. This gives you more control.
  • Lazy Load (Where Appropriate): Delay the loading of non-essential scripts until they are actually needed (e.g., a live chat widget that only loads when the user clicks a button).
  • Use a Tag Manager: A tag manager (like Google Tag Manager) can help you manage and control the loading of your third-party scripts.
  • Monitor Performance: Regularly monitor the performance impact of your third party scripts using tools like PageSpeed Insights, WebPageTest, and Chrome DevTools.
  • Consider Alternatives: Consider whether that script is really needed.
Third party scripts, async loading and self hosting guide

The Performance Impact of Third-Party Scripts

Here’s how third-party scripts can slow down your website:

  • Additional HTTP Requests: Each script requires a separate HTTP request to an external server. More requests mean more round trips and potentially longer loading times.
  • DNS Lookups: Each external domain (e.g., googletagmanager.com, facebook.net) requires a DNS lookup to resolve the domain name to an IP address. These lookups add to the overall loading time.
  • Render-Blocking or Parser-Blocking: If scripts are loaded synchronously (without async or defer), they can block rendering or parsing, delaying the display of your page content.
  • JavaScript Execution: Many third-party scripts execute JavaScript, which can consume CPU resources and block the main thread, making your page less responsive.
  • Large File Sizes: Some third-party scripts can be quite large, adding significantly to your page’s overall weight.
  • Unpredictable Behavior: You have limited control over how third-party scripts are coded and optimized. They might change without your knowledge, potentially impacting your site’s performance.
  • Security: Third-party scripts can also be a security risk.
waterfall view on pagespeed optimization

Strategies for Managing and Optimizing Third-Party Scripts

Here’s a step-by-step approach to managing and optimizing your third-party scripts:

1. Audit and Identify

  • Make a list: Create a comprehensive list of all the third-party scripts loaded on your website.
  • Use browser DevTools: The Network tab in Chrome DevTools (or similar tools in other browsers) shows you all the resources loaded by your page, including third party scripts. You can filter by domain to identify external resources.
  • Use performance testing tools: Tools like PageSpeed Insights and WebPageTest will often flag third-party scripts that are impacting performance.
  • Understand their purpose: For each script, determine:
  1. What functionality does it provide?
  2. Is it essential for your website?
  3. Could it be replaced with a more efficient alternative?

2. Prioritize Essential Scripts

  • Categorize your scripts: Divide your scripts into categories based on their importance:
  1. Essential: Scripts that are absolutely necessary for your website’s core functionality or user experience (e.g., analytics, critical UI components).
  2. Non-Essential: Scripts that provide additional features but are not strictly necessary (e.g., social media sharing buttons, live chat widgets).
  3. Optional/Marketing: Scripts that are primarily for marketing or tracking purposes (e.g., advertising scripts).
  • Focus on optimizing essential scripts first.

3. Load Asynchronously or Deferred

  • async and defer: As we discussed in the JavaScript optimization section, uses the async or defer attributes on your <script> tags whenever possible.
  1. async: Download in parallel, execute as soon as downloaded (may interrupt parsing). Use for independent scripts.
  2. defer: Download in parallel, execute after HTML parsing is complete, in order. Use for most scripts.
  • Consult the script’s documentation: The documentation for the third-party script should provide guidance on how to load it asynchronously or deferred. Some scripts require synchronous loading, but this should be avoided whenever possible.
<--Example: Loading Google Analytics asynchronously ⟶
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX"></script>

<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 
 gtag('config', 'UAXXXXXXXXX');
</script>

4. Self-Host (When Possible and Beneficial)

  • What it means: Download a copy of the third-party script and host it on your own server or CDN, instead of loading it from the third-party’s server.
  • Benefits:
  1. Reduced DNS lookups: You eliminate the need to resolve the third-party domain.
  2. Better caching control: You can set your own caching headers for the script.
  3. Fewer external requests: This can improve performance, especially if the third-party server is slow or unreliable.
  • Drawbacks:
  1. You’re responsible for updates: You need to manually update the script when new versions are released. This is crucial for security updates.
  2. May violate terms of service: Some third-party scripts prohibit self-hosting. Always check the terms of service.
  3. May not always be faster: If the third-party provider uses a highly optimized CDN, self-hosting might actually be slower. Test to be sure.
  • When to Self-Host Self-host small static files.

5. Lazy Load (Where Appropriate)

  • What it means: Delay the loading of non-essential scripts until they are actually needed.
  • Benefits:
  1. Improves initial page load time.
  2. Reduces the number of resources loaded upfront.
  • Examples:
  1. Live chat widgets: Only load the chat script when the user clicks a “Chat” button or after a certain amount of time on the page.
  2. Social media sharing buttons: Only load the sharing scripts when the user scrolls down to the sharing buttons or clicks a “Share” button.
  3. Comments section: Only load if the user scrolls to that section.
  • Implementation:
  1. Intersection Observer API: A modern browser API that allows you to detect when an element enters the viewport. This is a great way to trigger lazy loading.
  2. JavaScript libraries: Several JavaScript libraries (like lazysizes) can help you implement lazy loading.
  • When to Lazy Load Lazy-load large files, iframes, and videos.

6. Use a Tag Manager

  • What it is: A tag manager (like Google Tag Manager, Tealium, or Adobe Launch) is a tool that allows you to manage and deploy all your website’s tags (including third-party scripts) from a single interface.
  • Benefits:
  1. Centralized Management: You can add, remove, and update scripts without having to modify your website’s code directly.
  2. Asynchronous Loading: Tag managers typically load scripts asynchronously by default.
  3. Conditional Loading: You can set up rules to load scripts only on specific pages or under certain conditions.
  4. Version Control: Tag managers often provide version control, allowing you to roll back to previous versions if needed.
  5. Improved Workflow: Tag managers can streamline the process of managing and deploying third-party scripts, especially for marketing and analytics teams.

7. Monitor Performance Regularly

  • Use performance testing tools: Regularly test your website’s performance using tools like:
  1. PageSpeed Insights
  2. WebPageTest
  3. Chrome DevTools Performance and Network panels)
  4. Lighthouse
  • Focus on third-party script impact: Identify which scripts are contributing the most to page load time and resource usage.
  • Test different configurations: Experiment with different loading strategies (async, defer, lazy loading) and measure the impact on your performance metrics

8. Consider Alternatives

  • Native Browser Features: Check for native options before using third-party.
  • Different providers: Look for a better provider.
  • Remove: If you can remove the third-party script, that is the best option

Conclusion

Third-party scripts are a necessary part of many websites, but they can also be a major source of performance problems. By taking a proactive approach to managing and optimizing these scripts – auditing, prioritizing, loading asynchronously, self hosting when appropriate, lazy loading, using a tag manager, and monitoring performance – you can minimize their negative impact and ensure a fast and smooth user experience. Remember that every external resource adds overhead, so always evaluate whether a third-party script is truly necessary and worth the potential performance cost.

Shakeeb Sadikeen

The expert that experts learn from

About Author

Determined to change that, he built RapidLoad — a smart, AI-driven tool that empowers site owners to dramatically improve speed scores, enhance user experience, and meet Google’s Core Web Vitals without needing to touch a single line of code.
Connect with Shakeeb Sadikeen

Table of content