How to solve the problem with the link tag set to preload and as, why does the chrome inspector give errors?

S

Shamhaner2021-07-15 15:45:33

Google Chrome

Shamhaner, 2021-07-15 15:45:33

I have an HTML document with the following content:

<head>

<link rel="preload" href="preload.css" as="style" type="text/css" crossorigin="anonymous">
<link rel="preload" href="preload.js" as="script" type="text/javascript" crossorigin="anonymous">
<link rel="preload" href="fonts/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

</head>

Why is the inspector throwing an error?:

example.com/:1 The resource example.com/preload.js 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.

example.com/:1 The resource example.com/preload.css 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.

, and it does not swear at the connected font, regardless of the absence or presence of 'crossorigin', it requires 'as', although it is clear in the code that the values are specified explicitly, even specifying types is not required in this case.

How to fix these errors?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

acwartz, 2021-07-15
@acwartz

Just a warning that resources are preloaded but not used in the page being loaded.
Try prefetch instead of preload or remove them altogether.