Validación HTML: Un elemento "link" con un atributo "as" debe tener un atributo "rel" que contenga el valor "preload" o el valor "modulepreload".

Acerca de este problema HTML

El atributo as especifica el tipo de contenido que un elemento <link> está obteniendo — como "style", "script", "font" o "image". El navegador usa esta información para establecer las cabeceras de solicitud correctas, aplicar la Content Security Policy adecuada y asignar la prioridad apropiada a la solicitud. Sin embargo, la especificación HTML restringe el atributo as a elementos <link> cuyo atributo rel sea "preload" o "modulepreload". Usar as con cualquier otro valor de rel (como "stylesheet", "icon" o sin rel del todo) es HTML inválido.

Este error de validación ocurre comúnmente en dos escenarios:

Querías precargar un recurso pero olvidaste establecer rel="preload" — por ejemplo, escribir <link href="styles.css" as="style"> sin especificar rel.
Añadiste as a un <link> normal por error — por ejemplo, escribir <link rel="stylesheet" href="styles.css" as="style">, donde as es innecesario porque rel="stylesheet" ya le dice al navegador qué tipo de recurso es.

Hacer esto correctamente importa por varias razones. Los navegadores dependen de valores rel válidos para determinar cómo manejar los recursos enlazados. Una combinación incorrecta puede causar que el navegador ignore completamente el atributo as, llevando a la doble obtención de recursos o priorización incorrecta. Además, el HTML inválido puede causar comportamiento impredecible entre diferentes navegadores.

Cómo solucionarlo

Si quieres precargar un recurso (fuente, hoja de estilos, imagen, script, etc.), establece rel="preload" y mantén el atributo as.
Si quieres precargar un módulo JavaScript, establece rel="modulepreload". El atributo as por defecto es "script" para precargas de módulos y es opcional en ese caso.
Si estás usando un valor rel diferente como "stylesheet" o "icon", elimina el atributo as — no es necesario y no está permitido.

Ejemplos

Incorrecto: atributo `as` sin `rel="preload"`

Este <link> tiene as="style" pero no tiene atributo rel:

<link href="styles.css" as="style">

Incorrecto: atributo `as` con `rel="stylesheet"`

El atributo as no es válido en un enlace de hoja de estilos:

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

Correcto: precargar una hoja de estilos

Usa rel="preload" con el atributo as para indicar el tipo de recurso:

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

Ten en cuenta que precargar una hoja de estilos no la aplica — aún necesitas un <link rel="stylesheet"> separado para usar realmente el CSS.

Correcto: precargar una fuente

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

El atributo crossorigin es requerido al precargar fuentes, incluso si se sirven desde el mismo origen.

Correcto: precargar un módulo JavaScript

<link rel="modulepreload" href="app.js">

Con rel="modulepreload", el atributo as por defecto es "script", así que puedes omitirlo. Aún puedes incluirlo explícitamente si prefieres:

<link rel="modulepreload" href="app.js" as="script">

Correcto: hoja de estilos normal (no se necesita `as`)

Si simplemente quieres cargar una hoja de estilos, no se requiere el atributo as:

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

Ejemplo de documento completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preload Example</title>
<!-- Precargar recursos críticos -->

  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="hero.jpg" as="image">
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Aplicar la hoja de estilos -->

  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <img src="hero.jpg" alt="Hero banner">
</body>
</html>