About This HTML Issue
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":
-
Find every
<link>element wherefetchpriorityhas an invalid value. -
Change the value to
"high","low", or"auto". -
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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.