Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Quickly add a <link rel="preconnect" crossorigin> tag for every specified domain.

Build Status Build Status Renovate enabled Commitizen friendly semantic-release Open Source
Love npm


npm install --save gatsby-plugin-preconnect

What this plugin does

It simply adds a <link rel="preconnect" href="https://example.com" crossorigin> to the page (see the Resource Prioritization - Preconnect guide).

How to use

// In your gatsby-config.js
plugins: [
    resolve: 'gatsby-plugin-preconnect',
    options: {
      domains: ['https://foo.com', 'https://bar.com'],

crossOrigin is set to true by default but it can be customized, below all the available options

plugins: [
    resolve: 'gatsby-plugin-preconnect',
    options: {
      domains: [
        { domain: 'https://enablecors.com', crossOrigin: true },
        { domain: 'https://disablecors.com', crossOrigin: false },
        { domain: 'https://corswithanonymous.com', crossOrigin: 'anonymous' },
        { domain: 'https://corswithcreds.com', crossOrigin: 'use-credentials' },

All the available values for crossOrigin are listed below, every other value makes the plugin throw an error

Value Equivalent value
undefined “anonymous”
true “anonymous”
"anonymous" “anonymous”
"use-credentials" “use-credentials”
false (attribute not added)


PR or issues are welcome 👋


  • if you want to work on the plugin sources, remember that you need to npm run build on the root then, in every test project, you need to run npm run plugin:link to locally use it


Thanks goes to these wonderful people (emoji key):

Stefano Magni

💻 📖

Dugagjin Lashi

💻 👀

Sean King


Andrew Schneider

💻 📖 ⚠️

Andreas Donig


This project follows the all-contributors specification. Contributions of any kind welcome!

© 2023 Gatsby, Inc.