Preloading doesn't work when deploying with netlify

[CodySchaaf]

Currently I have a blog deployed using netlify but in the resulting head element I get

<link rel="preload" as="style" href="https://****.cloudfront.net/css/***/fonts/all.css">
...
<link rel="stylesheet" media="all" href="/fonts/all.css" data-react-helmet="true">
<noscript data-react-helmet="true"><link rel="stylesheet" href="/fonts/all.css" /></noscript>

Where only the first link has the cdn attached. So when running lighthouse I still get an error telling me to Preload key requests specifying that fonts/all.css request.

I'm not sure exactly what netlify is doing, but I tried locally adding a assetPrefix (assetPrefix: 'http://localhost:9000/') and running gatsby build --prefix-paths to simulate a cdn path, but that ended up with neither of the font paths getting prefixed (although all other assets not handled by the plugin were getting it).

My plugin options are

{
      /* Include plugin */
      resolve: "gatsby-omni-font-loader",

      /* Plugin options */
      options: {

        /* Font loading mode */
        mode: "async",

        /* Enable font loading listener to handle FOUT */
        enableListener: true,

        /* Font listener interval (in ms). Default is 300ms. Recommended: >=300ms */
        interval: 300,

        /* Font listener timeout value (in ms). Default is 30s (30000ms). Listener will no longer check for loaded fonts after timeout, fonts will still be loaded and displayed, but without handling FOUT. */
        timeout: 30000,

        /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
        custom: [
          {
            /* Exact name of the font as defied in @font-face CSS rule */
            name: ['Karbon', 'Open Sans'],
            /* Path to the font CSS file inside the "static" folder with @font-face definition */
            file: "/fonts/all.css",
          },
        ],
      },
    },

Not sure if file: "/fonts/all.css", needs to change or if something else on my end should be updated.

Any help is appreciated. Thanks!

[codeAdrian]

Hi Cody, thanks for reaching out.

Preload links are being generated by gatsby-ssr.js so they should be available in the HTML and they should match the URL of the font file.

So the preload links should be generated by the plugin like so:

As I cannot reproduce this Netlify use-case on my end without that specific setup, my best guess is that some other plugin or Netlify itself is modifying the relative URLs in the generated HTML files and converting them to something else that is being flagged by Lighthouse. You might want to check your config and see what is happening.

Alternatively, try checking the preload option which was added in the latest version of the plugin to add any other preload URLs.

If you'd like to modify the plugin files on your end, try installing it as a local plugin. I'd be happy to accept any PRs if you manage to fix the issue.

Keep me posted and let me know if I can change something in the plugin to resolve your issue.

[CodySchaaf]

The website is here if interested.

my best guess is that some other plugin or Netlify itself is modifying the relative URLs in the generated HTML files and converting them to something else that is being flagged by Lighthouse.

I actually think it might be the opposite. Netlify changes all the other urls to point to the cdn, but this one fails to be updated. I'm not sure if that is the responsibility of the plugin or if gatsby should be passing the plugin paths with the prefix already appended. So while we preload the cdn version we request the other version so lighthouse complains it isn't optimized correctly, instead we should be requesting the cdn version of the asset.

I found a related issue here, but I'm not sure if we need to do something similar or not gatsbyjs/gatsby#15514

There isn't a whole lot of information that I'm able to find on plugin development and the assetPrefix option (assuming Netlify is actually using that specific option to point files to the cdn) but I will keep looking.

[codeAdrian]

I understand the issue.

The second link (non CDN) is added with React helmet in the plugin, while the first link is added on build time and is later converted to CDN link.

You need to somehow change the link in the Gatsby config of the plugin to match the CDN link. I am not sure if this is happening dynamically or somehow on the build time.