About This HTML Issue
The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML <head>, telling the browser to start loading critical resources early in the page lifecycle—before the main rendering machinery kicks in. This can significantly improve performance by ensuring key assets are available sooner and are less likely to block rendering.
However, a preload hint is incomplete without the as attribute. The as attribute tells the browser what kind of resource is being fetched. This matters for several important reasons:
-
Request prioritization: Browsers assign different priorities to different resource types. A stylesheet is typically higher priority than an image. Without
as, the browser cannot apply the correct priority, and the preloaded resource may be fetched with a low default priority, undermining the purpose of preloading. -
Content Security Policy (CSP): CSP rules are applied based on resource type (e.g.,
script-src,style-src). Without knowing the type, the browser cannot enforce the appropriate policy. -
Correct
Acceptheader: Theasvalue determines whichAcceptheader the browser sends with the request. For example, an image request sends a differentAcceptheader than a script request. An incorrect or missing header could lead to unexpected responses from the server. -
Cache matching: When the resource is later requested by a
<script>,<link rel="stylesheet">, or other element, the browser needs to match it against the preloaded resource in its cache. Withoutas, the browser may not recognize the preloaded resource and could fetch it again, resulting in a duplicate request—the opposite of what you intended.
The HTML specification explicitly requires the as attribute when rel="preload" is used, making this a conformance error.
Common as Values
The as attribute accepts a specific set of values. Here are the most commonly used ones:
| Value | Resource Type |
|---|---|
script |
JavaScript files |
style |
CSS stylesheets |
font |
Web fonts |
image |
Images |
fetch |
Resources fetched via fetch() or XMLHttpRequest |
document |
HTML documents (for <iframe>) |
audio |
Audio files |
video |
Video files |
track |
WebVTT subtitle tracks |
worker |
Web workers or shared workers |
Examples
Incorrect: Missing as attribute
This will trigger the validation error because the browser doesn’t know what type of resource is being preloaded:
<link rel="preload" href="/fonts/roboto.woff2"><link rel="preload" href="/js/app.js">
Correct: as attribute included
Adding the appropriate as value tells the browser exactly what kind of resource to expect:
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/js/app.js" as="script"><link rel="preload" href="/css/main.css" as="style"><link rel="preload" href="/images/hero.webp" as="image">
Note on fonts and crossorigin
When preloading fonts, you must also include the crossorigin attribute, even if the font is hosted on the same origin. This is because font fetches are CORS requests by default. Without crossorigin, the preloaded font won’t match the later font request and will be fetched twice:
<!-- Correct: includes both as and crossorigin for fonts -->
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>Full document example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Preload Example</title>
<link rel="preload" href="/css/main.css" as="style">
<link rel="preload" href="/js/app.js" as="script">
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="/js/app.js"></script>
</body>
</html>
Choosing the correct as value is straightforward—just match it to how the resource will ultimately be used on the page. If you’re preloading a stylesheet, use as="style"; if it’s a script, use as="script", and so on.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.