Lighthouse: LH warns of "Warnings: A preload <link> was found for [...]" incorrectly, when using crossorigin="anonymous"

[Vadorequest]

Provide the steps to reproduce

1. Run LH on https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-izza69ujx.now.sh/fr

LH report: https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnrn-v2-mst-aptd-gcms-lcz-sty-c1-izza69ujx.now.sh%2Ffr

Using the following code at :

      {/* Perf optimisation (preload normal and bold fonts because they're the most used) - See https://web.dev/uses-rel-preload*/}
      <link rel="preload" as="style" href={'/static/fonts/NeuzeitGrotesk/font.css'} crossOrigin="anonymous" />
      <link rel="preload" as="font" href={'/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-bold.woff'} type="font/woff" crossOrigin="anonymous" />
      <link rel="preload" as="font" href={'/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-bold.woff2'} type="font/woff2" crossOrigin="anonymous" />
      <link rel="preload" as="font" href={'/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-black.woff'} type="font/woff" crossOrigin="anonymous" />
      <link rel="preload" as="font" href={'/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-black.woff2'} type="font/woff2" crossOrigin="anonymous" />

What is the current behavior?

Warnings: A preload was found for "https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-izza69ujx.now.sh/static/fonts/NeuzeitGrotesk/font.css" but was not used by the browser. Check that you are using the crossorigin attribute properly.

What is the expected behavior?

It shouldn't throw such warning, the font is using crossorigin="anonymous", the link is valid.

Everything looks fine to me.

I didn't have that issue before using the crossorigin attribute. See previous report of previous deployment before this commit.

[patrickhulce]

Thanks for filing @Vadorequest!

Lighthouse is doing the right thing for warning about font.css.

You should not be using crossorigin="anonymous" there because the stylesheet is on the same origin. Chrome itself warns about this that preload is unused.

It the previous report should not have told you to preload the font itself if you were already preloading it though. That would be a bug, but I cannot reproduce it on the previous deployment URL you provided :/

[Vadorequest]

It the previous report should not have told you to preload the font itself if you were already preloading it though. That would be a bug, but I cannot reproduce it on the previous deployment URL you provided :/

Using this report I get:

Which led me to add

<link rel="preload" as="font" href={'/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-bold.woff2'} type="font/woff2" crossOrigin="anonymous" />

But I'm confused about crossOrigin="anonymous" being necessary for the fonts, but not for the style?

Here is the full PR, with all commits. It should be easier to understand.

I'll remove all crossOrigin="anonymous" and see what happens, my understanding is that it should stop warning about preload. (but it's what I had did in the first place and I was still getting warnings)

[Vadorequest]

Here is a new report for this commit with this url

So, the error about the <link rel="preload" as="style" href={'/static/fonts/NeuzeitGrotesk/font.css'} /> has vanished, which is good. But now it complains about the fonts.

I'm not sure about what I'm doing here, with preloading fonts. Is it necessary?
I'll try again without font preloading.

[Vadorequest]

Here is a new report for this commit with this url

I believe this may be related with https://github.com/typekit/webfontloader/issues/403

I'm using WebFontLoader to load the font and apply a css class in body when the font has been loaded.

This avoids FOUT effect on browsers that don't support the font-display: swap;. (I'm using font-display: swap; too)

[Vadorequest]

@patrickhulce Do you have any advice/knowledge/feedback regarding this issue?

I'm kinda lost between many various recommendations, would you know if the use of WebFontLoader is actually necessary/useful nowadays?

[patrickhulce]

Yes, thanks for following up.

You were so close :)

You don't want crossorigin on your stylesheets.

You do want crossorigin on your fonts.

For reasoning see the MDN docs on preload

I would expect the below to preload everything correctly and pass Lighthouse.

<link rel="preload" as="style" href="/static/fonts/NeuzeitGrotesk/font.css">    
<link rel="preload" as="font" href="/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-bold.woff" type="font/woff" crossorigin="anonymous" />    
<link rel="preload" as="font" href="/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-bold.woff2" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" as="font" href="/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-black.woff" type="font/woff" crossorigin="anonymous" />
<link rel="preload" as="font" href="/static/fonts/NeuzeitGrotesk/NeuzeitGrotesk-black.woff2" type="font/woff2" crossorigin="anonymous" />

[Vadorequest]

Awesome, thank you Patrick!

I just tested locally and online and I don't get any warnings anymore :)

https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnrn-v2-mst-aptd-at-lcz-sty-c1-nb8luf83o.now.sh%2Ffr

It wasn't easy at all to get it right :/
I believe I got confused between as=font/style, and crossOrigin not being applied to the right line, the cryptic error messages didn't help troubleshoot this easily.

[prdt3e]

@patrickhulce
Can you still change your example, remove the correct spelling of crossorigin and parentheses?
I think it would be great for copiers :)

[halburgiss]

Just seeing this and am seeing the same original issue. I have 3 variants, all 3 result in the lighthouse warning ... "A preload was found...", and the lighthouse score goes up 10 points. Version 85.0.4183.83 (Official Build) (64-bit)

<link rel="preload" href="/library/fonts/maven/mavenpro-bold.woff2" as="font" type="font/woff2">
<link rel="preload" href="/library/fonts/maven/mavenpro-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/library/fonts/maven/mavenpro-black.woff2" as="font" type="font/woff2" crossorigin="anonymous">

None work. Is there another option?

[patrickhulce]

@halburgiss do you have an repro URL?

[halburgiss]

For the code I am trying to improve on??? No ... sorry.

[patrickhulce]

Ah, can't really help then sorry.

We have not seen a case where <link rel="preload" href="/library/fonts/maven/mavenpro-black.woff2" as="font" type="font/woff2" crossorigin="anonymous"> does not work (assuming the font is actually used).

[halburgiss]

There is actually 4 fonts, and they get loaded twice (with the warning shown in lighthouse):

mavenpro-bold.woff2 200 http/1.1 methodsmachine.loc font (index) 24.9 kB 28 ms
mavenpro-regular.woff2 200 http/1.1 methodsmachine.loc font (index) 24.9 kB 9 ms
mavenpro-black.woff2 200 http/1.1 methodsmachine.loc font (index) 24.7 kB 13 ms
mavenpro-medium.woff2 200 http/1.1 methodsmachine.loc font (index) 24.8 kB 17 ms
mavenpro-bold.woff2 200 http/1.1 methodsmachine.loc font style-front-page-1599660170746.min.css 24.9 kB 35 ms
mavenpro-regular.woff2 200 http/1.1 methodsmachine.loc font style-base-1599660170746.min.css 24.9 kB 33 ms
mavenpro-black.woff2 200 http/1.1 methodsmachine.loc font style-base-1599660170746.min.css 24.7 kB 32 ms
mavenpro-medium.woff2 200 http/1.1 methodsmachine.loc font style-base-1599660170746.min.css 24.8 kB 7 ms

And score is seriously degraded.