Seoxpert.io
Get started
lowPerformance

`<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

Add the correct as= attribute to each <link rel="preload"> tag, matching the resource type (e.g., as="script", as="font"). For fonts, also include the crossorigin attribute. Refer to the resource's type to choose the appropriate as= value.

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 →