HTML Guide for preload
A <link> element that is using the preload value in the rel attribute is missing the as attribute, used to indicate the type of the resource.
The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance.
The as attribute specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header.
The error message indicates that the <link> element contains an as attribute, but its rel attribute does not hold the correct value. According to the HTML specification, when using the as attribute, the rel attribute must be set to "preload" or "modulepreload".
Explanation
The as attribute is used to specify the type of content being loaded, which helps the browser to handle it appropriately. To preload resources, you need to specify the rel attribute with the value "preload" (for general resources) or "modulepreload" (specifically for JavaScript modules).
Example with preload:
If you are preloading a stylesheet, the rel attribute should be set to "preload":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Correct Usage of Link with as Attribute</title>
<link rel="preload" href="styles.css" as="style">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Example with modulepreload:
If you are preloading a JavaScript module, the rel attribute should be set to "modulepreload":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Correct Usage of Link with Modulepreload</title>
<link rel="modulepreload" href="script.js" as="script">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>