`<link rel="preload">` With Missing or Invalid `as=` Attribute
Preload tags without a valid as= attribute are ignored by browsers, negating intended performance gains.
By Seoxpert Editorial · Published
Why it matters
Preloading resources helps browsers fetch critical assets earlier, improving load speed and Core Web Vitals. Without a valid as= attribute, browsers ignore the preload, so the resource is loaded later, missing the performance benefit.
Impact
Critical resources may load slower, negatively affecting user experience and performance metrics.
How it's detected
Automated crawlers scan for <link rel="preload"> tags missing a valid as= attribute in the HTML source.
Common causes
- Omitting the as= attribute when adding preload tags
- Using an invalid value for the as= attribute
- Copy-pasting preload code without updating as= for the resource type
- Misunderstanding the required attributes for preload tags
How to fix it
Code examples
Problem: Missing as= attribute
<link rel="preload" href="/fonts/Inter.woff2">Fix: Add as= and crossorigin for font
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>FAQ
What happens if I omit the as= attribute on a preload tag?
Browsers ignore the preload, so the resource is not fetched early and the performance benefit is lost.
How do I know which as= value to use?
Match the as= value to the resource type: use 'script' for JS, 'style' for CSS, 'font' for fonts, etc.
Is the as= attribute required for all preload tags?
Yes, the as= attribute is required for browsers to recognize and act on the preload.
Do I need crossorigin for fonts even if they're same-origin?
Yes, for fonts, always include crossorigin to ensure proper loading and avoid console warnings.
Found this issue on your site?
Run a scan to see if `<link rel="preload">` With Missing or Invalid `as=` Attribute affects your pages.
Scan my website →