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

Acerca de este problema HTML

El valor preload del atributo rel del elemento <link> te permite declarar solicitudes de fetch en el <head> de HTML, indicando al navegador que comience a cargar recursos críticos temprano en el ciclo de vida de la página—antes de que se active la maquinaria principal de renderizado. Esto puede mejorar significativamente el rendimiento al asegurar que los activos clave estén disponibles más pronto y sea menos probable que bloqueen el renderizado.

Sin embargo, una pista de preload está incompleta sin el atributo as. El atributo as le dice al navegador qué tipo de recurso se está obteniendo. Esto importa por varias razones importantes:

Priorización de solicitudes: Los navegadores asignan diferentes prioridades a diferentes tipos de recursos. Una hoja de estilo típicamente tiene mayor prioridad que una imagen. Sin as, el navegador no puede aplicar la prioridad correcta, y el recurso precargado puede obtenerse con una prioridad predeterminada baja, socavando el propósito de la precarga.
Content Security Policy (CSP): Las reglas CSP se aplican basándose en el tipo de recurso (por ejemplo, script-src, style-src). Sin conocer el tipo, el navegador no puede aplicar la política apropiada.
Encabezado Accept correcto: El valor as determina qué encabezado Accept envía el navegador con la solicitud. Por ejemplo, una solicitud de imagen envía un encabezado Accept diferente que una solicitud de script. Un encabezado incorrecto o faltante podría llevar a respuestas inesperadas del servidor.
Coincidencia de caché: Cuando el recurso se solicita posteriormente por un <script>, <link rel="stylesheet">, u otro elemento, el navegador necesita hacer coincidir contra el recurso precargado en su caché. Sin as, el navegador puede no reconocer el recurso precargado y podría obtenerlo nuevamente, resultando en una solicitud duplicada—lo opuesto a lo que pretendías.

La especificación HTML requiere explícitamente el atributo as cuando se usa rel="preload", haciendo esto un error de conformidad.

Valores comunes de `as`

El atributo as acepta un conjunto específico de valores. Aquí están los más comúnmente usados:

Valor	Tipo de Recurso
`script`	Archivos JavaScript
`style`	Hojas de estilo CSS
`font`	Fuentes web
`image`	Imágenes
`fetch`	Recursos obtenidos vía `fetch()` o `XMLHttpRequest`
`document`	Documentos HTML (para `<iframe>`)
`audio`	Archivos de audio
`video`	Archivos de video
`track`	Pistas de subtítulos WebVTT
`worker`	Web workers o shared workers

Ejemplos

Incorrecto: Falta el atributo `as`

Esto desencadenará el error de validación porque el navegador no sabe qué tipo de recurso se está precargando:

<link rel="preload" href="/fonts/roboto.woff2">

<link rel="preload" href="/js/app.js">

Correcto: Atributo `as` incluido

Agregar el valor as apropiado le dice al navegador exactamente qué tipo de recurso esperar:

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

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

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

<link rel="preload" href="/images/hero.webp" as="image">

Nota sobre fuentes y `crossorigin`

Cuando precargues fuentes, también debes incluir el atributo crossorigin, incluso si la fuente está alojada en el mismo origen. Esto es porque las obtenciones de fuentes son solicitudes CORS por defecto. Sin crossorigin, la fuente precargada no coincidirá con la solicitud posterior de fuente y será obtenida dos veces:

<!-- Correcto: incluye tanto as como crossorigin para fuentes -->

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

Ejemplo completo de documento

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Preload Example</title>
    <link rel="preload" href="/css/main.css" as="style">
    <link rel="preload" href="/js/app.js" as="script">
    <link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="/js/app.js"></script>
  </body>
</html>

Elegir el valor as correcto es sencillo—simplemente haz que coincida con cómo se usará finalmente el recurso en la página. Si estás precargando una hoja de estilo, usa as="style"; si es un script, usa as="script", y así sucesivamente.