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 Política de Seguridad de Contenido 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 comúnmente ocurre en dos escenarios:

Querías precargar un recurso pero olvidaste configurar rel="preload" — por ejemplo, escribir <link href="styles.css" as="style"> sin especificar rel.
Añadiste as a un <link> regular 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.

Hacerlo 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 hacer 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.), configura rel="preload" y mantén el atributo as.
Si quieres precargar un módulo JavaScript, configura 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: precargando 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 — todavía necesitas un <link rel="stylesheet"> separado para realmente usar el CSS.

Correcto: precargando una fuente

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

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

Correcto: precargando 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 lo prefieres:

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

Correcto: hoja de estilos regular (no 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>