Third-party scripts include scripts hosted on third-party domains as well as those bundled in app packages.

Examples of the former include analytics scripts, advertising tags, and Facebook and Twitter buttons, while examples of the latter include Google Analytics, other performance tracking libraries, and tag management scripts.

These scripts are often referred to as “third-party” to distinguish them from those that are part of the base application code when it’s packaged for production (in which case they’re referred to as “first-party”).

The good news is that managing third-party script performance isn’t very different from managing first-party script performance.

As a rule, third-party scripts cause fewer performance problems than first-party scripts (and apps have fewer of them). That said, you should still pay special attention to the ones affecting your app because they can still cause significant issues on occasion.

You should also take care when deploying third-party scripts across mobile and desktop platforms, as there are platform-specific issues.

At the very least, you should take a careful look at your app’s third-party scripts after you push to production for the first time to ensure they behave as expected.

There are several ways to improve the performance (page load speed impact) of third-party scripts, some of these being:

  • Enabling cache timeouts
  • Disabling features only when needed
  • Creating a custom script that handles multiple third-party scripts

Using these methods, you will manage the performance impact of your app’s third-party scripts.

Enable cache timeouts

Assuming you’re using a CDN to deliver your assets from multiple global locations, ensure that your users get content from the nearest location by setting appropriate Cache-Control headers.

For example, if you’re aware that most US users will get content from a US CDN (like Akamai), while most European users will get content from a European CDN (like Fastly), you can set Cache-Control headers on your server to:

  • Use a short Cache-Control header on assets hosted in the US CDN like Akamai, telling it to serve the content from its cache for at least one month
  • Use a long Cache-Control header — for example, one day — on assets hosted in the European CDN like Fastly, telling it to always use an edge cache.

Disable unnecessary features

Even after setting appropriate Cache-Control headers, some features of your app may still require a long time (for instance, hours) for the underlying third-party script to start working.

In this case, disable such features for fast content delivery by setting appropriate Cache-Control headers.

You can, for example, disable the script to track certain events by setting Cache-Control header with a non-matching value.

This would cause the script to fetch the full data set (for whatever events it tracks) from your app’s server every time a user visits a page that contains them.

This way, those users are given fresh content from your server instead of using cached pages used by other users.

Create a custom script to handle multiple third-party scripts

You might need to make use of third-party libraries for some specific features in your app.

In this case, try to create a custom script that handles both first and third-party scripts.

This way, your app will be able to benefit from a single script that is optimized for fast loading time.