Validación HTML: Valor incorrecto "highest" para el atributo "fetchpriority" en el elemento "link".

Acerca de este problema HTML

El atributo fetchpriority es una pista para el navegador sobre la prioridad relativa de obtener un recurso particular comparado con otros recursos del mismo tipo. Está definido en el estándar HTML living standard de WHATWG como un atributo enumerado con exactamente tres valores válidos:

high — El recurso debería ser obtenido con una prioridad más alta relativa a otros recursos del mismo tipo.
low — El recurso debería ser obtenido con una prioridad más baja relativa a otros recursos del mismo tipo.
auto — El navegador determina la prioridad apropiada (este es el comportamiento predeterminado).

Valores como "highest", "critical", "urgent", o cualquier otra cadena fuera de estos tres no son reconocidos. Cuando el validador W3C encuentra un valor inválido, reporta: Bad value “highest” for attribute “fetchpriority” on element “link”.

Por qué esto importa

Cumplimiento de estándares: Los navegadores tratan los valores de fetchpriority no reconocidos como equivalentes a "auto", lo que significa que tu pista de prioridad intencionada es ignorada silenciosamente. Si escribiste fetchpriority="highest" esperando que fuera aún más urgente que "high", ese énfasis extra no tiene efecto — el navegador simplemente recurre a su priorización predeterminada.

Intención del desarrollador: Un valor inválido enmascara tu intención real. Otro desarrollador leyendo el código podría asumir que "highest" hace algo especial, cuando en realidad el navegador lo descarta. Usar el valor correcto hace que el propósito del código sea claro y asegura que la pista sea realmente aplicada.

Accesibilidad y rendimiento: El atributo fetchpriority se usa comúnmente en elementos <link rel="preload"> para recursos críticos como fuentes, hojas de estilo o imágenes hero. Si tu pista de prioridad es ignorada silenciosamente debido a un valor inválido, los recursos clave pueden no cargar tan rápidamente como se pretendía, potencialmente degradando la experiencia de usuario.

Cómo solucionarlo

Reemplaza el valor inválido con uno de los tres valores aceptados. En la mayoría de los casos, si usaste "highest", probablemente querías decir "high":

Encuentra cada elemento <link> donde fetchpriority tenga un valor inválido.
Cambia el valor a "high", "low", o "auto".
Si no estás seguro de qué prioridad usar, omite el atributo completamente — el navegador usará "auto" por defecto.

Ten en cuenta que fetchpriority también funciona en elementos <img>, <script>, e <iframe>, y la misma restricción de tres valores aplica a todos ellos.

Ejemplos

Incorrecto: Valor inválido de `fetchpriority`

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

El valor "highest" no es válido. El navegador ignora la pista y recurre a la priorización predeterminada.

Correcto: Usando `"high"` para prioridad elevada

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

Correcto: Usando `"low"` para recursos diferidos

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

Correcto: Omitiendo el atributo para el comportamiento predeterminado

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

Cuando se omite, el navegador usa su lógica de prioridad predeterminada, que es equivalente a fetchpriority="auto".

Ejemplo de documento completo

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

Este ejemplo precarga una imagen hero y una fuente con fetchpriority="high", y también aplica la pista al elemento <img> mismo — todo usando valores de atributo válidos.