I have a NextJS app and I am adding some images that I need in the <header> of the HTML root file.
The way I am adding those images is via the _document.tsx file, where I add the links to the <Head> as below
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
rel="preload"
as="font"
type="font/otf"
href="/font/GothamRndSSm-Light.otf"
crossOrigin="anonymous"
/>
<link
rel="preload"
as="font"
type="font/otf"
href="/font/GothamRndSSm-Book.otf"
crossOrigin="anonymous"
/>
...
When I run it on Chrome I get:
The resource <URL> was preloaded using link preload but not used within
a few seconds from the window's load event.
Please make sure it has an appropriate `as` value and it is preloaded intentionally.
I am "intentionally" preloading. How can I get read of this message?