> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# performance.preconnect

- **Type:**

```ts
type Preconnect =
  | Array<
      | string
      | {
          href: string;
          crossorigin?: boolean;
        }
    >
  | undefined;
```

- **Default:** `undefined`

Injects [`<link rel="preconnect">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect) tags into the HTML file.

## When to use

The `preconnect` keyword for the rel attribute of the `<link>` element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.

Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).

`<link rel="preconnect">` will provide a benefit to any future cross-origin HTTP request, navigation or subresource. It has no benefit on same-origin requests because the connection is already open.

If a page needs to make connections to many third-party domains, preconnecting them all can be counterproductive. The `<link rel="preconnect">` hint is best used for only the most critical connections. For the others, just use [`<link rel="dns-prefetch">`](/config/performance/dns-prefetch.md) to save time on the first step — the DNS lookup.

## Example

```ts title="rsbuild.config.ts"
export default {
  performance: {
    preconnect: ['https://example.com/'],
  },
};
```

The generated HTML tag is:

```html
<link ref="preconnect" href="https://example.com" />
```

## Options

### href

- **Type:** `string`
- **Default:** `undefined`

Specify the URL to preconnect to.

```ts title="rsbuild.config.ts"
export default {
  performance: {
    // Equivalent to `preconnect: ['https://example.com/'],`
    preconnect: [
      {
        href: 'https://example.com/',
      },
    ],
  },
};
```

### crossorigin

- **Type:** `boolean`
- **Default:** `false`

Specify whether to add the `crossorigin` attribute.

```ts title="rsbuild.config.ts"
export default {
  performance: {
    preconnect: [
      {
        href: 'https://example.com/',
        crossorigin: true,
      },
    ],
  },
};
```

The generated HTML tag is:

```html
<link rel="preconnect" href="https://example.com" crossorigin />
```

:::tip
Refer to this [link](https://webmasters.stackexchange.com/questions/89466/when-should-i-use-the-crossorigin-attribute-on-a-preconnect-link) to understand the use cases of the `crossorigin` attribute.
:::