Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Provide the steps to reproduce

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 <link> 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.

Issue Analytics

State:
Created 3 years ago
Comments:13

Top GitHub Comments

8reactions

patrickhulcecommented, Jun 8, 2020

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" />

0reactions

halburgisscommented, Sep 9, 2020

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.

Top Results From Across the Web

Preload Image in html gives warning message - Stack Overflow

Consider taking a look at crossorigin attribute. I expect it to work but I am seeing two downloads for the same resource(image). see...

Lighthouse and Pagespeed reporting "not-used" pre-loaded ...

I am trying to pre-load a web font as instructed, but both Lighthouse and Pagespeed tools give me the following warning: Warnings: A...

Preloading font doesn't work - GeneratePress

I thought that preloading fonts makes font-display: swap; unnecessary. ... the warning and have 0 font related CLS is to use a system...

Fix: Consider taking a look at crossorigin attribute - Beamtic

A preload for x is found, but is not used because the request credentials mode does not match. Consider taking a look at...

Node.js v19.3.0 Documentation

The following example does not throw an AssertionError because the primitives are compared using the == operator. import assert from 'node:assert'; // WARNING: ......