performance.preconnect#

• Type:

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

• Default: undefined

Injects <link 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"> to save time on the first step — the DNS lookup.

Example#

export default {
  performance: {
    preconnect: ['https://example.com/'],
  },
};

The generated HTML tag is:

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

Options#

href#

• Type: string
• Default: undefined

Specify the URL to preconnect to.

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.

export default {
  performance: {
    preconnect: [
      {
        href: 'https://example.com/',
        crossorigin: true,
      },
    ],
  },
};

The generated HTML tag is:

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