gatsby: A preload was found, but not used.

Hello Mates,

Lately our score went from 95 to 40-50 on Pagespeed, and it’s because of the warnings shown below;

A preload <link> was found for "https://wk.ntstage.com/static/d/140/path---index-6a9-0SUcWyAf8ecbYDsMhQkEfPzV8.json" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

A preload <link> was found for "https://wk.ntstage.com/component---src-pages-index-js-fb54d7fd4f09cb9a2b50.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

A preload <link> was found for "https://wk.ntstage.com/app-152e5ea376a8423b9ab1.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

A preload <link> was found for "https://wk.ntstage.com/styles-64bb372d61879437b6bc.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

A preload <link> was found for "https://wk.ntstage.com/1-4ab252d41bd342df663c.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

A preload <link> was found for "https://wk.ntstage.com/3-980b56f7aa10c90ec90a.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

A preload <link> was found for "https://wk.ntstage.com/2-b86faaa88c110034b733.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

A preload <link> was found for "https://wk.ntstage.com/webpack-runtime-df72743627be9e34f51f.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

I"m not sure if it’s a plugin conflict, or it has something to do with the gatsby-plugin-preload-link-crossorigin… Here’s my gatsby-config file:

// getting our environment variables
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `Wild Kiwi`,
    description: `We bring your dreams into reality`,
    author: `Pouya Ataei`,
    copyright: `Navigate Group Ltd`,
  },
  plugins: [
    "gatsby-plugin-preload-link-crossorigin",
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-playground`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-plugin-modal-routing`,
      options: {
        // A selector to set react-modal's app root to, default is `#___gatsby`
        // See http://reactcommunity.org/react-modal/accessibility/#app-element
        appElement: "#___gatsby",

        // Object of props that will be passed to the react-modal container
        // See http://reactcommunity.org/react-modal/#usage
        modalProps: {},
      },
    },
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        downloadLocal: true,
      },
    },
    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        // Setting a color is optional.
        color: `#1abc9c`,
        // Disable the loading spinner.
        showSpinner: true,
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: "gatsby-plugin-web-font-loader",
      options: {
        custom: {
          families: [
            "Nunito-Regular",
            "Nunito-Black",
            "Nunito-SemiBold",
            "Nunito-Extrabold",
            "Nexa-Rust-2",
          ],
          urls: ["fonts.css"],
        },
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
      resolve: `gatsby-transformer-remark`,
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Wild Kiwi`,
        short_name: `WK`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#1abc9c`,
        display: `standalone`,
        icon: `src/images/wild_kiwi_favicon.svg`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        /*
         * The base URL of the Wordpress site without the trailingslash and the protocol. This is required.
         * Example : 'gatsbyjsexamplewordpress.wordpress.com' or 'www.example-site.com'
         */
        baseUrl: `wildkiwi.com`,
        // The protocol. This can be http or https.
        protocol: `https`,
        // Indicates whether the site is hosted on wordpress.com.
        // If false, then the assumption is made that the site is self hosted.
        // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
        // If your site is hosted on wordpress.org, then set this to false.
        hostingWPCOM: false,
        // If useACF is true, then the source plugin will try to import the Wordpress ACF Plugin contents.
        // This feature is untested for sites hosted on wordpress.com.
        // Defaults to true.
        useACF: true,
        // Set verboseOutput to true to display a verbose output on `npm run develop` or `npm run build`
        // It can help you debug specific API Endpoints problems.
        verboseOutput: true,
        // Set how many pages are retrieved per API request.
        perPage: 5,
        // Search and Replace Urls across WordPress content.
        searchAndReplaceContentUrls: {
          sourceUrl: "https://wildkiwi.com/",
          replacementUrl: "https://wildkiwi.com/",
        },
        // Set how many simultaneous requests are sent at once.
        concurrentRequests: 4,
        // Set WP REST API routes whitelists
        // and blacklists using glob patterns.
        // Defaults to whitelist the routes shown
        // in the example below.
        // See: https://github.com/isaacs/minimatch
        // Example:  `["/*/*/comments", "/yoast/**"]`
        // ` will either include or exclude routes ending in `comments` and
        // all routes that begin with `yoast` from fetch.
        // Whitelisted routes using glob patterns
        includedRoutes: [
          `**/categories`,
          `**/posts`,
          `**/taxonomies`,
          `**/users`,
          `**/media`,
          `/yoast/**`,
        ],
        // use a custom normalizer which is applied after the built-in ones.
        normalizer: function({ entities }) {
          return entities
        },
      },
    },
    {
      resolve: `gatsby-plugin-netlify-headers`,
      options: {
        headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
        allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria
        mergeSecurityHeaders: true, // boolean to turn off the default security headers
        mergeLinkHeaders: false, // boolean to turn off the default gatsby js headers (disabled by default, until gzip is fixed for server push)
        mergeCachingHeaders: true, // boolean to turn off the default caching headers
        transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
      },
    },
  ],
}

The project is live at this URL : https://wk.ntstage.com/ And here is the github repo : https://github.com/Polyhistor/WildKiwi

What are you thoughts guys? please illuminate me.

Cheers.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 18 (4 by maintainers)

Commits related to this issue

Most upvoted comments

i’ll be checking it out today, sorry for the delay.

Same here, any workaround? These Lighthouse complaints are rather annoying.

It has something to do with how the gatsby-plugin-offline preloads these assets.

Same problem here.

Did anyone find a solution?

I’m running into the same issue. I’m just curious if this error is actually impacting lighthouse performance or whether it’s harmless because we’ve noticed a significant drop across the board for one of our Gatsby sites performance-wise.

well, issue has not been resolved. we are hoping to see some improvements on version 3. But, thanks for the consideration anyways…

@wardpeet Hey brother, any news on this matter? I could not find anything in the documentation…