third-party

What this skill does

# Optimize loading third-parties

## Table of Contents

- [When to Use](#when-to-use)
- [Instructions](#instructions)
- [Details](#details)
- [Source](#source)

## When to Use

- Use this when third-party scripts (analytics, ads, chat widgets, social embeds) are slowing down your site
- This is helpful for optimizing Core Web Vitals while retaining essential third-party functionality

## Instructions

- Use `async` or `defer` attributes for non-critical third-party scripts
- Establish early connections with `preconnect` and `dns-prefetch` resource hints
- Lazy-load below-the-fold embeds (YouTube, maps, social media) using IntersectionObserver or facades
- Consider self-hosting critical third-party scripts for better caching control
- Use the Next.js Script component with appropriate `strategy` values for framework-level optimization

## Details

It would be hard to find a modern site that operates in silos. Most sites coexist and depend on several other sources on the web for data, functions, content, and much more. Any resource located on another domain and consumed by your site is a third-party (3P) resource for your site. Typical third-party resources that are included on sites include:

- Embeds for maps, videos, social media, and chat services
- Advertisements
- Analytics components and tag managers
- A/B testing and personalization scripts
- Utility libraries that provide ready-to-use helper functions such as those used for data visualization or animations.
- [reCAPTCHA](https://www.google.com/recaptcha/about/) or CAPTCHA for bot detection.

You can use third-parties to integrate other features that add value to your content or to reduce some drudgery involved in building a site from scratch. As per the Web Almanac report for 2021, more than [94% of the pages](https://almanac.httparchive.org/en/2021/third-parties#prevalence) on the web use third-parties - [images and JavaScript](https://almanac.httparchive.org/en/2020/third-parties#content-types) forming the most significant contributors to third-party content.

While third-party resources can enrich your site with valuable features, they can also slow it down if:

- They cause additional round trips to the third-party domain for every required resource.
- They make heavy usage of JavaScript (impacting download and execution time) or are bulky in size because of unoptimized images/videos.
- Individual site owners cannot influence the implementation, and their behavior can be unpredictable.
- They can block the rendering of other critical resources on the page and affect [Core Web Vitals](https://web.dev/vitals/) (CWV).

Despite these issues, third-parties may be essential to your business. If you cannot do away with 3P's, the next best thing is to optimize them to reduce performance impact.

### Assessing the performance impact of 3P resources

You can use a combination of techniques to find how third-party code is affecting your site.

- The following Lighthouse audits help identify slow third-party scripts that affect CWV:
  - [Reduce the impact of third-party code](https://web.dev/third-party-summary/) for scripts that block the main thread.
  - [Reduce JavaScript execution time](https://web.dev/bootup-time/) for scripts that take long to execute
  - [Avoid enormous network payloads](https://web.dev/total-byte-weight/) for large scripts

- Use the WebPageTest (WPT) waterfall chart to identify [third-party blocking scripts](https://nooshu.com/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/#third-party-blocking-javascript) or WPT side-by-side comparison to [measure the impact of 3rd party tags](https://andydavies.me/blog/2018/02/19/using-webpagetest-to-measure-the-impact-of-3rd-party-tags/).

- Sites like [Bundlephobia](https://bundlephobia.com/) help to assess the cost of adding available npm packages to your bundles. You can also find size and dependencies included in any package using [npm package search](https://www.npmjs.com/package/).

### Optimization strategies

Since third-party code is not under your control, you cannot optimize the libraries directly. This leaves you with two options.

1. **Replace or remove**: If the value provided by the third-party script is not proportional to its performance cost, consider removing it. You can also evaluate other alternatives that are lightweight but provide similar functionality.

2. **Optimize the loading sequence**: The loading process involves loading several first-party and third-party resources in the browser. To design an optimal loading strategy, you would need to consider the browser assigned priority for different resources, their position on the page, and the value of each resource for the web page.

#### Load 3P scripts efficiently

Following are the time-tested best practices that can reduce the performance impact of third-party resources when used correctly.

#### Use async or defer to prevent scripts from blocking other content.

**Applicable to:** Non-critical scripts (tag managers, analytics)

JavaScript download and execution is synchronous by default and can block the HTML parser and DOM construction on the main thread. Use of [async](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async) or [defer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer) attributes in the `<script>` element tells the browser to download scripts asynchronously. You can use these to download any script that is not necessary for the critical rendering path (e.g., the main UI component).

- **`defer`**: the script is fetched in parallel as the parser executes, and script execution is delayed till the parsing is complete. Defer should be the default choice for delaying execution until after DOM construction.
- **`async`**: the script is fetched in parallel while parsing but executed as soon as it is available when it blocks the parser. For module scripts with dependencies, the script and all its dependencies are executed in the defer queue. Use `async` for scripts that need to run earlier in the loading process. For example, you may want to execute specific analytics scripts early without missing any early page-load data.

```html
<script src="https://example.com/deferthis.js" defer></script>
<script src="https://example.com/asyncthis.js" async></script>
```

One caveat worth mentioning here is that async and defer lower the browser assigned priority of the resources causing it to load significantly later. A new feature for [priority hints](https://web.dev/priority-hints/) can help to work around this problem.

#### Establish early connections to required origins using resource hints

**Applicable to:** Critical scripts, fonts, CSS, images from third-party CDNs

Connecting to third-party origins can be slow due to the DNS lookups, redirects, and multiple round trips that may be required for each third-party server. Resource hints dns-prefetch and preconnect help cut down the time needed for this setup by initiating the connections early in the life cycle.

Including a [dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch) resource hint corresponding to a domain will perform the DNS lookup early, thus reducing the latency associated with dns lookups. You can pair this with [preconnect](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preconnect) for the most critical resources. The preconnect initiates a connection with the third-party domain by performing TCP round trips and handling TLS negotiations in addition to the DNS lookup.

```html
<head>
  <link rel="preconnect" href="http://example.com" />
  <link rel="dns-prefetch" href="http://example.com" />
</head>
```

Benefits of using resource hints are evident in this case study where Andy Davies discusses how using [preconnect helped reduce the loading time](https://andydavies.me/blog/2019/03/22/improving-perceived-performance-with-a-link-rel-equals-preconnect-http-header/) for the main product image by i