HTML Guides for fetchpriority

The fetchpriority attribute is invalid on a <script> element whose type marks it as a data block, because the browser never downloads a data block and has no request to prioritize.

When the type attribute is anything other than a JavaScript MIME type, module, importmap, or speculationrules, the browser treats the element as a data block: inline content that other scripts on the page can read, but that never runs. JSON-LD structured data in type="application/ld+json" is the most common example.

fetchpriority takes high, low or auto and tells the browser how urgently to download an external script compared with other resources on the page. A data block can't have a src and the browser never requests it, so the hint has nothing to apply to.

The markup is often valid when the server sends it. Some script optimizers rewrite the type so the browser skips the script on load, then run it later with their own loader. Cloudflare Rocket Loader, for example, turns type="module" into a prefixed value such as type="a1b2c3d4-module". The validator checks the rewritten markup, finds an unknown type, and reports the fetchpriority and src attributes as well as the type value itself.

Invalid example

<script type="a1b2c3d4-module" src="/js/gallery.js" fetchpriority="low"></script>

Valid example

<script data-cfasync="false" type="module" src="/js/gallery.js" fetchpriority="low"></script>

data-cfasync="false" tells Rocket Loader to leave the script alone, so the browser receives the original type="module". Cloudflare requires it before the src attribute. Turning Rocket Loader off for the site also works.

If the element really is a data block, such as JSON-LD, remove fetchpriority from it. If it was meant to run and the type holds a typo, fix the type instead: use module, a JavaScript MIME type such as text/javascript, or leave type out.

The fetchpriority attribute is a hint to the browser about the relative priority of fetching a particular resource compared to other resources of the same type. It is defined in the WHATWG HTML living standard as an enumerated attribute with exactly three valid values:

• high — The resource should be fetched at a higher priority relative to other resources of the same type.
• low — The resource should be fetched at a lower priority relative to other resources of the same type.
• auto — The browser determines the appropriate priority (this is the default behavior).

Values like "highest", "critical", "urgent", or any other string outside these three are not recognized. When the W3C validator encounters an invalid value, it reports: Bad value "highest" for attribute "fetchpriority" on element "link".

Why This Matters

Standards compliance: Browsers treat unrecognized fetchpriority values as equivalent to "auto", meaning your intended priority hint is silently ignored. If you wrote fetchpriority="highest" expecting it to be even more urgent than "high", that extra emphasis has no effect — the browser simply falls back to its default prioritization.

Developer intent: An invalid value masks your real intention. Another developer reading the code might assume "highest" does something special, when in reality the browser discards it. Using the correct value makes the code's purpose clear and ensures the hint is actually applied.

Accessibility and performance: The fetchpriority attribute is commonly used on <link rel="preload"> elements for critical resources like fonts, stylesheets, or hero images. If your priority hint is silently ignored due to an invalid value, key resources may not load as quickly as intended, potentially degrading the user experience.

How to Fix It

Replace the invalid value with one of the three accepted values. In most cases, if you used "highest", you likely meant "high":

1. Find every <link> element where fetchpriority has an invalid value.
2. Change the value to "high", "low", or "auto".
3. If you're unsure which priority to use, omit the attribute entirely — the browser will use "auto" by default.

Note that fetchpriority also works on <img>, <script>, and <iframe> elements, and the same three-value restriction applies to all of them.

Examples

Incorrect: Invalid fetchpriority value

<link rel="preload" href="hero.webp" as="image" fetchpriority="highest">

The value "highest" is not valid. The browser ignores the hint and falls back to default prioritization.

Correct: Using "high" for elevated priority

<link rel="preload" href="hero.webp" as="image" fetchpriority="high">

Correct: Using "low" for deferred resources

<link rel="preload" href="analytics.js" as="script" fetchpriority="low">

Correct: Omitting the attribute for default behavior

<link rel="preload" href="style.css" as="style">

When omitted, the browser uses its default priority logic, which is equivalent to fetchpriority="auto".

Full document example

<!DOCTYPE html>

<html lang="en">

<head>

<title>Fetch Priority Example</title>

<link rel="preload" href="hero.webp" as="image" fetchpriority="high">

<link rel="preload" href="fonts/body.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high">

<link rel="stylesheet" href="style.css">

</head>

<body>

<img src="hero.webp" alt="Hero banner" fetchpriority="high">

<p>Page content goes here.</p>

</body>

</html>

This example preloads a hero image and a font with fetchpriority="high", and also applies the hint to the <img> element itself — all using valid attribute values.

The fetchpriority attribute of an <img> is set to something other than high, low or auto.

fetchpriority is a hint about how soon the browser should fetch the image compared with the other images on the page. high suits the main image at the top of the page, low suits images that start out of view, such as the later slides of a carousel, and auto, the default, leaves the choice to the browser. The value has to be one of those three keywords with nothing around it. A made-up level such as highest, a keyword that belongs to another attribute such as eager (that one goes in loading) and an empty value all trigger this error.

When the reported value includes quotes, as in "high", the quotes are inside the value itself. That usually happens when the quotes around the value were HTML-encoded as ", often by a plugin or template that escaped markup a second time. " can't delimit an attribute, so the parser reads fetchpriority="high" as an unquoted value and decodes both references into literal quotes. Wrapping the value in two sets of quotes, as in fetchpriority='"high"', gives the same result. A value with only a trailing quote, such as high", means the opening quote is missing, and the validator also reports “"” in an unquoted attribute value.

Browsers treat an invalid value as auto, so the image still loads, but at the default priority. A hero image meant to be high can then start downloading later than intended. If you don't need a particular priority, remove the attribute.

The " cause rarely affects fetchpriority alone. If decoding, width, height, srcset or sizes on the same <img> also report a stray ", fix the code that writes the tag instead of editing each attribute.

Invalid example

<img src="hero.jpg" alt="A mountain lake at sunrise" width="1200" height="600" fetchpriority=&quot;high&quot;>

<img src="hero.jpg" alt="A mountain lake at sunrise" width="1200" height="600" fetchpriority="highest">

Valid example

<img src="hero.jpg" alt="A mountain lake at sunrise" width="1200" height="600" fetchpriority="high">